டைனமிக் இணையதளங்களில் CSS ஸ்க்ரோல் ஆங்கரிங் எவ்வாறு உள்ளடக்கத் தாவல்களைத் தடுக்கிறது மற்றும் பயனர் அனுபவத்தை மேம்படுத்துகிறது என்பதை அறிக. தடையற்ற வழிசெலுத்தலுக்கான சிறந்த நடைமுறைகள் மற்றும் நடைமுறை எடுத்துக்காட்டுகளை ஆராயுங்கள்.
CSS ஸ்க்ரோல் ஆங்கரிங்: மென்மையான பயனர் அனுபவத்திற்காக உள்ளடக்கத் தாவல்களைத் தடுத்தல்
நீங்கள் எப்போதாவது ஆன்லைனில் ஒரு கட்டுரை படிக்கும்போது, திடீரென்று பக்கம் தாவி, உங்கள் இடத்தைத் தவறவிட்டு, மீண்டும் கீழே ஸ்க்ரோல் செய்ய வேண்டிய கட்டாயம் ஏற்பட்டுள்ளதா? "உள்ளடக்கத் தாவல்" என்று அழைக்கப்படும் இந்த எரிச்சலூட்டும் அனுபவம், தற்போதைய பார்வைக்கு மேலே டைனமிக் உள்ளடக்கம் ஏற்றப்படும்போது ஏற்படுகிறது, இது ஏற்கனவே உள்ள உள்ளடக்கத்தை கீழ்நோக்கித் தள்ளுகிறது. CSS ஸ்க்ரோல் ஆங்கரிங் இந்த சிக்கலை எதிர்த்துப் போராட ஒரு சக்திவாய்ந்த கருவியாகும், உள்ளடக்கம் மாறும்போது கூட பயனரின் ஸ்க்ரோல் நிலையை பராமரிப்பதன் மூலம் பயனர் அனுபவத்தை கணிசமாக மேம்படுத்துகிறது.
உள்ளடக்கத் தாவல்கள் மற்றும் அவற்றின் தாக்கத்தைப் புரிந்துகொள்ளுதல்
உள்ளடக்கத் தாவல்கள் பொதுவாக படங்கள், விளம்பரங்கள் அல்லது டைனமிக் ஆக உருவாக்கப்படும் உள்ளடக்கம் போன்ற வளங்களை ஒத்திசைவில்லாமல் ஏற்றுவதால் ஏற்படுகின்றன. இந்த கூறுகள் ஒரு வலைத்தளத்தின் செயல்பாடு மற்றும் காட்சி முறையீட்டை மேம்படுத்தினாலும், அவற்றின் தாமதமான ஏற்றுதல் பயனரின் வாசிப்பு ஓட்டத்தை சீர்குலைக்கக்கூடும். லேஅவுட்டில் ஏற்படும் திடீர் மாற்றம் வெறுமனே அதிர்ச்சியளிப்பது மட்டுமல்லாமல், ஈடுபாட்டைக் குறைத்து, பயனர்களை உங்கள் வலைத்தளத்திலிருந்து வெளியேற்றக்கூடும்.
உட்பொதிக்கப்பட்ட விளம்பரங்களுடன் ஒரு செய்தி கட்டுரையை நீங்கள் படிப்பதாக கற்பனை செய்து பாருங்கள். நீங்கள் கீழே ஸ்க்ரோல் செய்யும்போது, உங்கள் தற்போதைய நிலைக்கு மேலே ஒரு விளம்பரம் ஏற்றப்பட்டு, நீங்கள் படித்துக்கொண்டிருந்த உரையை பக்கத்தின் கீழே தள்ளுகிறது. நீங்கள் நிறுத்த வேண்டும், உங்களை மீண்டும் நிலைநிறுத்திக் கொள்ள வேண்டும், உங்கள் இடத்தை மீண்டும் கண்டுபிடிக்க வேண்டும். இந்த குறுக்கீடு வாசிப்பு அனுபவத்திலிருந்து திசை திருப்புகிறது மற்றும் குறிப்பாக சிறிய திரைகளைக் கொண்ட மொபைல் சாதனங்களில் நம்பமுடியாத அளவிற்கு எரிச்சலூட்டும்.
இது ஏன் ஒரு சிக்கல்?
- மோசமான பயனர் அனுபவம்: விரக்தி மற்றும் திசைதிருப்பல் வலைத்தளத்தைப் பற்றிய எதிர்மறையான கருத்துக்கு வழிவகுக்கிறது.
- குறைந்த ஈடுபாடு: பயனர்கள் தங்கள் அனுபவம் தொடர்ந்து சீர்குலைந்தால் ஒரு வலைத்தளத்தை விட்டு வெளியேற அதிக வாய்ப்புள்ளது.
- அணுகல்தன்மை சிக்கல்கள்: உள்ளடக்கத் தாவல்கள், ஸ்கிரீன் ரீடர்களைப் பயன்படுத்துபவர்கள் அல்லது நிலையான காட்சி அமைப்பை நம்பியிருப்பவர்கள் போன்ற மாற்றுத்திறனாளிகளுக்கு குறிப்பாக சிக்கலாக இருக்கலாம்.
- சாத்தியமான SEO தாக்கம்: மறைமுகமாக இருந்தாலும், மோசமான பயனர் அனுபவம் குறைந்த ஈடுபாட்டு அளவீடுகளுக்கு பங்களிக்கும், இது காலப்போக்கில் தேடுபொறி தரவரிசைகளை பாதிக்கலாம்.
CSS ஸ்க்ரோல் ஆங்கரிங் அறிமுகம்
CSS ஸ்க்ரோல் ஆங்கரிங் என்பது உள்ளடக்கம் டைனமிக் ஆக மாறும்போது ஸ்க்ரோல் நிலையை தானாக சரிசெய்ய வடிவமைக்கப்பட்ட ஒரு பிரவுசர் அம்சமாகும். இது அடிப்படையில் பயனரின் தற்போதைய ஸ்க்ரோல் நிலையை பக்கத்தில் உள்ள ஒரு குறிப்பிட்ட உறுப்புடன் "நங்கூரமிடுகிறது", மேலே உள்ளடக்கம் செருகப்பட்டாலும் அல்லது அகற்றப்பட்டாலும் பார்வை அந்த உறுப்பில் கவனம் செலுத்துவதை உறுதி செய்கிறது. இது டைனமிக் வலைத்தளங்களை பாதிக்கக்கூடிய அதிர்ச்சியூட்டும் தாவல்கள் மற்றும் மாற்றங்களைத் தடுக்கிறது.
ஸ்க்ரோல் ஆங்கரிங்கின் பின்னணியில் உள்ள முக்கிய வழிமுறை வியக்கத்தக்க வகையில் எளிமையானது. இயக்கப்பட்டதும், பிரவுசர் லேஅவுட் மாற்றங்களுக்காக ஆவணத்தைக் கண்காணிக்கிறது. சாதாரணமாக ஸ்க்ரோல் நிலையை மாற்றக்கூடிய ஒரு மாற்றத்தைக் கண்டறிந்தால், அது தானாகவே ஸ்க்ரோல் ஆஃப்செட்டை சரிசெய்து, பயனரின் பார்வையை அதே உள்ளடக்கத்தில் மையமாக வைத்திருக்கிறது.
CSS ஸ்க்ரோல் ஆங்கரிங்கை எவ்வாறு செயல்படுத்துவது
ஸ்க்ரோல் ஆங்கரிங்கைக் கட்டுப்படுத்தும் முதன்மை CSS ப்ராப்பர்டி overflow-anchor ஆகும். இந்த ப்ராப்பர்டியை <body> உறுப்பு உட்பட எந்தவொரு ஸ்க்ரோல் செய்யக்கூடிய உறுப்புக்கும் பயன்படுத்தலாம். அதை நீங்கள் எவ்வாறு பயன்படுத்தலாம் என்பது இங்கே:
முழுப் பக்கத்திற்கும் ஸ்க்ரோல் ஆங்கரிங்கை இயக்குதல்
முழு வலைப்பக்கத்திற்கும் ஸ்க்ரோல் ஆங்கரிங்கை இயக்க, நீங்கள் overflow-anchor ப்ராப்பர்டியை <body> உறுப்புக்கு பயன்படுத்தலாம்:
body {
overflow-anchor: auto;
}
இது ஸ்க்ரோல் ஆங்கரிங்கை செயல்படுத்துவதற்கான எளிமையான மற்றும் பெரும்பாலும் மிகவும் பயனுள்ள வழியாகும். auto மதிப்பு, முழு ஆவணத்திற்கும் ஸ்க்ரோல் ஆங்கரிங்கை தானாக நிர்வகிக்க பிரவுசருக்குச் சொல்கிறது.
குறிப்பிட்ட கூறுகளுக்கு ஸ்க்ரோல் ஆங்கரிங்கை முடக்குதல்
சில சமயங்களில், உங்கள் பக்கத்தில் உள்ள குறிப்பிட்ட கூறுகளுக்கு ஸ்க்ரோல் ஆங்கரிங்கை முடக்க விரும்பலாம். எடுத்துக்காட்டாக, ஸ்க்ரோல் ஆங்கரிங்குடன் பொருந்தாத ஒரு குறிப்பிட்ட ஸ்க்ரோல் நடத்தையை நம்பியிருக்கும் ஒரு கூறு உங்களிடம் இருக்கலாம். ஒரு குறிப்பிட்ட உறுப்புக்கு ஸ்க்ரோல் ஆங்கரிங்கை முடக்க, overflow-anchor ப்ராப்பர்டியை none என அமைக்கவும்:
.no-scroll-anchor {
overflow-anchor: none;
}
பின்னர், நீங்கள் ஸ்க்ரோல் ஆங்கரிங்கிலிருந்து விலக்க விரும்பும் உறுப்புக்கு .no-scroll-anchor வகுப்பைப் பயன்படுத்தவும்.
நடைமுறை எடுத்துக்காட்டுகள் மற்றும் பயன்பாட்டு வழக்குகள்
பல்வேறு வகையான வலைத்தளங்களில் பயனர் அனுபவத்தை மேம்படுத்த ஸ்க்ரோல் ஆங்கரிங்கை எவ்வாறு பயன்படுத்தலாம் என்பதற்கான சில நடைமுறை எடுத்துக்காட்டுகளை ஆராய்வோம்:
1. வலைப்பதிவுகள் மற்றும் செய்தி கட்டுரைகள்
முன்னர் குறிப்பிட்டபடி, வலைப்பதிவுகள் மற்றும் செய்தி கட்டுரைகள் ஸ்க்ரோல் ஆங்கரிங்கிற்கான முதன்மை வேட்பாளர்கள். ஸ்க்ரோல் ஆங்கரிங்கை இயக்குவதன் மூலம், படங்கள் அல்லது விளம்பரங்கள் ஒத்திசைவில்லாமல் ஏற்றப்படும்போது ஏற்படும் எரிச்சலூட்டும் உள்ளடக்கத் தாவல்களைத் தடுக்கலாம். இது உங்கள் பயனர்களுக்கு மென்மையான மற்றும் சுவாரஸ்யமான வாசிப்பு அனுபவத்தை உறுதி செய்கிறது.
எடுத்துக்காட்டு: உட்பொதிக்கப்பட்ட படங்களுடன் ஒரு வலைப்பதிவு இடுகையைக் கவனியுங்கள். ஸ்க்ரோல் ஆங்கரிங் இல்லாமல், படங்கள் ஏற்றப்படும்போது உரை தாவி, வாசகரின் ஓட்டத்தை சீர்குலைக்கும். ஸ்க்ரோல் ஆங்கரிங் இயக்கப்பட்ட நிலையில், பிரவுசர் தானாகவே ஸ்க்ரோல் நிலையை சரிசெய்து, உரையை நிலையாக வைத்து, தாவலைத் தடுக்கும்.
2. சமூக ஊடக ஊட்டங்கள்
சமூக ஊடக ஊட்டங்கள் பயனர் கீழே ஸ்க்ரோல் செய்யும்போது புதிய உள்ளடக்கத்தை டைனமிக் ஆக ஏற்றுகின்றன. ஸ்க்ரோல் ஆங்கரிங் இல்லாமல், இது உள்ளடக்கத் தாவல்கள் மற்றும் எரிச்சலூட்டும் பயனர் அனுபவத்திற்கு வழிவகுக்கும். ஸ்க்ரோல் ஆங்கரிங்கை இயக்குவதன் மூலம், புதிய இடுகைகள் ஏற்றப்படும்போது பயனரின் ஸ்க்ரோல் நிலை பராமரிக்கப்படுவதை உறுதிசெய்யலாம், இது தடையற்ற மற்றும் குறுக்கீடு இல்லாத உலாவல் அனுபவத்தை உருவாக்குகிறது.
எடுத்துக்காட்டு: உங்கள் சமூக ஊடக ஊட்டத்தில் நீங்கள் ஸ்க்ரோல் செய்வதாக கற்பனை செய்து பாருங்கள். நீங்கள் பக்கத்தின் அடிப்பகுதியை அடையும்போது, புதிய இடுகைகள் தானாகவே ஏற்றப்படுகின்றன. ஸ்க்ரோல் ஆங்கரிங் இல்லாமல், இந்த புதிய இடுகைகள் நீங்கள் இப்போது பார்த்துக் கொண்டிருந்த உள்ளடக்கத்தை பக்கத்தின் கீழே தள்ளக்கூடும். ஸ்க்ரோல் ஆங்கரிங்குடன், பிரவுசர் நீங்கள் பார்த்துக் கொண்டிருந்த உள்ளடக்கத்தை பார்வையில் வைத்திருக்க ஸ்க்ரோல் நிலையை சரிசெய்யும்.
3. ஈ-காமர்ஸ் தயாரிப்பு பட்டியல்கள்
ஈ-காமர்ஸ் வலைத்தளங்கள் பெரும்பாலும் தயாரிப்பு பட்டியல்களைக் காண்பிக்க டைனமிக் வடிகட்டுதல் மற்றும் வரிசைப்படுத்துதலைப் பயன்படுத்துகின்றன. வடிப்பான்கள் பயன்படுத்தப்படும்போது அல்லது வரிசை வரிசை மாற்றப்படும்போது, பக்கத்தில் உள்ள உள்ளடக்கம் டைனமிக் ஆக புதுப்பிக்கப்படுகிறது. ஸ்க்ரோல் ஆங்கரிங் இல்லாமல், இது உள்ளடக்கத் தாவல்கள் மற்றும் குழப்பமான பயனர் அனுபவத்திற்கு வழிவகுக்கும். ஸ்க்ரோல் ஆங்கரிங்கை இயக்குவதன் மூலம், தயாரிப்பு பட்டியல்கள் புதுப்பிக்கப்படும்போது பயனரின் ஸ்க்ரோல் நிலை பராமரிக்கப்படுவதை உறுதிசெய்யலாம், இது அவர்கள் தேடும் தயாரிப்புகளை உலாவவும் கண்டறியவும் எளிதாக்குகிறது.
எடுத்துக்காட்டு: நீங்கள் ஒரு ஆன்லைன் ஸ்டோரை உலாவுகிறீர்கள் மற்றும் ஒரு குறிப்பிட்ட தயாரிப்புக்கான உங்கள் தேடலைச் சுருக்க வடிப்பான்களைப் பயன்படுத்துகிறீர்கள் என்று வைத்துக்கொள்வோம். ஒவ்வொரு முறையும் நீங்கள் ஒரு வடிப்பானைப் பயன்படுத்தும்போது, தயாரிப்பு பட்டியல்கள் புதுப்பிக்கப்படுகின்றன. ஸ்க்ரோல் ஆங்கரிங் இல்லாமல், பக்கம் மீண்டும் மேலே தாவக்கூடும், உங்களை மீண்டும் கீழே ஸ்க்ரோல் செய்ய கட்டாயப்படுத்துகிறது. ஸ்க்ரோல் ஆங்கரிங்குடன், பக்கம் தோராயமாக அதே நிலையில் இருக்கும், இது குறுக்கீடு இல்லாமல் தொடர்ந்து உலாவ உங்களை அனுமதிக்கிறது.
4. ஒற்றைப் பக்க பயன்பாடுகள் (SPAs)
ஒற்றைப் பக்க பயன்பாடுகள் (SPAs) டைனமிக் உள்ளடக்க ஏற்றத்தை பெரிதும் நம்பியுள்ளன. பயனர்கள் பயன்பாட்டின் மூலம் செல்லும்போது, புதிய உள்ளடக்கம் ஒத்திசைவில்லாமல் ஏற்றப்படுகிறது, இது பெரும்பாலும் இருக்கும் உள்ளடக்கத்தை மாற்றுகிறது. ஸ்க்ரோல் ஆங்கரிங் இல்லாமல், இது அடிக்கடி உள்ளடக்கத் தாவல்கள் மற்றும் அதிர்ச்சியூட்டும் பயனர் அனுபவத்திற்கு வழிவகுக்கும். ஸ்க்ரோல் ஆங்கரிங்கை இயக்குவதன் மூலம், உள்ளடக்கம் மாறும்போது பயனரின் ஸ்க்ரோல் நிலை பராமரிக்கப்படுவதை உறுதிசெய்யலாம், இது மென்மையான மற்றும் பதிலளிக்கக்கூடிய பயன்பாட்டை உருவாக்குகிறது.
எடுத்துக்காட்டு: பயனர் வழிசெலுத்தல் இணைப்புகளைக் கிளிக் செய்யும்போது டைனமிக் ஆக ஏற்றப்படும் பல பிரிவுகளைக் கொண்ட ஒரு SPA-ஐக் கவனியுங்கள். ஸ்க்ரோல் ஆங்கரிங் இல்லாமல், ஒவ்வொரு முறையும் ஒரு புதிய பிரிவு ஏற்றப்படும்போது, பக்கம் மீண்டும் மேலே தாவக்கூடும். ஸ்க்ரோல் ஆங்கரிங்குடன், பக்கம் தற்போதைய பிரிவில் பயனரின் ஸ்க்ரோல் நிலையை பராமரிக்கும், இது பிரிவுகளுக்கு இடையில் தடையற்ற மாற்றத்தை உருவாக்குகிறது.
CSS ஸ்க்ரோல் ஆங்கரிங்கைப் பயன்படுத்துவதற்கான சிறந்த நடைமுறைகள்
CSS ஸ்க்ரோல் ஆங்கரிங் ஒரு சக்திவாய்ந்த கருவியாக இருந்தாலும், எதிர்பாராத விளைவுகளைத் தவிர்க்க அதை திறம்பட பயன்படுத்துவது முக்கியம். மனதில் கொள்ள வேண்டிய சில சிறந்த நடைமுறைகள் இங்கே:
- அதை புத்திசாலித்தனமாகப் பயன்படுத்துங்கள்: முழுப் பக்கத்திற்கும் ஸ்க்ரோல் ஆங்கரிங்கை இயக்குவது பெரும்பாலும் ஒரு நல்ல தொடக்கப் புள்ளியாக இருந்தாலும், எதிர்மறையாக பாதிக்கப்படக்கூடிய குறிப்பிட்ட கூறுகளுக்கு அதை முடக்குவதைக் கவனியுங்கள்.
- முழுமையாக சோதிக்கவும்: ஸ்க்ரோல் ஆங்கரிங்கை செயல்படுத்திய பிறகு எப்போதும் உங்கள் வலைத்தளம் அல்லது பயன்பாட்டை முழுமையாக சோதிக்கவும், அது எதிர்பார்த்தபடி செயல்படுகிறதா மற்றும் அது எந்த எதிர்பாராத நடத்தையையும் ஏற்படுத்தவில்லை என்பதை உறுதிப்படுத்தவும்.
- செயல்திறனைக் கவனியுங்கள்: ஸ்க்ரோல் ஆங்கரிங்கின் செயல்திறன் தாக்கம் பொதுவாக குறைவாக இருந்தாலும், இது பிரவுசரின் லேஅவுட் கணக்கீடுகளுக்கு ஒரு சிறிய கூடுதல் சுமையைச் சேர்க்கிறது என்பதை அறிந்திருப்பது முக்கியம். நீங்கள் மிகவும் மேம்படுத்தப்பட்ட பயன்பாட்டில் பணிபுரிகிறீர்கள் என்றால், ஸ்க்ரோல் ஆங்கரிங் எந்த செயல்திறன் தடைகளையும் ஏற்படுத்தவில்லை என்பதை உறுதிப்படுத்த உங்கள் குறியீட்டை சுயவிவரப்படுத்த விரும்பலாம்.
- விளிம்பு வழக்குகளைக் கையாளுங்கள்: ஸ்க்ரோல் ஆங்கரிங் எதிர்பார்த்தபடி வேலை செய்யாத சாத்தியமான விளிம்பு வழக்குகளைப் பற்றி எச்சரிக்கையாக இருங்கள். எடுத்துக்காட்டாக, உள்ளடக்க மாற்றங்கள் மிக வேகமாக இருந்தால் அல்லது லேஅவுட் மிகவும் சிக்கலானதாக இருந்தால், பிரவுசர் ஸ்க்ரோல் நிலையை துல்லியமாக சரிசெய்ய முடியாமல் போகலாம்.
- பிற நுட்பங்களுடன் இணைக்கவும்: பயனர் அனுபவத்தை மேம்படுத்துவதற்கான உங்கள் ஆயுதக் களஞ்சியத்தில் ஸ்க்ரோல் ஆங்கரிங் ஒரு கருவி மட்டுமே. உண்மையிலேயே தடையற்ற மற்றும் சுவாரஸ்யமான உலாவல் அனுபவத்தை உருவாக்க, சோம்பேறித்தனமாக படங்களை ஏற்றுவது மற்றும் உள்ளடக்க விநியோகத்தை மேம்படுத்துவது போன்ற பிற நுட்பங்களுடன் இதை இணைப்பதைக் கவனியுங்கள்.
பிரவுசர் இணக்கத்தன்மை
CSS ஸ்க்ரோல் ஆங்கரிங் நவீன பிரவுசர்களால் பரவலாக ஆதரிக்கப்படுகிறது. இருப்பினும், உங்கள் பயனர்கள் பயன்படுத்த வாய்ப்புள்ள பிரவுசர்களால் இது ஆதரிக்கப்படுகிறதா என்பதை உறுதிப்படுத்த Can I use இல் உள்ள இணக்கத்தன்மை அட்டவணையைச் சரிபார்ப்பது எப்போதும் ஒரு நல்ல யோசனையாகும்.
அக்டோபர் 2024 நிலவரப்படி, ஸ்க்ரோல் ஆங்கரிங் இவற்றால் ஆதரிக்கப்படுகிறது:
- Chrome (பதிப்பு 64 மற்றும் அதற்கு மேல்)
- Firefox (பதிப்பு 68 மற்றும் அதற்கு மேல்)
- Safari (பதிப்பு 14.1 மற்றும் அதற்கு மேல்)
- Edge (பதிப்பு 79 மற்றும் அதற்கு மேல்)
- Opera (பதிப்பு 51 மற்றும் அதற்கு மேல்)
ஸ்க்ரோல் ஆங்கரிங்கை ஆதரிக்காத பழைய பிரவுசர்களுக்கு, நடத்தை வெறுமனே இல்லாமல் இருக்கும் - உள்ளடக்கத் தாவல்கள் இன்னும் ஏற்படும். இந்த சந்தர்ப்பங்களில், இதே போன்ற செயல்பாட்டை வழங்க ஜாவாஸ்கிரிப்ட் அடிப்படையிலான பாலிஃபில்களைப் பயன்படுத்த நீங்கள் பரிசீலிக்கலாம். இருப்பினும், இந்த பாலிஃபில்கள் நேட்டிவ் பிரவுசர் செயலாக்கத்தை விட மிகவும் சிக்கலானதாகவும், செயல்திறன் குறைவாகவும் இருக்கலாம் என்பதை அறிந்து கொள்ளுங்கள்.
மாற்று வழிகள் மற்றும் ஃபால்பேக்குகள்
CSS ஸ்க்ரோல் ஆங்கரிங் உள்ளடக்கத் தாவல்களைத் தடுப்பதற்கான விருப்பமான தீர்வாக இருந்தாலும், நீங்கள் பயன்படுத்தக்கூடிய மாற்று அணுகுமுறைகள் உள்ளன, குறிப்பாக பழைய பிரவுசர்களுக்கு அல்லது ஸ்க்ரோல் ஆங்கரிங் போதுமானதாக இல்லாத சூழ்நிலைகளில்.
ஜாவாஸ்கிரிப்ட் அடிப்படையிலான தீர்வுகள்
உள்ளடக்கம் மாறும்போது ஸ்க்ரோல் நிலையை கைமுறையாக சரிசெய்ய நீங்கள் ஜாவாஸ்கிரிப்டைப் பயன்படுத்தலாம். இந்த அணுகுமுறைக்கு அதிக குறியீடு தேவைப்படுகிறது மற்றும் CSS ஸ்க்ரோல் ஆங்கரிங்கைப் பயன்படுத்துவதை விட மிகவும் சிக்கலானதாக இருக்கலாம், ஆனால் இது ஸ்க்ரோல் நடத்தையின் மீது அதிக கட்டுப்பாட்டை வழங்குகிறது. இங்கே ஒரு அடிப்படை எடுத்துக்காட்டு:
// தற்போதைய ஸ்க்ரோல் நிலையைப் பெறுங்கள்
const scrollPosition = window.pageYOffset;
// புதிய உள்ளடக்கத்தை ஏற்றவும்
// ...
// ஸ்க்ரோல் நிலையை மீட்டெடுக்கவும்
window.scrollTo(0, scrollPosition);
இந்த குறியீடு துணுக்கு புதிய உள்ளடக்கத்தை ஏற்றுவதற்கு முன்பு தற்போதைய ஸ்க்ரோல் நிலையைப் பிடிக்கிறது, பின்னர் உள்ளடக்கம் ஏற்றப்பட்ட பிறகு அதை மீட்டெடுக்கிறது. இது பக்கம் மீண்டும் மேலே தாவுவதைத் தடுக்கிறது.
இடம்தாரணி கூறுகள்
டைனமிக் ஆக ஏற்றப்படும் உள்ளடக்கத்திற்காக இடத்தை ஒதுக்க இடம்தாரணி கூறுகளைப் பயன்படுத்துவது மற்றொரு அணுகுமுறை. இது புதிய உள்ளடக்கம் செருகப்படும்போது இருக்கும் உள்ளடக்கம் மாறுவதைத் தடுக்கிறது. எடுத்துக்காட்டாக, பின்னர் ஏற்றப்படும் ஒரு படத்திற்காக இடத்தை ஒதுக்க ஒரு நிலையான உயரம் மற்றும் அகலத்துடன் ஒரு <div> உறுப்பைப் பயன்படுத்தலாம்.
<div style="width: 300px; height: 200px;">
<img src="placeholder.gif" data-src="actual-image.jpg" alt="Image">
</div>
இந்த எடுத்துக்காட்டில், <div> உறுப்பு படத்திற்காக இடத்தை ஒதுக்குகிறது, இது படம் ஏற்றப்படும்போது அதன் கீழே உள்ள உள்ளடக்கம் மாறுவதைத் தடுக்கிறது. இடம்தாரணி படத்தை உண்மையான படத்துடன் அது ஏற்றப்பட்டவுடன் மாற்ற ஜாவாஸ்கிரிப்டைப் பயன்படுத்தலாம்.
ஸ்க்ரோல் ஆங்கரிங் மற்றும் லேஅவுட் நிலைத்தன்மையின் எதிர்காலம்
CSS ஸ்க்ரோல் ஆங்கரிங் வலையில் லேஅவுட் நிலைத்தன்மையை மேம்படுத்துவதற்கான ஒரு பரந்த முயற்சியின் ஒரு பகுதியாகும். கூகிளின் கோர் வெப் வைட்டல்ஸின் ஒரு முக்கிய அங்கமான குமுலேட்டிவ் லேஅவுட் ஷிப்ட் (CLS) மெட்ரிக், ஒரு பக்கத்தில் ஏற்படும் எதிர்பாராத லேஅவுட் மாற்றங்களின் அளவை அளவிடுகிறது. ஒரு நல்ல பயனர் அனுபவத்தை வழங்குவதற்கும் தேடுபொறி தரவரிசைகளை மேம்படுத்துவதற்கும் குறைந்த CLS மதிப்பெண் அவசியம்.
CSS ஸ்க்ரோல் ஆங்கரிங் மற்றும் பிற நுட்பங்களைப் பயன்படுத்தி உள்ளடக்கத் தாவல்களைத் தடுப்பதன் மூலம், உங்கள் வலைத்தளத்தின் CLS மதிப்பெண்ணை கணிசமாகக் குறைத்து அதன் ஒட்டுமொத்த பயனர் அனுபவத்தை மேம்படுத்தலாம். பிரவுசர்கள் தொடர்ந்து உருவாகி, லேஅவுட் நிலைத்தன்மைக்கான புதிய அம்சங்களை செயல்படுத்தும்போது, சமீபத்திய சிறந்த நடைமுறைகள் மற்றும் நுட்பங்களைப் பற்றி புதுப்பித்த நிலையில் இருப்பது முக்கியம்.
முடிவுரை
CSS ஸ்க்ரோல் ஆங்கரிங் உள்ளடக்கத் தாவல்களைத் தடுப்பதற்கும், டைனமிக் வலைத்தளங்களில் மென்மையான பயனர் அனுபவத்தை உருவாக்குவதற்கும் ஒரு மதிப்புமிக்க கருவியாகும். ஸ்க்ரோல் ஆங்கரிங்கை இயக்குவதன் மூலம், உங்கள் பயனர்கள் அதிர்ச்சியூட்டும் லேஅவுட் மாற்றங்களால் குறுக்கிடப்படாமல் உங்கள் வலைத்தளத்தை உலாவவும் தொடர்பு கொள்ளவும் முடியும் என்பதை உறுதிசெய்யலாம். இது பயனர் திருப்தியை மேம்படுத்துவதோடு மட்டுமல்லாமல், அதிகரித்த ஈடுபாடு மற்றும் சாத்தியமான சிறந்த தேடுபொறி தரவரிசைகளுக்கும் வழிவகுக்கும்.
நீங்கள் ஒரு வலைப்பதிவு, ஒரு சமூக ஊடக தளம், ஒரு ஈ-காமர்ஸ் வலைத்தளம் அல்லது ஒரு ஒற்றைப் பக்க பயன்பாட்டை உருவாக்குகிறீர்களா என்பதைப் பொருட்படுத்தாமல், பயனர் அனுபவத்தை மேம்படுத்தவும், மேலும் மெருகூட்டப்பட்ட மற்றும் தொழில்முறை வலைத்தளத்தை உருவாக்கவும் CSS ஸ்க்ரோல் ஆங்கரிங்கை செயல்படுத்துவதைக் கவனியுங்கள். உங்கள் செயலாக்கத்தை முழுமையாக சோதிக்கவும், சிறந்த முடிவுகளை அடைய மற்ற நுட்பங்களுடன் அதை இணைக்கவும் நினைவில் கொள்ளுங்கள். CSS ஸ்க்ரோல் ஆங்கரிங்கின் சக்தியைத் தழுவி, எரிச்சலூட்டும் உள்ளடக்கத் தாவல்களுக்கு விடைபெறுங்கள்!