செங்குத்து மற்றும் கிடைமட்ட ஸ்க்ரோலிங் என்பது மவுஸ், டச்பேட் அல்லது விரலைப் பயன்படுத்தி வலைப்பக்கத்தை வழிசெலுத்துவதற்கான வழிகள். ஒரு தனிமத்தின் உள்ளடக்கம் கொள்கலனின் உயரத்தை மீறும் போது செங்குத்து ஸ்க்ரோலிங் பயன்படுத்தப்படுகிறது. ஒரு உறுப்பில் உள்ள உள்ளடக்கம் கொள்கலனின் அகலத்தை மீறும் போது கிடைமட்ட ஸ்க்ரோலிங் பயன்படுத்தப்படுகிறது. செங்குத்து ஸ்க்ரோலிங் பயனர்களை வலைப்பக்கத்தை மேலும் கீழும் நகர்த்த உதவுகிறது, அதே நேரத்தில் கிடைமட்ட ஸ்க்ரோலிங் பக்கத்தை இடது மற்றும் வலதுபுறமாக நகர்த்த அனுமதிக்கிறது. டெயில்விண்ட் CSS ஆனது இணையப் பக்கங்களில் செங்குத்து மற்றும் கிடைமட்ட ஸ்க்ரோலிங்கை இயக்க பயன்பாட்டு வகுப்புகளை வழங்குகிறது.
இந்த கட்டுரை எடுத்துக்காட்டும்:
- டெயில்விண்டில் செங்குத்து ஸ்க்ரோலிங்கை எப்படி இயக்குவது?
- டெயில்விண்டில் கிடைமட்ட ஸ்க்ரோலிங்கை எப்படி இயக்குவது?
டெயில்விண்டில் செங்குத்து ஸ்க்ரோலிங்கை எப்படி இயக்குவது?
டெயில்விண்டில் செங்குத்து ஸ்க்ரோலிங்கை இயக்க, ' வழிதல்-ஒய்-சுருள் HTML நிரலில் தேவையான உறுப்புடன் பயன்பாட்டு வகுப்பு. இது செங்குத்து ஸ்க்ரோலிங் அனுமதிக்கிறது மற்றும் பயனர் தங்கள் கணினி அமைப்புகளில் 'எப்போதும் தெரியும்' ஸ்க்ரோல்பார்களை முடக்காத வரையில் எப்போதும் ஸ்க்ரோல்பார்களைக் காண்பிக்கும்.
தொடரியல்
< உறுப்பு வர்க்கம் = 'ஓவர்ஃப்ளோ-ஒய்-ஸ்க்ரோல் ...' > ... உறுப்பு >
எடுத்துக்காட்டு: செங்குத்து உருட்டலை இயக்குதல்
இந்த எடுத்துக்காட்டில், ஒரு நெடுவரிசையில் சில நெகிழ்வுப் பொருட்களைக் கொண்ட ஃப்ளெக்ஸ் கொள்கலனை உருவாக்கி, ' வழிதல்-ஒய்-சுருள் 'அதற்கான பயன்பாடு:
< உடல் >
< div வர்க்கம் = 'flex flex-col overflow-y-scroll bg-purple-700 p-4 mx-14 mt-5 h-36' >
< div வர்க்கம் = 'bg-yellow-400 p-2 m-2' > 1 div >
< div வர்க்கம் = 'bg-yellow-400 p-2 m-2' > 2 div >
< div வர்க்கம் = 'bg-yellow-400 p-2 m-2' > 3 div >
< div வர்க்கம் = 'bg-yellow-400 p-2 m-2' > 4 div >
< div வர்க்கம் = 'bg-yellow-400 p-2 m-2' > 5 div >
< div வர்க்கம் = 'bg-yellow-400 p-2 m-2' > 6 div >
div >
உடல் >
இங்கே, பெற்றோரில்
- ' நெகிழ்வு ஒரு நெகிழ்வான தளவமைப்பை உருவாக்குவதன் மூலம் கிடைக்கும் இடத்தின் அடிப்படையில் குழந்தை உறுப்புகளின் அளவை சரிசெய்ய வகுப்பு பயன்படுத்தப்படுகிறது.
- ' flex-col ” வகுப்பு கொள்கலனின் நெகிழ்வு திசையை ஒரு நெடுவரிசைக்கு அமைக்கிறது.
- ' வழிதல்-ஒய்-சுருள் ” வகுப்பு செங்குத்து உருட்டலை செயல்படுத்துகிறது.
- ' பிஜி-ஊதா-700 ” வகுப்பு ஊதா நிறத்தை கொள்கலனின் பின்னணியில் அமைக்கிறது.
- ' ப-4 ” வகுப்பு கன்டெய்னரின் எல்லாப் பக்கங்களிலும் 4 யூனிட் திணிப்புகளை அமைக்கிறது.
- ' mx-14 ” வகுப்பு என்பது கொள்கலனின் x அச்சில் 14 அலகுகளின் விளிம்பைப் பயன்படுத்துகிறது.
- ' mt-5 ” வகுப்பானது 5 அலகுகளின் விளிம்பை கொள்கலனின் மேற்பகுதியில் பயன்படுத்துகிறது.
- ' h-36 ” வகுப்பு கொள்கலனின் உயரத்தை 36 அலகுகளாக அமைக்கிறது.
குழந்தையில்
- ' பிஜி-மஞ்சள்-400 'வகுப்பு கட்டம் உருப்படிகளின் பின்னணியை மஞ்சள் நிறமாக அமைக்கிறது.
- ' ப-2 ” வர்க்கம் நெகிழ்வான உருப்படிகளுக்குள் உள்ள உள்ளடக்கத்தில் 3 யூனிட் திணிப்புகளைச் சேர்க்கிறது.
- ' மீ-2 ” வகுப்பு 2 அலகுகளின் விளிம்பை ஃப்ளெக்ஸ் உருப்படிகளுக்கு அமைக்கிறது.
வெளியீடு
மேலே உள்ள வெளியீட்டில், செங்குத்து ஸ்க்ரோலிங் வெற்றிகரமாக இயக்கப்பட்டிருப்பதைக் காணலாம்.
டெயில்விண்டில் கிடைமட்ட ஸ்க்ரோலிங்கை எப்படி இயக்குவது?
டெயில்விண்டில் கிடைமட்ட ஸ்க்ரோலிங்கை இயக்க, ' overflow-x-சுருள் HTML நிரலில் குறிப்பிட்ட உறுப்புடன் பயன்பாட்டு வகுப்பு. இது கிடைமட்ட ஸ்க்ரோலிங் செயல்படுத்துகிறது மற்றும் பயனர் தங்கள் கணினி அமைப்புகளில் 'எப்போதும் காணக்கூடிய' ஸ்க்ரோல்பார்களை முடக்காத வரை எப்போதும் ஸ்க்ரோல்பார்களைக் காண்பிக்கும்.
தொடரியல்
< உறுப்பு வர்க்கம் = 'ஓவர்ஃப்ளோ-எக்ஸ்-ஸ்க்ரோல் ...' > ... உறுப்பு >
எடுத்துக்காட்டு: கிடைமட்ட உருட்டலை இயக்குதல்
இந்த எடுத்துக்காட்டில், வரிசையாக சில நெகிழ்வுப் பொருட்களைக் கொண்ட ஃப்ளெக்ஸ் கொள்கலனை உருவாக்கி, ' overflow-x-சுருள் 'அதற்கான பயன்பாடு:
< உடல் >< div வர்க்கம் = 'ஃப்ளெக்ஸ் ஃப்ளெக்ஸ்-ரோ ஓவர்ஃப்ளோ-எக்ஸ்-ஸ்க்ரோல் ஸ்பேஸ்-எக்ஸ்-24 பிஜி-பர்பிள்-700 ப-4 எம்எக்ஸ்-14 எம்டி-5 எச்-36' >
< div வர்க்கம் = 'bg-yellow-400 p-2 m-2' > 1 div >
< div வர்க்கம் = 'bg-yellow-400 p-2 m-2' > 2 div >
< div வர்க்கம் = 'bg-yellow-400 p-2 m-2' > 3 div >
< div வர்க்கம் = 'bg-yellow-400 p-2 m-2' > 4 div >
< div வர்க்கம் = 'bg-yellow-400 p-2 m-2' > 5 div >
< div வர்க்கம் = 'bg-yellow-400 p-2 m-2' > 6 div >
div >
உடல் >
இங்கே பெற்றோரில்
வெளியீடு
மேலே உள்ள வெளியீடு, கிடைமட்ட ஸ்க்ரோலிங் வெற்றிகரமாக இயக்கப்பட்டதைக் குறிக்கிறது.
முடிவுரை
டெயில்விண்டில் செங்குத்து மற்றும் கிடைமட்ட ஸ்க்ரோலிங்கை இயக்க, ' வழிதல்-ஒய்-சுருள் 'மற்றும்' overflow-x-சுருள் ” பயன்பாட்டு வகுப்புகள் முறையே பயன்படுத்தப்படுகின்றன. செங்குத்து மற்றும் கிடைமட்ட ஸ்க்ரோலிங் செயல்படுத்த மற்றும் எப்போதும் ஸ்க்ரோல்பார்களைக் காண்பிக்க HTML நிரலில் உள்ள தேவையான உறுப்புகளுக்கு இந்த பயன்பாடுகள் பயன்படுத்தப்படுகின்றன. டெயில்விண்டில் செங்குத்து மற்றும் கிடைமட்ட ஸ்க்ரோலிங்கை இயக்கும் முறையை இந்தக் கட்டுரை விளக்கியுள்ளது.