CSS Scroll Behavior: ஒரு தடையற்ற பயனர் அனுபவத்திற்கு இயல்பான மென்மையான ஸ்க்ரோலிங்கைத் திறத்தல்

வலை மேம்பாட்டின் ஆற்றல்மிக்க உலகில், ஈடுபாடும் உள்ளுணர்வுமிக்க பயனர் அனுபவத்தையும் (UX) உருவாக்குவது மிக முக்கியமானது. இதற்கு கணிசமாக பங்களிக்கும் ஒரு நுட்பமான ஆனால் சக்திவாய்ந்த நுட்பம் மென்மையான ஸ்க்ரோலிங் ஆகும். நீண்ட வலைப்பக்கங்களில் செல்லும்போது அல்லது உள் இணைப்புகளை கிளிக் செய்யும் போது திடீரென தாவிச் செல்லும் நாட்கள் போய்விட்டன. நவீன வலை வடிவமைப்பு மென்மைக்கு முன்னுரிமை அளிக்கிறது, மேலும் CSS Scroll Behavior இதை சிரமமின்றி அடைய உங்கள் நுழைவாயில் ஆகும்.

இந்த விரிவான வழிகாட்டி CSS scroll-behavior பண்பை ஆழமாக ஆராய்ந்து, அதன் திறன்கள், செயல்படுத்தல், சிறந்த நடைமுறைகள் மற்றும் உலகளாவிய பார்வையாளர்களுக்கான பரிசீலனைகளை ஆராயும். நீங்கள் ஒரு அனுபவமிக்க முகப்பு-நிலை டெவலப்பராக இருந்தாலும் சரி அல்லது உங்கள் பயணத்தைத் தொடங்குபவராக இருந்தாலும் சரி, இயல்பான மென்மையான ஸ்க்ரோலிங்கைப் புரிந்துகொண்டு செயல்படுத்துவது உங்கள் வலைத்தளங்களை செயல்பாட்டு நிலையில் இருந்து உண்மையிலேயே விதிவிலக்கான நிலைக்கு உயர்த்தும்.

மென்மையான ஸ்க்ரோலிங்கின் தேவையைப் புரிந்துகொள்ளுதல்

ஒரு வலைத்தளத்தில் ஒரு நீண்ட கட்டுரைக்குச் செல்வதைக் கற்பனை செய்து பாருங்கள். இயல்புநிலை ஸ்க்ரோலிங்கில், "மேலே செல்க" இணைப்பு அல்லது உள் நங்கூர இணைப்பைக் கிளிக் செய்வதால், இலக்கு பிரிவுக்கு உடனடியாக, திடீரென ஒரு தாவுதல் ஏற்படுகிறது. இது குறிப்பாக கணிசமான உள்ளடக்கம் உள்ள பக்கங்களில் குழப்பத்தை ஏற்படுத்தும், மேலும் பயனர் ஓட்டம் மற்றும் தொழில்முறை உணர்வை எதிர்மறையாகப் பாதிக்கும்.

மறுபுறம், மென்மையான ஸ்க்ரோலிங், தற்போதைய ஸ்க்ரோல் நிலையிலிருந்து இலக்குக்கு படிப்படியான அனிமேஷனை வழங்குகிறது. இந்த மென்மையான மாற்றம்:

• வாசிப்புத்திறனை மேம்படுத்துகிறது: பயனர்கள் பிரிவுகளுக்கு இடையில் நகரும்போது சூழலைத் தக்க வைத்துக் கொள்ள இது அனுமதிக்கிறது.
• வழிசெலுத்தலை மேம்படுத்துகிறது: இது நீண்ட பக்கங்களுக்குச் செல்வதை மிகவும் கட்டுப்படுத்தப்பட்டதாகவும், குறைவான திடீர் அதிர்ச்சி உடையதாகவும் உணர வைக்கிறது.
• உணரப்படும் தரத்தை அதிகரிக்கிறது: ஒரு மென்மையான ஸ்க்ரோலிங் அனுபவம் பெரும்பாலும் உயர் மட்ட மெருகூட்டல் மற்றும் விவரங்களில் கவனத்தை வெளிப்படுத்துகிறது.
• அணுகல்தன்மையை ஆதரிக்கிறது: சில அறிவாற்றல் அல்லது இயக்கக் குறைபாடுகள் உள்ள பயனர்களுக்கு, உடனடி தாவலை விட கட்டுப்படுத்தப்பட்ட ஸ்க்ரோல் பின்பற்றுவது எளிதாக இருக்கும்.

scroll-behavior-இன் ஆற்றல்

CSS scroll-behavior பண்பு என்பது ஸ்க்ரோல் செய்யக்கூடிய ஒரு உறுப்பின் ஸ்க்ரோலிங் அனிமேஷனைக் கட்டுப்படுத்துவதற்கான இயல்பான மற்றும் திறமையான வழியாகும். இது இரண்டு முதன்மை மதிப்புகளை வழங்குகிறது:

• auto: இது இயல்புநிலை மதிப்பு. ஸ்க்ரோலிங் உடனடியாகவும் திடீரெனவும் இருக்கும். எந்த அனிமேஷனும் ஏற்படாது.
• smooth: ஒரு ஸ்க்ரோலிங் செயல் தூண்டப்படும்போது (எ.கா., ஒரு நங்கூர இணைப்பைக் கிளிக் செய்வதன் மூலம்), உலாவி இலக்குக்கு ஸ்க்ரோலை அனிமேட் செய்யும்.

இயல்பான மென்மையான ஸ்க்ரோலிங்கை செயல்படுத்துதல்

scroll-behavior-ஐப் பயன்படுத்தி மென்மையான ஸ்க்ரோலிங்கை செயல்படுத்துவது மிகவும் எளிமையானது. நீங்கள் முதன்மையாக ஸ்க்ரோல் செய்யப்படும் உறுப்புக்கு இதைப் பயன்படுத்த வேண்டும். பெரும்பாலான வலைப்பக்கங்களில், இது html அல்லது body உறுப்பு ஆகும், ஏனெனில் இந்த கண்டெய்னர்கள் வியூபோர்ட்டின் ஸ்க்ரோலை நிர்வகிக்கின்றன.

எடுத்துக்காட்டு 1: முழு பக்கத்திற்கும் பயன்படுத்துதல்

முழு வலைப்பக்கத்திற்கும் மென்மையான ஸ்க்ரோலிங்கை இயக்க, நீங்கள் html உறுப்பை இலக்கு வைப்பீர்கள் (அல்லது body, இருப்பினும் வெவ்வேறு ரெண்டரிங் என்ஜின்களில் பரந்த இணக்கத்தன்மைக்காக html பெரும்பாலும் விரும்பப்படுகிறது):

            
html {
  scroll-behavior: smooth;
}

            

              
                Copy
              
            
          

இந்த எளிய CSS விதியுடன், வியூபோர்ட்டுக்குள் உள்ள நங்கூர இணைப்புகளில் (எ.கா., <a href="#section-id">Go to Section</a>) எந்தவொரு கிளிக்குகளும் இப்போது தொடர்புடைய ஐடி கொண்ட உறுப்புக்கு (எ.கா., <div id="section-id">...</div>) ஒரு மென்மையான ஸ்க்ரோலைத் தூண்டும்.

எடுத்துக்காட்டு 2: ஒரு குறிப்பிட்ட ஸ்க்ரோல் செய்யக்கூடிய கண்டெய்னருக்கு பயன்படுத்துதல்

சில நேரங்களில், உங்கள் பக்கத்தில் ஒரு குறிப்பிட்ட ஸ்க்ரோல் செய்யக்கூடிய உறுப்பு இருக்கலாம், அதாவது ஒரு சைட்பார், ஒரு மோடல் விண்டோ அல்லது ஒரு தனிப்பயன் உள்ளடக்கப் பகுதி. இந்த சந்தர்ப்பங்களில், நீங்கள் scroll-behavior: smooth; என்பதை நேரடியாக அந்த உறுப்புக்கு பயன்படுத்தலாம்:

            
.scrollable-content {
  height: 300px;
  overflow-y: scroll;
  scroll-behavior: smooth;
}

            

              
                Copy
              
            
          

இந்த சூழ்நிலையில், .scrollable-content கண்டெய்னருக்குள் ஸ்க்ரோல் செய்வது மட்டுமே அனிமேட் செய்யப்படும். இந்த குறிப்பிட்ட கண்டெய்னருக்குள் உள்ள உறுப்புகளை இலக்காகக் கொண்ட உள் இணைப்புகள் அல்லது ஸ்க்ரோல் கட்டளைகள் மென்மையான அனிமேஷனில் இருந்து பயனடையும்.

உலாவி ஆதரவு மற்றும் பரிசீலனைகள்

scroll-behavior பண்பு அனைத்து நவீன உலாவிகளிலும் பரவலான ஆதரவைக் கொண்டுள்ளது. இது பெரும்பாலான சந்தர்ப்பங்களில் ஜாவாஸ்கிரிப்ட் ஃபால்பேக்குகள் தேவைப்படாமல் இயல்பான மென்மையான ஸ்க்ரோலிங்கை செயல்படுத்துவதற்கான ஒரு நம்பகமான தேர்வாக அமைகிறது.

இருப்பினும், சாத்தியமான நுணுக்கங்களைப் பற்றி அறிந்திருப்பது எப்போதும் ஒரு நல்ல நடைமுறை:

• பழைய உலாவிகள்: ஆதரவு சிறப்பாக இருந்தாலும், மிகவும் முக்கியமற்ற அல்லது மரபு உலாவி ஆதரவு தேவைகளுக்கு, நீங்கள் இன்னும் ஒரு ஜாவாஸ்கிரிப்ட் அடிப்படையிலான மென்மையான ஸ்க்ரோலிங் தீர்வை ஒரு ஃபால்பேக்காகக் கருத்தில் கொள்ளலாம்.
• ஸ்க்ரோல்பார் ஸ்டைலிங்: ஸ்க்ரோல்பார்களை ஸ்டைல் செய்யும்போது (எ.கா., ::-webkit-scrollbar ஐப் பயன்படுத்தி), உங்கள் ஸ்டைல்கள் அனிமேஷனில் குறுக்கிடவில்லை என்பதை உறுதிப்படுத்திக் கொள்ளுங்கள்.

உலகளாவிய கண்ணோட்டங்கள் மற்றும் சிறந்த நடைமுறைகள்

உலகளாவிய பார்வையாளர்களுக்காக வடிவமைக்கும்போது, இத்தகைய அம்சங்கள் வெவ்வேறு கலாச்சாரங்கள் மற்றும் தொழில்நுட்ப சூழல்களில் எவ்வாறு உணரப்படுகின்றன என்பதைப் புரிந்துகொள்வது முக்கியம். அதிர்ஷ்டவசமாக, மென்மையான ஸ்க்ரோலிங் என்பது உலகளவில் பாராட்டப்பட்ட ஒரு UX மேம்பாடு ஆகும்.

அனைவருக்கும் அணுகல்தன்மை

உங்கள் வலைத்தளம் அனைவருக்கும் அணுகக்கூடியதாக இருப்பதை உறுதி செய்வது நவீன வலை மேம்பாட்டின் ஒரு முக்கிய கொள்கையாகும். scroll-behavior: smooth; பல வழிகளில் அணுகல்தன்மைக்கு பங்களிக்கிறது:

• குறைக்கப்பட்ட இயக்க உணர்திறன்: இயல்புநிலை மென்மையான ஸ்க்ரோல் பொதுவாக மென்மையாக இருந்தாலும், வெஸ்டிபுலர் கோளாறுகள் அல்லது இயக்க உணர்திறன் கொண்ட சில பயனர்கள் எந்தவொரு அனிமேஷனையும் தூண்டுவதாகக் காணலாம். இந்த பயனர்களுக்கான மென்மையான ஸ்க்ரோலிங்கை முடக்க prefers-reduced-motion மீடியா வினவல் பயன்படுத்தப்படலாம்.

எடுத்துக்காட்டு 3: குறைக்கப்பட்ட இயக்கத்திற்கான பயனர் விருப்பங்களை மதித்தல்

உங்கள் இயக்க முறைமை அமைப்புகளில் குறைவான அனிமேஷனுக்கான விருப்பத்தைக் குறித்துள்ள பயனர்களுக்கு உடனடி ஸ்க்ரோலிங்கிற்கு ஒரு ஃபால்பேக்கை வழங்க prefers-reduced-motion மீடியா வினவலை நீங்கள் ஒருங்கிணைக்கலாம்:

            
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

            

              
                Copy
              
            
          

இயக்கத்திற்கு உணர்திறன் கொண்ட பயனர்கள் மென்மையான ஸ்க்ரோலிங் அம்சத்தால் எதிர்மறையாக பாதிக்கப்படாமல் இருப்பதை இது உறுதிசெய்கிறது, இது ஒரு சிந்தனைமிக்க மற்றும் உள்ளடக்கிய வடிவமைப்பு அணுகுமுறையை நிரூபிக்கிறது. அணுகல் தேவைகள் பரவலாக மாறுபடும் உலகளாவிய பார்வையாளர்களுக்கு இது மிகவும் முக்கியமானது.

செயல்திறன் தாக்கங்கள்

இயல்பான CSS scroll-behavior பண்பைப் பயன்படுத்துவதன் முக்கிய நன்மைகளில் ஒன்று அதன் சிறந்த செயல்திறன் ஆகும். உலாவிகள் இந்த அனிமேஷன்களை திறமையாக கையாள மிகவும் உகந்ததாக உள்ளன, பெரும்பாலும் வன்பொருள் முடுக்கத்தைப் பயன்படுத்துகின்றன. இது பொதுவாக பக்கத்தின் பகுதிகளை மீண்டும் ரெண்டர் செய்யக்கூடிய அல்லது தொடர்ச்சியான ஜாவாஸ்கிரிப்ட் செயல்படுத்தல் தேவைப்படும் ஜாவாஸ்கிரிப்ட் அடிப்படையிலான தீர்வுகளுடன் ஒப்பிடும்போது ஒரு மென்மையான மற்றும் அதிக செயல்திறன் மிக்க அனுபவத்தை அளிக்கிறது.

உலகளாவிய ரீதியில் உள்ள வலைத்தளங்களுக்கு, பயனர்கள் பல்வேறு நெட்வொர்க் நிலைமைகள் மற்றும் சாதனங்களில் இருக்கலாம், செயல்திறனுக்காக இயல்பான உலாவி திறன்களுக்கு முன்னுரிமை அளிப்பது எப்போதும் ஒரு புத்திசாலித்தனமான உத்தியாகும்.

பயனர் இடைமுகம் (UI) மற்றும் பயனர் அனுபவம் (UX) ஒருங்கிணைப்பு

scroll-behavior என்பது நுட்பமான UI மாற்றங்கள் எவ்வாறு குறிப்பிடத்தக்க UX மேம்பாடுகளுக்கு வழிவகுக்கும் என்பதற்கு ஒரு சிறந்த எடுத்துக்காட்டு. இது ஒரு செயல்பாட்டு வலைத்தளத்திற்கும் ஒரு மகிழ்ச்சியான வலைத்தளத்திற்கும் இடையிலான இடைவெளியைக் குறைக்கிறது.

மென்மையான ஸ்க்ரோலிங் குறிப்பாக நன்மை பயக்கும் இந்த சர்வதேச எடுத்துக்காட்டுகளைக் கவனியுங்கள்:

• இ-காமர்ஸ் தயாரிப்பு பக்கங்கள்: பல தயாரிப்பு மாறுபாடுகள் அல்லது விரிவான விவரக்குறிப்புகளைக் காண்பிக்கும் பக்கங்களில், உள் வழிசெலுத்தலுக்கான மென்மையான ஸ்க்ரோலிங் (எ.கா., "விவரங்களைக் காண்க" பொத்தானிலிருந்து ஒரு குறிப்பிட்ட பகுதிக்கு) உலாவல் அனுபவத்தை மேம்படுத்துகிறது. டோக்கியோவில் உள்ள ஒரு பயனர் பக்கத் தாவல்கள் இல்லாமல் அம்சங்களை ஒப்பிடுவதை கற்பனை செய்து பாருங்கள்.
• செய்தி தளங்கள் மற்றும் வலைப்பதிவுகள்: நீண்ட வடிவ கட்டுரைகள் அல்லது செய்தி ஊட்டங்களுக்கு, பிரிவுகளுக்கு இடையில் அல்லது "மேலும் ஏற்ற" உள்ளடக்கத்திற்கு மென்மையான ஸ்க்ரோலிங் ஒரு தொடர்ச்சியான வாசிப்பு அனுபவத்தை வழங்குகிறது, இது மும்பை அல்லது சாவோ பாலோ போன்ற பரபரப்பான நகரங்களில் பயணத்தின்போது உள்ளடக்கத்தை அணுகும் பயனர்களுக்கு மதிப்புமிக்கது.
• போர்ட்ஃபோலியோ வலைத்தளங்கள்: கலைஞர்கள் மற்றும் வடிவமைப்பாளர்கள் பெரும்பாலும் தங்கள் போர்ட்ஃபோலியோவின் வெவ்வேறு திட்டங்கள் அல்லது பிரிவுகளுக்கு இடையில் செல்ல நங்கூர இணைப்புகளைப் பயன்படுத்துகின்றனர். மென்மையான ஸ்க்ரோலிங் அவர்களின் வேலையை வழங்குவதற்கான ஒரு அதிநவீன மற்றும் நேர்த்தியான வழியை வழங்குகிறது, இது உலகெங்கிலும் உள்ள படைப்பாற்றல் நிபுணர்களை ஈர்க்கிறது.
• ஆவணப்படுத்தல் தளங்கள்: தொழில்நுட்ப ஆவணங்கள் பெரும்பாலும் விரிவானவை. அத்தியாயங்கள், API குறிப்புகள் அல்லது சரிசெய்தல் வழிகாட்டிகளுக்கு இடையில் மென்மையான ஸ்க்ரோலிங் (ஐரோப்பா அல்லது வட அமெரிக்காவில் உள்ள நிறுவனங்களின் தளங்களில் பொதுவானது) தகவல்களைப் பெறுவதை மிகவும் எளிதாக்குகிறது.

இயல்பான மென்மையான ஸ்க்ரோலிங்கை எப்போது தவிர்க்க வேண்டும்

பொதுவாக நன்மை பயக்கும் என்றாலும், நீங்கள் scroll-behavior: auto; உடன் ஒட்டிக்கொள்ள அல்லது மேலும் நுணுக்கமான கட்டுப்பாட்டிற்கு ஜாவாஸ்கிரிப்டைப் பயன்படுத்த விரும்பும் சில நிகழ்வுகள் உள்ளன:

• சிக்கலான ஸ்க்ரோல்-தூண்டப்பட்ட அனிமேஷன்கள்: உங்கள் வலைத்தளம் ஸ்க்ரோல் நிகழ்வுகளுக்கு துல்லியமாக நேரம் கணிக்கப்பட்ட சிக்கலான ஜாவாஸ்கிரிப்ட் அனிமேஷன்களை பெரிதும் நம்பியிருந்தால் (எ.கா., சரியான பிக்சல்-சரியான கட்டுப்பாடு தேவைப்படும் பாராலாக்ஸ் விளைவுகள்), scroll-behavior: smooth; இன் உள்ளார்ந்த அனிமேஷன் குறுக்கிடக்கூடும். அத்தகைய சந்தர்ப்பங்களில், ஜாவாஸ்கிரிப்ட் வழியாக மட்டுமே ஸ்க்ரோல் நடத்தையைக் கட்டுப்படுத்துவது அதிக கணிக்கக்கூடிய தன்மையை வழங்குகிறது.
• செயல்திறன்-முக்கியமான பயன்பாடுகள்: ஒவ்வொரு மில்லி விநாடியும் கணக்கிடப்படும் மற்றும் இயல்பான அனிமேஷன்களின் சுமை கூட ஒரு கவலையாக இருக்கக்கூடிய انتہائی செயல்திறன்-உணர்திறன் பயன்பாடுகளில், உடனடி ஸ்க்ரோலிங்கைத் தேர்ந்தெடுப்பது அவசியமாக இருக்கலாம். இருப்பினும், பெரும்பாலான வலை உள்ளடக்கங்களுக்கு, இயல்பான மென்மையான ஸ்க்ரோலிங்கின் செயல்திறன் நன்மைகள் இதை விட அதிகமாகும்.
• குறிப்பிட்ட பயனர் ஓட்டங்கள்: சில மிகவும் சிறப்பு வாய்ந்த பயனர் இடைமுகங்களுக்கு செயல்பாட்டு காரணங்களுக்காக உடனடி ஸ்க்ரோலிங் தேவைப்படலாம். தேர்ந்தெடுக்கப்பட்ட நடத்தை நோக்கம் கொண்ட தொடர்புடன் ஒத்துப்போவதை உறுதிப்படுத்த உங்கள் பயனர் ஓட்டங்களை எப்போதும் சோதிக்கவும்.

மேம்பட்ட நுட்பங்கள் மற்றும் மாற்று வழிகள்

இயல்பான மென்மையான ஸ்க்ரோலிங்கிற்கான முதன்மைத் தேர்வாக scroll-behavior: smooth; இருந்தாலும், மேலும் மேம்பட்ட சூழ்நிலைகளுக்கு அல்லது அதிக கட்டுப்பாடு தேவைப்படும் இடங்களுக்கு மற்ற அணுகுமுறைகளைக் குறிப்பிடுவது மதிப்பு.

ஜாவாஸ்கிரிப்ட் நூலகங்கள்

சிக்கலான அனிமேஷன்கள், தனிப்பயன் ஈஸிங் செயல்பாடுகள் அல்லது ஸ்க்ரோல் கால அளவு மற்றும் ஆஃப்செட் மீது துல்லியமான கட்டுப்பாட்டிற்கு, போன்ற ஜாவாஸ்கிரிப்ட் நூலகங்கள்:

• GSAP (GreenSock Animation Platform): குறிப்பாக அதன் ScrollTrigger செருகுநிரல், ஸ்க்ரோல்-இயக்கப்படும் அனிமேஷன்கள் மீது இணையற்ற கட்டுப்பாட்டை வழங்குகிறது.
• ScrollReveal.js: வியூபோர்ட்டுக்குள் நுழையும்போது உறுப்புகளை வெளிப்படுத்த ஒரு பிரபலமான நூலகம்.
• jQuery Easing Plugins (மரபு): புதிய திட்டங்களுக்கு குறைவாகப் பயன்படுத்தப்பட்டாலும், பழைய தளங்கள் மென்மையான ஸ்க்ரோலிங்கிற்காக ஈஸிங் செருகுநிரல்களுடன் jQuery ஐப் பயன்படுத்தலாம்.

இந்த தீர்வுகள் அதிக நெகிழ்வுத்தன்மையை வழங்குகின்றன, ஆனால் ஜாவாஸ்கிரிப்ட் செயல்படுத்தல் மற்றும் சாத்தியமான செயல்திறன் பரிசீலனைகளின் சுமையுடன் வருகின்றன, குறிப்பாக பல்வேறு சாதனங்களில் உள்ள உலகளாவிய பார்வையாளர்களுக்கு.

CSS scroll-snap

scroll-behavior-ஐ scroll-snap உடன் குழப்பிக் கொள்ளாமல் இருப்பது முக்கியம். இரண்டும் ஸ்க்ரோலிங் தொடர்பானவை என்றாலும், அவை வெவ்வேறு நோக்கங்களுக்காக சேவை செய்கின்றன:

• scroll-behavior: ஒரு இலக்குக்கு ஸ்க்ரோல் செய்வதன் *அனிமேஷனைக்* கட்டுப்படுத்துகிறது.
• scroll-snap: ஸ்க்ரோல்போர்ட் ஒரு உறுப்புக்கு "ஸ்னாப்" செய்யும் ஸ்க்ரோல் செய்யக்கூடிய கண்டெய்னர் dọcிலும் புள்ளிகளை வரையறுக்க உங்களை அனுமதிக்கிறது. ஒவ்வொரு "பக்கமும்" பார்வைக்கு வரும் கரோசல்கள் அல்லது பக்கப்படுத்தப்பட்ட உள்ளடக்கத்தை உருவாக்க இது சிறந்தது.

நீங்கள் இந்த பண்புகளை இணைக்கலாம். உதாரணமாக, நீங்கள் scroll-snap-type வரையறுக்கப்பட்ட ஒரு ஸ்க்ரோல் செய்யக்கூடிய கண்டெய்னரைக் கொண்டிருக்கலாம், மேலும் ஒரு பயனர் கைமுறையாக ஸ்க்ரோல் செய்யும்போது, அது ஸ்னாப் செய்யும். ஒரு நங்கூர இணைப்பு அந்த கண்டெய்னருக்குள் ஒரு ஸ்க்ரோலைத் தூண்டினால், scroll-behavior: smooth; ஸ்னாப் செயல்முறையை அனிமேட் செய்யும்.

எடுத்துக்காட்டு 4: Scroll Behavior மற்றும் Scroll Snap-ஐ இணைத்தல்

            
.snap-container {
  height: 400px;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

.snap-item {
  height: 100%;
  scroll-snap-align: start;
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், கைமுறையாக ஸ்க்ரோல் செய்வது ஒவ்வொரு .snap-item-இன் தொடக்கத்திற்கும் ஸ்னாப் செய்யும், மேலும் ஒரு நங்கூர இணைப்பு உள்ளே ஒரு உருப்படியை இலக்காகக் கொண்டால், தொடக்கத்திற்கு ஸ்னாப் செய்யும் செயல் மென்மையாக அனிமேட் செய்யப்படும்.

முடிவுரை

CSS scroll-behavior பண்பு என்பது வலைப்பக்கங்கள் மற்றும் ஸ்க்ரோல் செய்யக்கூடிய கண்டெய்னர்களுக்கு மென்மையான ஸ்க்ரோலிங்கை அறிமுகப்படுத்துவதன் மூலம் பயனர் அனுபவத்தை மேம்படுத்துவதற்கான ஒரு சக்திவாய்ந்த, இயல்பான கருவியாகும். அதன் எளிமை, பரவலான உலாவி ஆதரவு மற்றும் செயல்திறன் நன்மைகள் நவீன வலை டெவலப்பரின் கருவிப்பெட்டியில் ஒரு இன்றியமையாத சொத்தாக ஆக்குகின்றன.

scroll-behavior: smooth;-ஐ சிந்தனையுடன் பயன்படுத்துவதன் மூலமும், prefers-reduced-motion மீடியா வினவல் மூலம் பயனர் விருப்பங்களை மதிப்பதன் மூலமும், உலகளாவிய பார்வையாளர்களுடன் எதிரொலிக்கும் மேலும் ஈடுபாடும், அணுகக்கூடிய மற்றும் மெருகூட்டப்பட்ட இடைமுகங்களை நீங்கள் உருவாக்கலாம். நீங்கள் ஒரு சர்வதேச இ-காமர்ஸ் தளம், உள்ளடக்க வளம் நிறைந்த செய்தி தளம் அல்லது ஒரு நேர்த்தியான போர்ட்ஃபோலியோவை உருவாக்கினாலும், இயல்பான மென்மையான ஸ்க்ரோலிங் என்பது அனைவருக்கும் ஒரு சிறந்த வலைக்கான ஒரு சிறிய ஆனால் குறிப்பிடத்தக்க படியாகும்.

மென்மையை ஏற்றுக்கொள்ளுங்கள், உங்கள் பயனர்களை மகிழ்விக்கவும், மேலும் CSS-இன் எப்போதும் உருவாகி வரும் திறன்களை ஆராய்வதைத் தொடரவும்!