M

MLOG

தமிழ்

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

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

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

CSS Scroll Behavior என்றால் என்ன?

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

scroll-behavior: smooth; இன் அடிப்படைச் செயலாக்கம்

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

html எலிமெண்ட்டில் பயன்படுத்துதல்:

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

html {
  scroll-behavior: smooth;
}

body எலிமெண்ட்டில் பயன்படுத்துதல்:

இந்த முறையும் வேலை செய்யும், ஆனால் இது body-க்குள் உள்ள உள்ளடக்கத்தை மட்டுமே பாதிக்கும் என்பதால் இது குறைவாகவே பயன்படுத்தப்படுகிறது.

body {
  scroll-behavior: smooth;
}

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

ஆங்கர் இணைப்புகளுடன் மென்மையான ஸ்க்ரோலிங்

ஆங்கர் இணைப்புகள் (fragment identifiers என்றும் அழைக்கப்படும்) ஒரு வலைப்பக்கத்திற்குள் செல்ல ஒரு பொதுவான வழியாகும். அவை பொதுவாக உள்ளடக்க அட்டவணைகள் அல்லது ஒற்றைப் பக்க வலைத்தளங்களில் பயன்படுத்தப்படுகின்றன. scroll-behavior: smooth; உடன், ஒரு ஆங்கர் இணைப்பைக் கிளிக் செய்வது ஒரு மென்மையான ஸ்க்ரோலிங் அனிமேஷனைத் தூண்டுகிறது.

ஆங்கர் இணைப்புகளுக்கான HTML கட்டமைப்பு:





  
பிரிவு 1

  
பிரிவு 1 இன் உள்ளடக்கம்...






  
பிரிவு 2

  
பிரிவு 2 இன் உள்ளடக்கம்...






  
பிரிவு 3

  
பிரிவு 3 இன் உள்ளடக்கம்...

html { scroll-behavior: smooth; } என்ற CSS விதியுடன், வழிசெலுத்தலில் உள்ள எந்த இணைப்பைக் கிளிக் செய்தாலும், அதனுடன் தொடர்புடைய பகுதிக்கு மென்மையான ஸ்க்ரோலிங் அனிமேஷன் ஏற்படும்.

குறிப்பிட்ட ஸ்க்ரோல் செய்யக்கூடிய எலிமெண்ட்களை குறிவைத்தல்

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

உதாரணம்: ஒரு Div-இல் மென்மையான ஸ்க்ரோலிங்:


  
இங்கே நிறைய உள்ளடக்கம்...

  
மேலும் உள்ளடக்கம்...

  
இன்னும் அதிக உள்ளடக்கம்...




.scrollable-container {
  width: 300px;
  height: 200px;
  overflow: scroll;
  scroll-behavior: smooth;
}

இந்த எடுத்துக்காட்டில், .scrollable-container க்குள் உள்ள உள்ளடக்கம் மட்டுமே மென்மையாக ஸ்க்ரோல் செய்யும்.

ஜாவாஸ்கிரிப்ட் மூலம் நிரல்ரீதியான மென்மையான ஸ்க்ரோலிங்

scroll-behavior: smooth; பயனர் தொடர்புகளால் (ஆங்கர் இணைப்புகளைக் கிளிக் செய்வது போன்றவை) தூண்டப்படும் ஸ்க்ரோலிங்கைக் கையாளும் அதே வேளையில், ஜாவாஸ்கிரிப்ட்டைப் பயன்படுத்தி நீங்கள் நிரல்ரீதியாக ஸ்க்ரோலிங்கைத் தொடங்க வேண்டியிருக்கலாம். scrollTo() மற்றும் scrollBy() முறைகள், behavior: 'smooth' விருப்பத்துடன் இணைக்கப்படும்போது, இதை அடைய ஒரு வழியை வழங்குகின்றன.

scrollTo() ஐப் பயன்படுத்துதல்:

scrollTo() முறை சாளரத்தை ஒரு குறிப்பிட்ட ஒருங்கிணைப்புக்கு ஸ்க்ரோல் செய்கிறது.

window.scrollTo({
  top: 500,
  left: 0,
  behavior: 'smooth'
});

இந்தக் குறியீடு சாளரத்தை மேலிருந்து 500 பிக்சல்கள் செங்குத்து ஆஃப்செட்டிற்கு மென்மையாக ஸ்க்ரோல் செய்யும்.

scrollBy() ஐப் பயன்படுத்துதல்:

scrollBy() முறை சாளரத்தை ஒரு குறிப்பிட்ட அளவு ஸ்க்ரோல் செய்கிறது.

window.scrollBy({
  top: 100,
  left: 0,
  behavior: 'smooth'
});

இந்தக் குறியீடு சாளரத்தை 100 பிக்சல்கள் கீழே மென்மையாக ஸ்க்ரோல் செய்யும்.

உதாரணம்: பட்டன் கிளிக்கில் ஒரு எலிமெண்டிற்கு மென்மையாக ஸ்க்ரோல் செய்தல்:





  
பிரிவு 3

  
பிரிவு 3 இன் உள்ளடக்கம்...




const scrollButton = document.getElementById('scrollButton');
const section3 = document.getElementById('section3');

scrollButton.addEventListener('click', () => {
  section3.scrollIntoView({
    behavior: 'smooth'
  });
});

பட்டன் கிளிக் செய்யப்படும்போது, பக்கம் scrollIntoView() ஐப் பயன்படுத்தி "பிரிவு 3" எலிமெண்டிற்கு மென்மையாக ஸ்க்ரோல் செய்யும். இந்த முறை பெரும்பாலும் விரும்பப்படுகிறது, ஏனெனில் இது டைனமிக் உள்ளடக்க மாற்றங்களைப் பொருட்படுத்தாமல் இலக்கு எலிமெண்ட்டின் துல்லியமான நிலையைக் கணக்கிடுகிறது.

ஸ்க்ரோல் வேகம் மற்றும் ஈஸிங்கைத் தனிப்பயனாக்குதல்

scroll-behavior: smooth; ஒரு இயல்புநிலை மென்மையான ஸ்க்ரோலிங் அனிமேஷனை வழங்கும் அதே வேளையில், CSS ஐ மட்டும் பயன்படுத்தி நீங்கள் வேகம் அல்லது ஈஸிங்கை (காலப்போக்கில் அனிமேஷனின் மாற்ற விகிதம்) நேரடியாகக் கட்டுப்படுத்த முடியாது. தனிப்பயனாக்கத்திற்கு ஜாவாஸ்கிரிப்ட் தேவை.

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

ஜாவாஸ்கிரிப்ட்-அடிப்படையிலான தனிப்பயனாக்கம்:

ஸ்க்ரோல் வேகம் மற்றும் ஈஸிங்கைத் தனிப்பயனாக்க, நீங்கள் ஜாவாஸ்கிரிப்ட்டைப் பயன்படுத்தி ஒரு தனிப்பயன் அனிமேஷனை உருவாக்க வேண்டும். இது பொதுவாக GSAP (GreenSock Animation Platform) போன்ற லைப்ரரிகளைப் பயன்படுத்துவது அல்லது requestAnimationFrame ஐப் பயன்படுத்தி உங்கள் சொந்த அனிமேஷன் லாஜிக்கைச் செயல்படுத்துவது ஆகியவை அடங்கும்.

requestAnimationFrame ஐப் பயன்படுத்தி உதாரணம்:

function smoothScroll(target, duration) {
  const start = window.pageYOffset;
  const targetPosition = target.getBoundingClientRect().top;
  const startTime = performance.now();

  function animation(currentTime) {
    const timeElapsed = currentTime - startTime;
    const run = ease(timeElapsed, start, targetPosition, duration);
    window.scrollTo(0, run);
    if (timeElapsed < duration) {
      requestAnimationFrame(animation);
    }
  }

  // Easing function (e.g., easeInOutQuad)
  function ease(t, b, c, d) {
    t /= d/2;
    if (t < 1) return c/2*t*t + b;
    t--;
    return -c/2 * (t*(t-2) - 1) + b;
  }

  requestAnimationFrame(animation);
}

// Example usage:
const targetElement = document.getElementById('section3');
const scrollDuration = 1000; // milliseconds
smoothScroll(targetElement, scrollDuration);

இந்தக் குறியீடு ஒரு இலக்கு எலிமெண்ட் மற்றும் ஒரு கால அளவை உள்ளீடாக எடுக்கும் smoothScroll செயல்பாட்டை வரையறுக்கிறது. இது ஒரு மென்மையான அனிமேஷனை உருவாக்க requestAnimationFrame ஐப் பயன்படுத்துகிறது மற்றும் அனிமேஷனின் வேகத்தைக் கட்டுப்படுத்த ஒரு ஈஸிங் செயல்பாட்டை (இந்த எடுத்துக்காட்டில் easeInOutQuad) உள்ளடக்கியுள்ளது. பல்வேறு அனிமேஷன் விளைவுகளை அடைய ஆன்லைனில் பலவிதமான ஈஸிங் செயல்பாடுகளை நீங்கள் காணலாம்.

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

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

பயனர் விருப்பத்தைச் செயல்படுத்துதல்:

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

prefers-reduced-motion ஐப் பயன்படுத்துதல்:

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important; /* மென்மையான ஸ்க்ரோலிங்கை மீறுகிறது */
  }
}

பயனர் தங்கள் இயக்க முறைமையில் "குறைக்கப்பட்ட இயக்கம்" அமைப்பை இயக்கியிருந்தால், இந்தக் குறியீடு மென்மையான ஸ்க்ரோலிங்கை முடக்குகிறது. இந்த விதி மற்ற scroll-behavior அறிவிப்புகளை மீறுவதை உறுதிசெய்ய !important கொடி பயன்படுத்தப்படுகிறது.

ஒரு மேனுவல் டோகிளை வழங்குதல்:

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



const smoothScrollToggle = document.getElementById('smoothScrollToggle');

smoothScrollToggle.addEventListener('change', () => {
  if (smoothScrollToggle.checked) {
    document.documentElement.style.scrollBehavior = 'smooth';
  } else {
    document.documentElement.style.scrollBehavior = 'auto';
  }
});

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

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

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

பழைய உலாவிகளுக்கு ஒரு ஃபால்பேக்கை வழங்குதல்:

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

உதாரணம்: பாலிஃபில் ஒன்றைப் பயன்படுத்துதல்:

மென்மையான ஸ்க்ரோலிங் பாலிஃபில்களை வழங்கும் பல ஜாவாஸ்கிரிப்ட் லைப்ரரிகள் உள்ளன. ஒரு விருப்பம் "smoothscroll-polyfill" போன்ற ஒரு லைப்ரரியைப் பயன்படுத்துவதாகும்.

இந்தக் குறியீடு "smoothscroll-polyfill" லைப்ரரியை உள்ளடக்கி அதைத் துவக்குகிறது. இது scroll-behavior ஐ பூர்வீகமாக ஆதரிக்காத பழைய உலாவிகளில் மென்மையான ஸ்க்ரோலிங் செயல்பாட்டை வழங்கும்.

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

மென்மையான ஸ்க்ரோலிங்கிற்கான சிறந்த நடைமுறைகள்

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

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

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

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

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

scroll-margin மற்றும் scroll-padding ஐப் பயன்படுத்துதல்:

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

உதாரணம்:

section {
  scroll-margin-top: 20px; /* ஸ்க்ரோல் செய்யும்போது ஒவ்வொரு பிரிவிற்கும் மேலே 20px மார்ஜினைச் சேர்க்கிறது */
}

html {
  scroll-padding-top: 60px; /* ஸ்க்ரோல் செய்யும்போது வியூபோர்ட்டின் மேற்புறத்தில் 60px பேடிங்கைச் சேர்க்கிறது */
}

Intersection Observer API உடன் இணைத்தல்:

Intersection Observer API ஒரு எலிமெண்ட் வியூபோர்ட்டிற்குள் நுழையும்போதோ அல்லது வெளியேறும்போதோ கண்டறிய உங்களை அனுமதிக்கிறது. எலிமெண்ட்களின் தெரிவுநிலையின் அடிப்படையில் மென்மையான ஸ்க்ரோலிங் அனிமேஷன்களைத் தூண்டுவதற்கு இந்த API-ஐப் பயன்படுத்தலாம்.

உதாரணம்:

const sections = document.querySelectorAll('section');

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // பிரிவு பார்வையில் இருக்கும்போது ஏதாவது செய்யுங்கள்
      console.log('பிரிவு ' + entry.target.id + ' பார்வையில் உள்ளது');
    }
    else {
      // பிரிவு பார்வையில் இல்லாதபோது ஏதாவது செய்யுங்கள்
      console.log('பிரிவு ' + entry.target.id + ' பார்வையில் இல்லை');
    }
  });
}, {
  threshold: 0.5 // 50% எலிமெண்ட் தெரியும் போது தூண்டவும்
});

sections.forEach(section => {
  observer.observe(section);
});

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

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

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

முடிவுரை

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

CSS Scroll Behavior: மென்மையான ஸ்க்ரோலிங்கிற்கான ஒரு விரிவான வழிகாட்டி | MLOG