ஆங்கர் நேவிகேஷனில் தேர்ச்சி பெறுதல்: CSS ஸ்க்ரோல் மார்ஜின்களின் ஆழமான பார்வை

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

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

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

பழமையான சிக்கல்: மறைக்கப்பட்ட ஆங்கர் இலக்கு

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

வழக்கமான சூழ்நிலை இதோ:

1. கட்டமைப்பு: உங்களிடம் தனித்துவமான பிரிவுகளுடன் நீண்ட ஸ்க்ரோலிங் பக்கம் உள்ளது. ஒவ்வொரு முக்கியப் பகுதிக்கும் `

   எங்களைப் பற்றி

   ` போன்ற ஒரு தனித்துவமான `id` பண்புடன் ஒரு தலைப்பு உள்ளது.
2. நேவிகேஷன்: பக்கத்தின் மேலே, உங்களிடம் ஒரு நேவிகேஷன் மெனு உள்ளது. இது உள்ளடக்க அட்டவணையாகவோ அல்லது முக்கிய தள நேவிகேஷனாகவோ இருக்கலாம். இது `எங்கள் நிறுவனத்தைப் பற்றி அறிக` போன்ற அந்தப் பகுதி ஐடிகளுக்கு சுட்டிக்காட்டும் ஆங்கர் இணைப்புகளைக் கொண்டுள்ளது.
3. ஸ்டிக்கி எலிமென்ட்: உங்களிடம் `position: sticky; top: 0;` அல்லது `position: fixed; top: 0;` உடன் ஸ்டைல் செய்யப்பட்ட ஒரு ஹெடர் எலிமென்ட் உள்ளது. இந்த எலிமென்ட், எடுத்துக்காட்டாக, 80 பிக்சல்கள் என ஒரு குறிப்பிட்ட உயரத்தைக் கொண்டுள்ளது.
4. செயல்பாடு: ஒரு பயனர் "எங்கள் நிறுவனத்தைப் பற்றி அறிக" இணைப்பைக் கிளிக் செய்கிறார்.
5. உலாவியின் நடத்தை: உலாவியின் இயல்புநிலை நடத்தை, இலக்கு எலிமென்ட்டின் (அதாவது `id="about-us"` உடன் உள்ள `

   `) மேல் விளிம்பு வியூபோர்ட்டின் மேல் விளிம்புடன் சரியாகப் பொருந்தும் வகையில் பக்கத்தை ஸ்க்ரோல் செய்வதாகும்.

6. முரண்பாடு: உங்கள் 80-பிக்சல் உயரமுள்ள ஸ்டிக்கி ஹெடர் வியூபோர்ட்டின் மேற்பகுதியை ஆக்கிரமித்திருப்பதால், அது இப்போது உலாவி பார்வைக்கு கொண்டு வந்த `

   ` எலிமென்ட்டை மறைக்கிறது. பயனர் தலைப்புக்கு *கீழே* உள்ள உள்ளடக்கத்தைக் காண்கிறார், ஆனால் தலைப்பையே காணவில்லை.

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

பழைய ஹேக்குகள்: நினைவுகளின் பயணம்

`scroll-margin`-ன் நேர்த்தியை உண்மையிலேயே பாராட்ட, இந்தப் சிக்கலைத் தீர்க்க நாம் பயன்படுத்திய 'பழைய வழிகளை'ப் புரிந்துகொள்வது உதவியாக இருக்கும். இந்த முறைகள் இன்னும் இணையத்தில் எண்ணற்ற கோட்பேஸ்களில் உள்ளன, மேலும் அவற்றை அடையாளம் காண்பது எந்தவொரு டெவலப்பருக்கும் பயனுள்ளதாக இருக்கும்.

ஹேக் #1: பேடிங் மற்றும் நெகடிவ் மார்ஜின் தந்திரம்

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

உதாரணக் குறியீடு:

CSS
.sticky-header { height: 80px; position: sticky; top: 0; }
h2[id] {
padding-top: 80px; /* ஹெடரின் உயரத்திற்கு சமமான இடத்தை உருவாக்குகிறது */
margin-top: -80px; /* தனிமத்தின் உள்ளடக்கத்தை மீண்டும் மேலே இழுக்கிறது */
}

இது ஏன் ஒரு ஹேக்:

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

ஹேக் #2: சூடோ-எலிமென்ட் தந்திரம்

சற்று மேம்பட்ட CSS-மட்டும் அணுகுமுறை, இலக்கில் ஒரு சூடோ-எலிமென்ட்டை (`::before`) பயன்படுத்துவதை உள்ளடக்கியது. சூடோ-எலிமென்ட் உண்மையான எலிமென்ட்டிற்கு மேலே நிலைநிறுத்தப்பட்டு கண்ணுக்குத் தெரியாத ஸ்க்ரோல் இலக்காக செயல்படுகிறது.

உதாரணக் குறியீடு:

CSS
h2[id] {
position: relative;
}

h2[id]::before {
content: "";
display: block;
height: 90px; /* ஹெடர் உயரம் + சிறிது இடைவெளி */
margin-top: -90px;
visibility: hidden;
}

இது ஏன் ஒரு ஹேக்:

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

ஹேக் #3: ஜாவாஸ்கிரிப்ட் தலையீடு

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

உதாரணக் குறியீடு (கருத்தியல்):

JavaScript
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const headerHeight = document.querySelector('.sticky-header').offsetHeight;
const targetElement = document.querySelector(this.getAttribute('href'));
if (targetElement) {
const elementPosition = targetElement.getBoundingClientRect().top;
const offsetPosition = elementPosition + window.pageYOffset - headerHeight;
window.scrollTo({
top: offsetPosition,
behavior: 'smooth'
});
}
});
});

இது ஏன் ஒரு ஹேக்:

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

நவீன தீர்வு: `scroll-margin`-ஐ அறிமுகப்படுத்துதல்

`scroll-margin`-க்கு வருக. இந்த CSS பண்பு (மற்றும் அதன் லாங்ஹேண்ட் வகைகள்) குறிப்பாக இந்த வகை சிக்கல்களுக்காக வடிவமைக்கப்பட்டுள்ளது. இது ஒரு எலிமென்ட்டைச் சுற்றி ஒரு அவுட்செட் மார்ஜினை வரையறுக்க உங்களை அனுமதிக்கிறது, இது ஸ்க்ரோல் ஸ்னாப்பிங் பகுதியை சரிசெய்யப் பயன்படுகிறது.

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

நிகழ்ச்சியின் நட்சத்திரம்: `scroll-margin-top`

நமது ஸ்டிக்கி ஹெடர் சிக்கலுக்கு, மிகவும் நேரடியான மற்றும் பயனுள்ள பண்பு `scroll-margin-top` ஆகும். இது எலிமென்ட்டின் மேல் விளிம்பிற்கான ஆஃப்செட்டை குறிப்பாக வரையறுக்கிறது.

நமது முந்தைய சூழ்நிலையை இந்த நவீன, நேர்த்தியான தீர்வைப் பயன்படுத்தி மீண்டும் வடிவமைப்போம். இனி நெகடிவ் மார்ஜின்கள் இல்லை, சூடோ-எலிமென்ட்கள் இல்லை, ஜாவாஸ்கிரிப்ட் இல்லை.

உதாரணக் குறியீடு:

HTML
<header class="site-header">... உங்கள் நேவிகேஷன் ...</header>
<main>
<h2 id="section-one">பகுதி ஒன்று</h2>
<p>முதல் பகுதிக்கான உள்ளடக்கம்...</p>
<h2 id="section-two">பகுதி இரண்டு</h2>
<p>இரண்டாவது பகுதிக்கான உள்ளடக்கம்...</p>
</main>

CSS
.site-header {
position: sticky;
top: 0;
height: 80px;
background-color: white;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* இந்த மாயாஜால வரி! */
h2[id] {
scroll-margin-top: 90px; /* ஹெடர் உயரம் (80px) + 10px இடைவெளி */
}

அவ்வளவுதான். இது ஒரு சுத்தமான, அறிவிப்பு ரீதியான, மற்றும் சுய-ஆவணப்படுத்தும் CSS-ன் ஒரு வரி. ஒரு பயனர் `#section-one`-க்கான இணைப்பைக் கிளிக் செய்யும்போது, உலாவி `

`-க்கு 90 பிக்சல்கள் *மேலே* உள்ள புள்ளி வியூபோர்ட்டின் மேற்பகுதியைச் சந்திக்கும் வரை ஸ்க்ரோல் செய்கிறது. இது உங்கள் 80-பிக்சல் ஹெடருக்குக் கீழே தலைப்பை முழுமையாகத் தெரியும்படி விட்டுவிடுகிறது, வசதியான 10 பிக்சல்கள் கூடுதல் இடத்துடன்.

நன்மைகள் உடனடியாகத் தெளிவாகின்றன:

• கவலைகளைப் பிரித்தல்: ஸ்க்ரோலிங் நடத்தை ஜாவாஸ்கிரிப்டை நம்பாமல், அதற்குரிய இடத்தில்—CSS-ல்—வரையறுக்கப்படுகிறது. எலிமென்ட்டின் தளவமைப்பு எந்த வகையிலும் பாதிக்கப்படவில்லை.
• எளிமை மற்றும் வாசிப்புத்திறன்: `scroll-margin-top` என்ற பண்பு அது என்ன செய்கிறது என்பதை முழுமையாக விவரிக்கிறது. இந்தக் குறியீட்டைப் படிக்கும் எந்தவொரு டெவலப்பரும் அதன் நோக்கத்தை உடனடியாகப் புரிந்துகொள்வார்.
• வலுவான தன்மை: இது சிக்கலைக் கையாள தள-இயல்பான வழியாகும், இது எந்த ஸ்கிரிப்ட் தீர்வை விடவும் திறமையாகவும் நம்பகத்தன்மையுடனும் ஆக்குகிறது.
• பராமரிப்புத்திறன்: இது பழைய ஹேக்குகளை விட நிர்வகிக்க மிகவும் எளிதானது. CSS Custom Properties மூலம் இதை மேலும் மேம்படுத்தலாம், அதை நாம் விரைவில் காண்போம்.

`scroll-margin` பண்புகளில் ஒரு ஆழமான பார்வை

ஸ்டிக்கி ஹெடர் சிக்கலுக்கு `scroll-margin-top` மிகவும் பொதுவான ஹீரோவாக இருந்தாலும், `scroll-margin` குடும்பம் அதை விட பல்துறை வாய்ந்தது. இது அதன் கட்டமைப்பில் பழக்கமான `margin` பண்பைப் பிரதிபலிக்கிறது.

லாங்ஹேண்ட் மற்றும் ஷார்ட்ஹேண்ட் பண்புகள்

`margin` போலவே, நீங்கள் பண்புகளை தனித்தனியாக அல்லது ஒரு ஷார்ட்ஹேண்ட் மூலம் அமைக்கலாம்:

• scroll-margin-top
• scroll-margin-right
• scroll-margin-bottom
• scroll-margin-left

மற்றும் ஷார்ட்ஹேண்ட் பண்பு, `scroll-margin`, இது `margin` போலவே ஒன்று முதல் நான்கு மதிப்பு தொடரியலைப் பின்பற்றுகிறது:

CSS
.target-element {
/* top | right | bottom | left */
scroll-margin: 90px 20px 20px 20px;

/* இதற்கு சமமானது: */
scroll-margin-top: 90px;
scroll-margin-right: 20px;
scroll-margin-bottom: 20px;
scroll-margin-left: 20px;
}

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

உலகளாவிய சிந்தனை: லாஜிக்கல் பண்புகள்

உண்மையிலேயே உலகளாவிய-தயாரான CSS எழுத, முடிந்தவரை இயற்பியல் பண்புகளுக்குப் பதிலாக லாஜிக்கல் பண்புகளைப் பயன்படுத்துவது சிறந்த நடைமுறையாகும். லாஜிக்கல் பண்புகள் இயற்பியல் திசைகளை (`top`, `left`, `right`, `bottom`) விட உரையின் ஓட்டத்தை (`start` மற்றும் `end`) அடிப்படையாகக் கொண்டவை. இது அரபு அல்லது ஹீப்ரு போன்ற வலமிருந்து இடமாக (RTL) மொழிகள் அல்லது செங்குத்து எழுதும் முறைகள் போன்ற வெவ்வேறு எழுதும் முறைகளுக்கு உங்கள் தளவமைப்பு சரியாகப் பொருந்துவதை உறுதி செய்கிறது.

`scroll-margin` குடும்பத்தில் லாஜிக்கல் பண்புகளின் முழுத் தொகுப்பு உள்ளது:

• scroll-margin-block-start: ஒரு நிலையான கிடைமட்ட, மேலிருந்து கீழான எழுதும் பயன்முறையில் `scroll-margin-top`-க்கு ஒத்திருக்கிறது.
• scroll-margin-block-end: `scroll-margin-bottom`-க்கு ஒத்திருக்கிறது.
• scroll-margin-inline-start: இடமிருந்து வலமாக உள்ள சூழலில் `scroll-margin-left`-க்கு ஒத்திருக்கிறது.
• scroll-margin-inline-end: இடமிருந்து வலமாக உள்ள சூழலில் `scroll-margin-right`-க்கு ஒத்திருக்கிறது.

நமது ஸ்டிக்கி ஹெடர் உதாரணத்திற்கு, லாஜிக்கல் பண்பைப் பயன்படுத்துவது மிகவும் வலுவானது மற்றும் எதிர்காலத்திற்கு ஏற்றது:

CSS
h2[id] {
/* இது நவீன, விரும்பத்தக்க வழி */
scroll-margin-block-start: 90px;
}

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

மெருகூட்டப்பட்ட UX-க்காக மென்மையான ஸ்க்ரோலிங்குடன் இணைத்தல்

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

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

CSS
html {
scroll-behavior: smooth;
}

.site-header {
position: sticky;
top: 0;
height: 80px;
}

[id] {
/* ஒரு ID உடன் எந்தவொரு எலிமென்ட்டிற்கும் ஒரு சாத்தியமான ஸ்க்ரோல் இலக்காக மாற்றப் பயன்படுத்தவும் */
scroll-margin-top: 90px;
}

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

நடைமுறை பரிசீலனைகள் மற்றும் விளிம்பு வழக்குகள்

`scroll-margin` சக்திவாய்ந்ததாக இருந்தாலும், உங்கள் செயலாக்கத்தை இன்னும் வலுவானதாக மாற்ற சில நிஜ உலகப் பரிசீலனைகள் இங்கே.

CSS Custom Properties உடன் டைனமிக் ஹெடர் உயரங்களை நிர்வகித்தல்

`80px` போன்ற பிக்சல் மதிப்புகளை ஹார்ட்கோட் செய்வது பராமரிப்புத் தலைவலிகளின் பொதுவான மூலமாகும். வெவ்வேறு திரை அளவுகளில் ஹெடர் உயரம் மாறினால் என்ன ஆகும்? அல்லது அதற்கு மேலே ஒரு பேனர் சேர்க்கப்பட்டால்? நீங்கள் உயரத்தையும் `scroll-margin-top` மதிப்பையும் பல இடங்களில் புதுப்பிக்க வேண்டும்.

இதற்கான தீர்வு CSS Custom Properties (Variables) பயன்படுத்துவதாகும். ஹெடர் உயரத்தை ஒரு மாறியாக வரையறுப்பதன் மூலம், அதை ஹெடரின் ஸ்டைல் மற்றும் இலக்கின் ஸ்க்ரோல் மார்ஜின் இரண்டிலும் குறிப்பிடலாம்.

CSS
:root {
--header-height: 80px;
--scroll-padding: 1rem; /* இடைவெளிக்கு ஒரு சார்பு அலகு பயன்படுத்தவும் */
}

/* ரெஸ்பான்சிவ் ஹெடர் உயரம் */
@media (max-width: 768px) {
:root {
--header-height: 60px;
}
}

.site-header {
position: sticky;
top: 0;
height: var(--header-height);
}

[id] {
scroll-margin-top: calc(var(--header-height) + var(--scroll-padding));
}

இந்த அணுகுமுறை நம்பமுடியாத அளவிற்கு சக்தி வாய்ந்தது. இப்போது, நீங்கள் எப்போதாவது ஹெடரின் உயரத்தை மாற்ற வேண்டியிருந்தால், நீங்கள் `--header-height` மாறியை ஒரே இடத்தில் புதுப்பித்தால் போதும். `scroll-margin-top` மீடியா வினவல்களுக்கு பதிலளிக்கும் வகையில் கூட தானாகவே புதுப்பிக்கப்படும். இது DRY (Don't Repeat Yourself), பராமரிக்கக்கூடிய CSS எழுதுவதன் உச்சகட்டமாகும்.

உலாவி ஆதரவு

`scroll-margin` பற்றிய சிறந்த செய்தி என்னவென்றால், அதன் நேரம் வந்துவிட்டது. இன்றுவரை, இது Chrome, Firefox, Safari மற்றும் Edge உட்பட அனைத்து நவீன, எவர்கிரீன் உலாவிகளிலும் ஆதரிக்கப்படுகிறது. இதன் பொருள் உலகளாவிய பார்வையாளர்களை இலக்காகக் கொண்ட பெரும்பாலான திட்டங்களுக்கு, நீங்கள் இந்த பண்பை நம்பிக்கையுடன் பயன்படுத்தலாம்.

மிகப் பழைய உலாவிகளுக்கு (இன்டர்நெட் எக்ஸ்ப்ளோரர் 11 போன்றவை) ஆதரவு தேவைப்படும் திட்டங்களுக்கு, `scroll-margin` வேலை செய்யாது. அத்தகைய சந்தர்ப்பங்களில், நீங்கள் பழைய ஹேக்குகளில் ஒன்றை ஒரு ஃபால்பேக்காகப் பயன்படுத்த வேண்டியிருக்கலாம். திறன் கொண்ட உலாவிகளுக்கு நவீன பண்பையும் மற்றவர்களுக்கு ஹேக்கையும் பயன்படுத்த நீங்கள் ஒரு CSS `@supports` வினவலைப் பயன்படுத்தலாம்:

CSS
/* மரபு உலாவிகளுக்கான பழைய ஹேக் */
[id] {
padding-top: 90px;
margin-top: -90px;
}

/* ஆதரிக்கப்படும் உலாவிகளுக்கான நவீன பண்பு */
@supports (scroll-margin-top: 1px) {
[id] {
/* முதலில், பழைய ஹேக்கை நீக்கவும் */
padding-top: 0;
margin-top: 0;
/* பின்னர், சிறந்த தீர்வைப் பயன்படுத்தவும் */
scroll-margin-top: 90px;
}
}

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

அணுகல்தன்மை வெற்றிகள்

`scroll-margin` பயன்படுத்துவது ஒரு டெவலப்பர் வசதி மட்டுமல்ல; இது அணுகல்தன்மைக்கு ஒரு குறிப்பிடத்தக்க வெற்றியாகும். பயனர்கள் ஒரு கீபோர்டைப் பயன்படுத்தி ஒரு பக்கத்தை வழிநடத்தும்போது (உதாரணமாக, இணைப்புகள் வழியாக டேப் செய்து ஒரு பக்க ஆங்கரில் Enter ஐ அழுத்துவதன் மூலம்), உலாவியின் ஸ்க்ரோலிங் தூண்டப்படுகிறது. இலக்கு தலைப்பு மறைக்கப்படவில்லை என்பதை உறுதி செய்வதன் மூலம், நீங்கள் இந்த பயனர்களுக்கு முக்கியமான சூழலை வழங்குகிறீர்கள்.

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

முடிவுரை: நவீன தரநிலையைத் தழுவுங்கள்

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

`scroll-margin` பண்புடன், இந்த சிக்கலை சுத்தமாகவும் திறமையாகவும் தீர்க்க வடிவமைக்கப்பட்ட CSS மொழியில் இப்போது எங்களிடம் ஒரு முதல்-தர குடிமகன் இருக்கிறார். அதை ஏற்றுக்கொள்வதன் மூலம், நீங்கள் சிறந்த குறியீட்டை எழுதுவது மட்டுமல்ல; உங்கள் பயனர்களுக்கு ஒரு சிறந்த, கணிக்கக்கூடிய மற்றும் அணுகக்கூடிய அனுபவத்தை உருவாக்குகிறீர்கள்.

உங்கள் முக்கிய எடுத்துச்செல்ல வேண்டியவை:

• ஒரு ஸ்க்ரோலிங் ஆஃப்செட்டை உருவாக்க உங்கள் இலக்கு எலிமென்ட்களில் `scroll-margin-top` (அல்லது `scroll-margin-block-start`) பயன்படுத்தவும்.
• உங்கள் ஸ்டிக்கி ஹெடரின் உயரத்திற்கு ஒரு ஒற்றை உண்மையான மூலத்தை உருவாக்க CSS Custom Properties உடன் அதை இணைக்கவும், இது உங்கள் குறியீட்டை வலுவானதாகவும் பராமரிக்கக்கூடியதாகவும் ஆக்குகிறது.
• ஒரு மெருகூட்டப்பட்ட, தொழில்முறை உணர்விற்காக `html` எலிமென்ட்டிற்கு `scroll-behavior: smooth;` சேர்க்கவும்.
• இந்த பணிக்காக பேடிங் ஹேக்குகள், சூடோ-எலிமென்ட்கள் அல்லது ஜாவாஸ்கிரிப்ட் பயன்படுத்துவதை நிறுத்துங்கள். வலைத் தளம் வழங்கும் நவீன, நோக்கத்திற்காக உருவாக்கப்பட்ட தீர்வைத் தழுவுங்கள்.

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