CSS ஓவர்ஸ்க்ரோல்-பிஹேவியர் பற்றிய ஒரு விரிவான வழிகாட்டி. ஸ்க்ரோல் செயினிங், விளைவுகள் மற்றும் உலாவிகள் மற்றும் சாதனங்களில் மென்மையான, கட்டுப்படுத்தப்பட்ட பயனர் அனுபவங்களை உருவாக்குவதற்கான மேம்பட்ட நுட்பங்களை உள்ளடக்கியது.
CSS ஓவர்ஸ்க்ரோல் பிஹேவியரில் தேர்ச்சி: ஸ்க்ரோல் செயின்களைக் கட்டுப்படுத்துதல்
overscroll-behavior என்ற CSS பண்பு, ஒரு பயனர் ஸ்க்ரோலிங் பகுதியின் எல்லையை அடையும்போது என்ன நடக்கும் என்பதைக் கட்டுப்படுத்த வலை உருவாக்குநர்களுக்கு ஒரு சக்திவாய்ந்த கருவியாகும். வெறுமனே 'பவுன்ஸ்' செய்வது அல்லது உலாவி-நிலை செயலைத் தூண்டுவதற்குப் பதிலாக (மொபைலில் பக்கத்தைப் புதுப்பிப்பது போல), நடத்தையைத் தனிப்பயனாக்கவும், மென்மையான, மேலும் உள்ளுணர்வு பயனர் அனுபவங்களை உருவாக்கவும் overscroll-behavior ஐப் பயன்படுத்தலாம். இது குறிப்பாக மொபைல் சாதனங்கள் மற்றும் தொடுதிரைகளுக்குப் பயன்பட்டாலும், டெஸ்க்டாப் பயன்பாடுகளுக்கும் ஒரு மெருகூட்டலைச் சேர்க்கிறது.
ஸ்க்ரோல் செயினிங் பற்றி புரிந்துகொள்ளுதல்
overscroll-behavior இன் பிரத்தியேகங்களுக்குள் நுழைவதற்கு முன், ஸ்க்ரோல் செயினிங் என்ற கருத்தைப் புரிந்துகொள்வது முக்கியம். ஒரு ஸ்க்ரோலிங் கொள்கலன் அதன் ஸ்க்ரோல் செய்யக்கூடிய பகுதியின் முடிவை அடையும்போது ஸ்க்ரோல் நிகழ்வுகள் எவ்வாறு கையாளப்படுகின்றன என்பதை ஸ்க்ரோல் செயினிங் விவரிக்கிறது. எந்தவொரு குறிப்பிட்ட உள்ளமைவும் இல்லாமல், ஸ்க்ரோல் நிகழ்வு DOM மரத்தில் அடுத்த ஸ்க்ரோல் செய்யக்கூடிய மூதாதையர் எலிமெண்ட்டுக்கு 'செயின்' ஆகி, இறுதியில் ரூட் எலிமெண்ட்டை (<html> அல்லது <body> எலிமெண்ட்) அடையக்கூடும்.
உதாரணமாக, ஒரு நீண்ட பட்டியலைக் கொண்ட ஒரு மோடல் விண்டோவை கற்பனை செய்து பாருங்கள். பயனர் மோடலுக்குள் பட்டியலின் கீழே ஸ்க்ரோல் செய்யும்போது, இயல்புநிலை நடத்தை மோடலின் பின்னால் உள்ள உள்ளடக்கத்தை ஸ்க்ரோல் செய்யத் தொடங்கும், இது பெரும்பாலும் விரும்பத்தகாதது. overscroll-behavior இந்த ஸ்க்ரோல் செயினிங்கைத் தடுக்கவும், ஸ்க்ரோலிங்கை மோடலுக்குள் வைத்திருக்கவும் உங்களை அனுமதிக்கிறது.
overscroll-behavior பண்பு: தொடரியல் மற்றும் மதிப்புகள்
overscroll-behavior பண்பு மூன்று முதன்மை மதிப்புகளை ஏற்கிறது:
auto: இது இயல்புநிலை மதிப்பு. ஸ்க்ரோல் செயினிங் சாதாரணமாக நிகழும். எலிமெண்ட்டின் ஸ்க்ரோலிங் எல்லையை அடையும்போது, உலாவி ஸ்க்ரோல் நிகழ்வை DOM மரம் வரை பரப்பும்.contain: பெற்றோர் எலிமெண்ட்டுகளுக்கு ஸ்க்ரோல் செயினிங் செல்வதை தடுக்கிறது. எல்லையை அடையும்போது, உலாவி ஒரு உலாவி-குறிப்பிட்ட ஓவர்ஸ்க்ரோல் விளைவை (iOS அல்லது Android இல் ஒரு பவுன்ஸ் போல) நிகழ்த்தி, ஸ்க்ரோல் பரவுவதை நிறுத்துகிறது.none:contain-ஐப் போன்றது, ஆனால் இது *மேலும்* உலாவி-குறிப்பிட்ட ஓவர்ஸ்க்ரோல் விளைவைத் தடுக்கிறது. அதாவது, எல்லையை அடையும்போது, முற்றிலும் எதுவும் நடக்காது. இதை கவனமாகப் பயன்படுத்தவும், ஏனெனில் இது சிந்தனையுடன் செயல்படுத்தப்படாவிட்டால் ஸ்க்ரோலிங் அனுபவத்தை அதிர்ச்சியூட்டுவதாக உணர வைக்கும்.
overscroll-behavior பண்பு x மற்றும் y அச்சுகளில் தனித்தனியாக நடத்தையைக் கட்டுப்படுத்த ஷார்ட்ஹேண்டுகளையும் கொண்டுள்ளது:
overscroll-behavior-xoverscroll-behavior-y
உதாரணமாக, overscroll-behavior: contain auto; x-அச்சில் ஸ்க்ரோல் செயினிங்கைத் தடுக்கும், அதே நேரத்தில் y-அச்சில் அதை அனுமதிக்கும். இதேபோல், overscroll-behavior-y: none; உலாவியின் ஓவர்ஸ்க்ரோல் விளைவையும் ஸ்க்ரோல் செயினிங்கையும் y-அச்சில் மட்டும் தடுக்கும்.
நடைமுறை உதாரணங்கள் மற்றும் பயன்பாட்டு வழக்குகள்
உதாரணம் 1: மோடல் விண்டோக்கள்
முன்பு குறிப்பிட்டபடி, மோடல் விண்டோக்கள் overscroll-behavior க்கான ஒரு பொதுவான பயன்பாட்டு வழக்கு. பயனர் மோடலின் உள்ளடக்கத்தின் முடிவை அடையும்போது மோடலின் பின்னால் உள்ள உள்ளடக்கத்தை ஸ்க்ரோல் செய்வதைத் தடுக்க, மோடலின் கொள்கலனுக்கு overscroll-behavior: contain; ஐப் பயன்படுத்தவும்.
.modal-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto; /* Or 'scroll' if you always want a scrollbar */
overscroll-behavior: contain;
}
உதாரணம் 2: அரட்டை இடைமுகங்கள்
அரட்டை பயன்பாடுகளில், பயனர் அரட்டை விண்டோவில் கீழே இழுக்கும்போது பக்கம் புதுப்பிக்கப்படுவதைத் தடுக்க நீங்கள் விரும்பலாம். அரட்டை கொள்கலனுக்கு overscroll-behavior-y: contain; ஐப் பயன்படுத்துவதன் மூலம் இதை அடையலாம்.
.chat-window {
height: 400px;
overflow-y: auto;
overscroll-behavior-y: contain;
}
உதாரணம் 3: வரைபடங்கள் மற்றும் ஊடாடும் உள்ளடக்கம்
வரைபடங்களை (Google Maps அல்லது Leaflet போன்றவை) அல்லது பிற ஊடாடும் உள்ளடக்கத்தை உட்பொதிக்கும்போது, பயனர் வரைபடத்துடன் தொடர்பு கொள்ளும்போது சுற்றியுள்ள பக்கம் ஸ்க்ரோல் செய்வதை நீங்கள் பொதுவாக விரும்ப மாட்டீர்கள். இங்கு overscroll-behavior: none; ஐ அமைப்பது பயனுள்ளதாக இருக்கும், இருப்பினும் இது பவுன்ஸ் விளைவை முடக்குவதால் பயனர் அனுபவத்தை கவனமாக பரிசீலிக்க வேண்டும்.
.map-container {
width: 100%;
height: 500px;
overscroll-behavior: none;
}
<body> எலிமெண்ட்டில் overscroll-behavior: none; அமைப்பது பொதுவாக *பரிந்துரைக்கப்படவில்லை* என்பது கவனிக்கத்தக்கது. இது பயனர் அனுபவத்தை கடுமையாக பாதிக்கலாம், குறிப்பாக மொபைல் சாதனங்களில், கீழே இழுப்பதன் மூலம் பக்கத்தைப் புதுப்பிக்கும் திறனை முற்றிலுமாக நீக்குகிறது.
உதாரணம் 4: தனிப்பயன் ஓவர்ஸ்க்ரோல் விளைவுகளைச் செயல்படுத்துதல்
overscroll-behavior: contain; ஒரு உலாவி-இயல்புநிலை விளைவை வழங்கினாலும், நீங்கள் ஒரு முற்றிலும் தனிப்பயன் ஓவர்ஸ்க்ரோல் அனுபவத்தை உருவாக்க விரும்பலாம். இதைச் செய்ய, நீங்கள் பொதுவாக இயல்புநிலை உலாவி நடத்தையை முடக்க overscroll-behavior: none; ஐப் பயன்படுத்துவீர்கள், பின்னர் ஓவர்ஸ்க்ரோல் நிகழ்வுகளைக் கண்டறிந்து தனிப்பயன் அனிமேஷன்கள் அல்லது செயல்களைத் தூண்ட ஜாவாஸ்கிரிப்டைப் பயன்படுத்துவீர்கள்.
இந்த அணுகுமுறை அதிகபட்ச நெகிழ்வுத்தன்மையை வழங்குகிறது, ஆனால் அதிக மேம்பாட்டு முயற்சியும் தேவைப்படுகிறது.
மேம்பட்ட நுட்பங்கள் மற்றும் கருத்தில் கொள்ள வேண்டியவை
ஸ்க்ரோல் ஸ்னாப் பாயிண்டுகளுடன் இணைத்தல்
overscroll-behavior ஐ CSS ஸ்க்ரோல் ஸ்னாப் உடன் திறம்பட இணைத்து தனித்துவமான ஸ்க்ரோலிங் அனுபவங்களை உருவாக்கலாம். உதாரணமாக, பெற்றோர் பக்கத்தின் புதுப்பிப்பை தற்செயலாகத் தூண்டாமல், ஸ்க்ரோல் எப்போதும் அடுத்த எலிமெண்ட்டுக்கு ஸ்னாப் ஆவதை உறுதிசெய்ய, ஸ்க்ரோல் ஸ்னாப் பாயிண்டுகளுடன் ஒரு கொள்கலனில் overscroll-behavior: contain; ஐப் பயன்படுத்தலாம்.
உலாவி இணக்கத்தன்மை
overscroll-behavior க்கு Chrome, Firefox, Safari மற்றும் Edge உட்பட நவீன உலாவிகளில் சிறந்த ஆதரவு உள்ளது. இருப்பினும், சமீபத்திய இணக்கத்தன்மை தகவல் மற்றும் பழைய உலாவிகளுக்கான சாத்தியமான பாலிஃபில்களுக்கு Can I use வலைத்தளத்தை சரிபார்ப்பது எப்போதும் ஒரு நல்ல யோசனையாகும்.
அணுகல்தன்மைக்கான கருத்தில் கொள்ள வேண்டியவை
overscroll-behavior ஐப் பயன்படுத்தும்போது, அணுகல்தன்மையைக் கருத்தில் கொள்வது அவசியம். இயல்புநிலை ஓவர்ஸ்க்ரோல் விளைவுகளை முடக்குவது (குறிப்பாக overscroll-behavior: none; உடன்) பயனர்களுக்கு, குறிப்பாக இயக்கக் குறைபாடுகள் உள்ளவர்களுக்கு, திசைதிருப்பலாக இருக்கலாம். நீங்கள் இயல்புநிலை விளைவுகளை முடக்கினால், ஸ்க்ரோலிங் எல்லையை அடைந்துவிட்டதைக் குறிக்க மாற்று காட்சி குறிப்புகள் அல்லது பின்னூட்டங்களை வழங்குவதை உறுதிசெய்யுங்கள்.
உதாரணமாக, ஓவர்ஸ்க்ரோல் நிகழ்வைக் கண்டறிந்து, எலிமெண்ட்டில் ஒரு நுட்பமான அனிமேஷன் அல்லது காட்சி காட்டி சேர்க்க ஜாவாஸ்கிரிப்டைப் பயன்படுத்தலாம்.
செயல்திறன் தாக்கங்கள்
overscroll-behavior ஐப் பயன்படுத்துவது பொதுவாக குறைந்தபட்ச செயல்திறன் தாக்கத்தையே கொண்டுள்ளது. இருப்பினும், நீங்கள் ஜாவாஸ்கிரிப்ட் மூலம் தனிப்பயன் ஓவர்ஸ்க்ரோல் விளைவுகளைச் செயல்படுத்தினால், உங்கள் அனிமேஷன்கள் மற்றும் நிகழ்வு கேட்பவர்களின் செயல்திறன் தாக்கங்கள் குறித்து கவனமாக இருங்கள். ஸ்க்ரோல் நிகழ்வு கையாளுபவருக்குள் கணக்கீட்டு ரீதியாக விலையுயர்ந்த செயல்பாடுகளைத் தவிர்க்கவும், உங்கள் அனிமேஷன்களை மேம்படுத்த requestAnimationFrame போன்ற நுட்பங்களைப் பயன்படுத்தவும்.
பொதுவான சிக்கல்களை சரிசெய்தல்
ஸ்க்ரோல் செயினிங் இன்னும் நிகழ்கிறது
overscroll-behavior: contain; உடன் கூட ஸ்க்ரோல் செயினிங் இன்னும் நடப்பதாக நீங்கள் கண்டால், DOM படிநிலையை இருமுறை சரிபார்க்கவும். பண்பு சரியான எலிமெண்ட்டில் பயன்படுத்தப்பட்டுள்ளதா என்பதை உறுதிப்படுத்திக் கொள்ளுங்கள் – ஸ்க்ரோல் செய்யக்கூடிய உள்ளடக்கத்தின் நேரடி பெற்றோர், அல்லது நீங்கள் தனிமைப்படுத்த விரும்பும் கொள்கலன். மற்றொரு CSS பண்பு அல்லது ஜாவாஸ்கிரிப்ட் குறியீடு ஸ்க்ரோல் நடத்தையில் குறுக்கிடக்கூடும்.
குறிப்பிட்ட சாதனங்களில் எதிர்பாராத நடத்தை
ஓவர்ஸ்க்ரோல் விளைவுகளின் உலாவி செயலாக்கங்கள் வெவ்வேறு இயக்க முறைமைகள் மற்றும் சாதனங்களுக்கு இடையில் சற்று மாறுபடலாம். நிலையான நடத்தையை உறுதிப்படுத்த உங்கள் செயலாக்கத்தை பல்வேறு சாதனங்களில் எப்போதும் சோதிக்கவும். ஏதேனும் முரண்பாடுகளை நிவர்த்தி செய்ய நீங்கள் உலாவி-குறிப்பிட்ட CSS ஹேக்குகள் அல்லது ஜாவாஸ்கிரிப்ட் தீர்வுகளைப் பயன்படுத்த வேண்டியிருக்கலாம்.
முரண்படும் CSS பண்புகள்
சில CSS பண்புகள் overscroll-behavior உடன் எதிர்பாராத வழிகளில் தொடர்பு கொள்ளலாம். உதாரணமாக, ஒரு பெற்றோர் எலிமெண்ட்டில் overflow: hidden; இருந்தால், அது overscroll-behavior அமைப்பைப் பொருட்படுத்தாமல் ஸ்க்ரோல் செயினிங்கைத் தடுக்கலாம். உங்கள் CSS விதிகள் ஒன்றுக்கொன்று முரண்படவில்லை என்பதை உறுதிப்படுத்திக் கொள்ளுங்கள்.
அடிப்படைகளைத் தாண்டி: படைப்பாற்றல் பயன்பாடுகள்
overscroll-behavior பெரும்பாலும் மோடல்களில் ஸ்க்ரோல் செயினிங்கைத் தடுப்பது போன்ற நடைமுறை நோக்கங்களுக்காகப் பயன்படுத்தப்பட்டாலும், இது மேலும் படைப்பாற்றல் மற்றும் ஈர்க்கக்கூடிய பயனர் அனுபவங்களை உருவாக்கவும் பயன்படுத்தப்படலாம்.
- தனிப்பயன் புல்-டு-ரிஃப்ரெஷ்: உலாவியின் இயல்புநிலை புல்-டு-ரிஃப்ரெஷை நம்புவதற்குப் பதிலாக, பயனர் ஒரு கொள்கலனில் கீழே இழுக்கும்போது நீங்கள் ஒரு முற்றிலும் தனிப்பயன் அனிமேஷன் அல்லது தொடர்புகளை உருவாக்கலாம்.
- ஓவர்ஸ்க்ரோலில் பாராலாக்ஸ் விளைவுகள்: பயனர் ஒரு கொள்கலனை ஓவர்ஸ்க்ரோல் செய்யும்போது பாராலாக்ஸ் விளைவுகள் அல்லது பிற காட்சி அனிமேஷன்களைத் தூண்டவும்.
- ஊடாடும் பயிற்சிகள்: ஒரு ஊடாடும் பயிற்சி அல்லது வழிகாட்டியில் படிகளைத் தூண்ட ஓவர்ஸ்க்ரோல் நிகழ்வுகளைப் பயன்படுத்தவும்.
முடிவுரை: ஸ்க்ரோல் அனுபவங்களைக் கட்டுப்படுத்துதல்
overscroll-behavior என்பது ஒப்பீட்டளவில் எளிமையான ஆனால் நம்பமுடியாத அளவிற்கு சக்திவாய்ந்த CSS பண்பு ஆகும், இது உங்கள் வலை பயன்பாடுகளில் ஸ்க்ரோலிங் எவ்வாறு செயல்படுகிறது என்பதன் மீது நுணுக்கமான கட்டுப்பாட்டை உங்களுக்கு வழங்குகிறது. ஸ்க்ரோல் செயினிங் மற்றும் overscroll-behavior இன் வெவ்வேறு மதிப்புகளின் கருத்துக்களைப் புரிந்துகொள்வதன் மூலம், நீங்கள் பரந்த அளவிலான சாதனங்கள் மற்றும் உலாவிகளில் மென்மையான, மேலும் உள்ளுணர்வு மற்றும் மேலும் ஈர்க்கக்கூடிய பயனர் அனுபவங்களை உருவாக்க முடியும். overscroll-behavior இன் முழு திறனையும் வெளிக்கொணரவும், உங்கள் வலை மேம்பாட்டுத் திறன்களை உயர்த்தவும் இந்த வழிகாட்டியில் விவாதிக்கப்பட்ட பல்வேறு எடுத்துக்காட்டுகள் மற்றும் நுட்பங்களுடன் பரிசோதனை செய்யுங்கள்.
அனைத்து பயனர்களுக்கும் ஒரு நிலையான மற்றும் சுவாரஸ்யமான அனுபவத்தை உறுதிப்படுத்த, அணுகல்தன்மையைக் கருத்தில் கொண்டு உங்கள் செயலாக்கத்தை முழுமையாகச் சோதிக்க எப்போதும் நினைவில் கொள்ளுங்கள்.