M

MLOG

தமிழ்

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

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

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

பிரச்சனையைப் புரிந்துகொள்ளுதல்: நிலையான தலைப்புத் தடை

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

scroll-margin மற்றும் scroll-padding அறிமுகம்

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

நிலையான தலைப்புகளின் சூழலில், scroll-margin-top பொதுவாக மிகவும் பொருத்தமான பண்பு ஆகும். இருப்பினும், உங்கள் தளவமைப்பைப் பொறுத்து, நீங்கள் மற்ற மார்ஜின்களையும் சரிசெய்ய வேண்டியிருக்கலாம்.

நிலையான தலைப்பு ஆஃப்செட்டிற்காக scroll-margin-top பயன்படுத்துதல்

scroll-margin என்பதற்கான மிகவும் பொதுவான பயன்பாடு, ஒரு நிலையான தலைப்பு இருக்கும்போது ஆங்கர் இணைப்புகளை ஆஃப்செட் செய்வதாகும். அதை எப்படிச் செயல்படுத்துவது என்பது இங்கே:

  1. உங்கள் நிலையான தலைப்பின் உயரத்தைக் கண்டறியவும்: உங்கள் நிலையான தலைப்பை ஆய்வு செய்து அதன் உயரத்தைக் கண்டறிய உங்கள் உலாவியின் டெவலப்பர் கருவிகளைப் பயன்படுத்தவும். இதுதான் நீங்கள் scroll-margin-top-க்கு பயன்படுத்தும் மதிப்பு. எடுத்துக்காட்டாக, உங்கள் தலைப்பு 60 பிக்சல்கள் உயரமாக இருந்தால், நீங்கள் scroll-margin-top: 60px; பயன்படுத்துவீர்கள்.
  2. இலக்கு உறுப்புகளுக்கு scroll-margin-top பயன்படுத்தவும்: நீங்கள் ஆஃப்செட் செய்ய விரும்பும் உறுப்புகளைத் தேர்ந்தெடுக்கவும். இவை பொதுவாக உங்கள் தலைப்புகள் (<h1>, <h2>, <h3>, ইত্যাদি) அல்லது உங்கள் ஆங்கர் இணைப்புகள் சுட்டிக்காட்டும் பிரிவுகளாகும்.

எடுத்துக்காட்டு: அடிப்படைச் செயல்படுத்தல்

உங்களிடம் 70 பிக்சல்கள் உயரமுள்ள ஒரு நிலையான தலைப்பு இருப்பதாக வைத்துக்கொள்வோம். நீங்கள் பயன்படுத்த வேண்டிய CSS இங்கே:

h2 {
  scroll-margin-top: 70px;
}

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

எடுத்துக்காட்டு: பல தலைப்பு நிலைகளுக்குப் பயன்படுத்துதல்

உங்கள் பக்கம் முழுவதும் சீரான நடத்தையை உறுதிப்படுத்த, நீங்கள் பல தலைப்பு நிலைகளுக்கு scroll-margin-top பயன்படுத்தலாம்:

h1, h2, h3 {
  scroll-margin-top: 70px;
}

எடுத்துக்காட்டு: குறிப்பிட்ட பிரிவுகளுக்கு ஒரு கிளாஸைப் பயன்படுத்துதல்

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

<section id="introduction" class="scroll-offset">
  <h2>Introduction</h2>
  <p>...</p>
</section>

.scroll-offset {
  scroll-margin-top: 70px;
}

ஒரு மாற்றாக scroll-padding-top பயன்படுத்துதல்

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

scroll-padding-top-ஐப் பயன்படுத்த, நீங்கள் பொதுவாக அதை <body> உறுப்புக்குப் பயன்படுத்துவீர்கள்:

body {
  scroll-padding-top: 70px;
}

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

scroll-margin மற்றும் scroll-padding-க்கு இடையில் தேர்ந்தெடுத்தல்

scroll-margin மற்றும் scroll-padding-க்கு இடையிலான தேர்வு பெரும்பாலும் தனிப்பட்ட விருப்பம் மற்றும் உங்கள் வலைத்தளத்தின் குறிப்பிட்ட தளவமைப்பைப் பொறுத்தது. நீங்கள் தீர்மானிக்க உதவும் ஒரு ஒப்பீடு இங்கே:

பெரும்பாலான சந்தர்ப்பங்களில், தலைப்புகள் அல்லது பிரிவுகளில் scroll-margin-ஐப் பயன்படுத்துவது விரும்பத்தக்க அணுகுமுறையாகும், ஏனெனில் இது அதிக நெகிழ்வுத்தன்மையை வழங்குகிறது. இருப்பினும், உங்களிடம் ஒரு நிலையான தலைப்புடன் கூடிய எளிய தளவமைப்பு இருந்து, விரைவான தீர்வு தேவைப்பட்டால், scroll-padding ஒரு நல்ல தேர்வாக இருக்கும்.

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

பராமரிப்பிற்காக CSS மாறிகளைப் பயன்படுத்துதல்

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

:root {
  --header-height: 70px;
}

h1, h2, h3 {
  scroll-margin-top: var(--header-height);
}

/* scroll-padding-top உடன் பயன்பாட்டிற்கான எடுத்துக்காட்டு */
body {
  scroll-padding-top: var(--header-height);
}

மாறும் தலைப்பு உயரங்களைக் கையாளுதல்

சில சமயங்களில், உங்கள் நிலையான தலைப்பு மாறும் வகையில் உயரத்தை மாற்றக்கூடும், எடுத்துக்காட்டாக, வெவ்வேறு திரை அளவுகளில் அல்லது பயனர் பக்கத்தை கீழே ஸ்க்ரோல் செய்யும்போது. இந்தச் சூழ்நிலைகளில், scroll-margin-top அல்லது scroll-padding-top-ஐ மாறும் வகையில் புதுப்பிக்க நீங்கள் JavaScript-ஐப் பயன்படுத்த வேண்டும்.

இதை எப்படிச் செய்வது என்பதற்கான ஒரு அடிப்படை எடுத்துக்காட்டு இங்கே:

function updateScrollMargin() {
  const headerHeight = document.querySelector('header').offsetHeight;
  document.documentElement.style.setProperty('--header-height', `${headerHeight}px`);
}

// பக்கம் ஏற்றப்படும்போதும், சாளரம் மறுஅளவாக்கப்படும்போதும் செயல்பாட்டை அழைக்கவும்
window.addEventListener('load', updateScrollMargin);
window.addEventListener('resize', updateScrollMargin);

இந்த JavaScript குறியீடு <header> உறுப்பின் உயரத்தைப் பெற்று, அதற்கேற்ப --header-height CSS மாறியை அமைக்கிறது. பின்னர் CSS இந்த மாறியைப் பயன்படுத்தி scroll-margin-top அல்லது scroll-padding-top-ஐ அமைக்கிறது.

அணுகல்தன்மை பரிசீலனைகள்

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

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

உலாவி இணக்கத்தன்மை

scroll-margin மற்றும் scroll-padding ஆகியவை சிறந்த உலாவி இணக்கத்தன்மையைக் கொண்டுள்ளன. Chrome, Firefox, Safari, Edge மற்றும் Opera உட்பட அனைத்து நவீன உலாவிகளாலும் அவை ஆதரிக்கப்படுகின்றன. பழைய உலாவிகள் இந்தப் பண்புகளை ஆதரிக்காமல் இருக்கலாம், ஆனால் அவை நளினமாகக் கீழிறங்கும், அதாவது ஆங்கர் இணைப்புகள் vẫn పని చేస్తాయి, ஆனால் ஆஃப்செட் பயன்படுத்தப்படாது.

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

பொதுவான சிக்கல்களைச் சரிசெய்தல்

scroll-margin மற்றும் scroll-padding-ஐப் பயன்படுத்தும்போது நீங்கள் சந்திக்கக்கூடிய சில பொதுவான சிக்கல்கள் மற்றும் சரிசெய்தல் குறிப்புகள் இங்கே:

நிஜ உலக உதாரணங்கள்

பிரபலமான வலைத்தளங்களில் scroll-margin மற்றும் scroll-padding எவ்வாறு பயன்படுத்தப்படுகின்றன என்பதற்கான சில நிஜ உலக உதாரணங்களைப் பார்ப்போம்:

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

முடிவுரை

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

மேலும் அறிய