CSS ஓவர்ஸ்க்ரோல் நடத்தை: மேம்பட்ட UX-க்கு ஸ்க்ரோல் எல்லைக் கட்டுப்பாட்டில் தேர்ச்சி பெறுதல்

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

ஓவர்ஸ்க்ரோல் நடத்தை என்றால் என்ன?

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

பண்புகளைப் புரிந்துகொள்ளுதல்

overscroll-behavior பண்பு மூன்று முதன்மை மதிப்புகளை ஏற்றுக்கொள்கிறது:

auto: இது இயல்புநிலை நடத்தை. இது உலாவி ஓவர்ஸ்க்ரோல் செயல்களை சாதாரணமாகக் கையாள அனுமதிக்கிறது (எ.கா., ஸ்க்ரோல் சைனிங் அல்லது புதுப்பித்தல்).
contain: இந்த மதிப்பு ஸ்க்ரோல் மூதாதையர் கூறுகளுக்குப் பரவுவதைத் தடுக்கிறது. இது ஸ்க்ரோலை உறுப்புக்குள் திறம்பட "கட்டுப்படுத்துகிறது", ஸ்க்ரோல் சைனிங் மற்றும் பிற இயல்புநிலை ஓவர்ஸ்க்ரோல் விளைவுகளைத் தடுக்கிறது.
none: இந்த மதிப்பு எந்த ஓவர்ஸ்க்ரோல் நடத்தையையும் முழுமையாக முடக்குகிறது. ஸ்க்ரோல் சைனிங் இல்லை, புதுப்பித்தல் விளைவுகள் இல்லை - ஸ்க்ரோல் குறிப்பிட்ட உறுப்புக்கு கண்டிப்பாக வரையறுக்கப்பட்டுள்ளது.

கூடுதலாக, overscroll-behavior பின்வரும் துணைப் பண்புகளைப் பயன்படுத்தி குறிப்பிட்ட அச்சுகளுக்குப் பயன்படுத்தப்படலாம்:

overscroll-behavior-x: கிடைமட்ட அச்சில் ஓவர்ஸ்க்ரோல் நடத்தையைக் கட்டுப்படுத்துகிறது.
overscroll-behavior-y: செங்குத்து அச்சில் ஓவர்ஸ்க்ரோல் நடத்தையைக் கட்டுப்படுத்துகிறது.

உதாரணமாக:

.scrollable-container {
  overscroll-behavior-y: contain; /* செங்குத்து ஸ்க்ரோல் சங்கிலியைத் தடுக்கிறது */
  overscroll-behavior-x: auto;    /* கிடைமட்ட ஸ்க்ரோல் சங்கிலியை அனுமதிக்கிறது */
}

பயன்பாட்டு நிகழ்வுகள் மற்றும் எடுத்துக்காட்டுகள்

overscroll-behavior பயனர் அனுபவத்தை மேம்படுத்தவும், எதிர்பாராத நடத்தையைத் தடுக்கவும் பல்வேறு சூழ்நிலைகளில் பயன்படுத்தப்படலாம். சில பொதுவான பயன்பாட்டு நிகழ்வுகளை நடைமுறை எடுத்துக்காட்டுகளுடன் ஆராய்வோம்.

1. மொபைலில் பக்கத்தைப் புதுப்பிப்பதைத் தடுத்தல்

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

body {
  overscroll-behavior-y: contain; /* ஓவர்ஸ்க்ரோலில் பக்கப் புதுப்பிப்பைத் தடுக்கிறது */
}

body உறுப்புக்கு overscroll-behavior: contain ஐப் பயன்படுத்துவதன் மூலம், மொபைல் சாதனங்களில் புல்-டு-ரிஃப்ரெஷ் நடத்தையைத் தடுக்கலாம், இது ஒரு மென்மையான மற்றும் கணிக்கக்கூடிய பயனர் அனுபவத்தை உறுதி செய்கிறது.

2. மோடல்கள் மற்றும் ஓவர்லேக்களுக்குள் ஸ்க்ரோலைக் கட்டுப்படுத்துதல்

மோடல்கள் அல்லது ஓவர்லேக்களைப் பயன்படுத்தும்போது, மோடல் திறந்திருக்கும்போது கீழே உள்ள உள்ளடக்கம் ஸ்க்ரோல் செய்வதைத் தடுப்பது விரும்பத்தக்கது. overscroll-behavior ஐப் பயன்படுத்தி மோடலுக்குள்ளேயே ஸ்க்ரோலைக் கட்டுப்படுத்தலாம்.

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* மோடலுக்குள் ஸ்க்ரோலிங்கை இயக்குகிறது */
  overscroll-behavior: contain; /* கீழே உள்ள உள்ளடக்கம் ஸ்க்ரோல் செய்வதைத் தடுக்கிறது */
}

.modal-content {
  /* மோடல் உள்ளடக்கத்தை வடிவமைத்தல் */
}

இந்த எடுத்துக்காட்டில், .modal உறுப்பு overscroll-behavior: contain ஐக் கொண்டுள்ளது, இது பயனர் மோடலின் ஸ்க்ரோல் எல்லையை அடையும்போது கீழே உள்ள பக்கம் ஸ்க்ரோல் செய்வதைத் தடுக்கிறது. overflow: auto பண்பு மோடலின் உள்ளடக்கம் அதன் உயரத்தை மீறினால் மோடலை ஸ்க்ரோல் செய்யக்கூடியதாக இருப்பதை உறுதி செய்கிறது.

3. தனிப்பயன் ஸ்க்ரோல் குறிகாட்டிகளை உருவாக்குதல்

overscroll-behavior: none என அமைப்பதன் மூலம், நீங்கள் இயல்புநிலை ஓவர்ஸ்க்ரோல் விளைவுகளை முழுமையாக முடக்கி, தனிப்பயன் ஸ்க்ரோல் குறிகாட்டிகள் அல்லது அனிமேஷன்களைச் செயல்படுத்தலாம். இது பயனர் அனுபவத்தின் மீது அதிக கட்டுப்பாட்டையும், தனித்துவமான மற்றும் ஈடுபாட்டுடன் கூடிய தொடர்புகளை உருவாக்கும் திறனையும் அனுமதிக்கிறது.

.scrollable-area {
  overflow: auto;
  overscroll-behavior: none; /* இயல்புநிலை ஓவர்ஸ்க்ரோல் நடத்தையை முடக்குகிறது */
}

.scrollable-area::-webkit-scrollbar {
  display: none; /* இயல்புநிலை ஸ்க்ரோல்பாரை மறைக்கிறது (விருப்பத்தேர்வு) */
}

.scroll-indicator {
  /* உங்கள் தனிப்பயன் ஸ்க்ரோல் குறிகாட்டியை வடிவமைத்தல் */
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  /* ... */
}

.scrollable-area:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20px;
  background: linear-gradient(to top, rgba(0,0,0,0.1), transparent);
  pointer-events: none; /* குறிகாட்டி வழியாக ஸ்க்ரோல் செய்ய அனுமதிக்கிறது */
}

இந்த எடுத்துக்காட்டு, இயல்புநிலை ஓவர்ஸ்க்ரோல் நடத்தையை முடக்கி, CSS சூடோ-எலிமென்ட்ஸ் மற்றும் கிரேடியன்ட்களைப் பயன்படுத்தி ஒரு தனிப்பயன் ஸ்க்ரோல் குறிகாட்டியை உருவாக்குவது எப்படி என்பதைக் காட்டுகிறது. pointer-events: none பண்பு குறிகாட்டி ஸ்க்ரோலிங்கில் குறுக்கிடாமல் இருப்பதை உறுதி செய்கிறது.

4. கரோசல்கள் மற்றும் ஸ்லைடர்களை மேம்படுத்துதல்

overscroll-behavior-x கிடைமட்ட ஸ்க்ரோலிங் முதன்மைத் தொடர்பாடலாக இருக்கும் கரோசல்கள் மற்றும் ஸ்லைடர்களுக்கு குறிப்பாக பயனுள்ளதாக இருக்கும். overscroll-behavior-x: contain என அமைப்பதன் மூலம், மொபைல் சாதனங்களில் உலாவியின் பின்/முன் வழிசெலுத்தலை கரோசல் தற்செயலாகத் தூண்டுவதைத் தடுக்கலாம்.

.carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain; /* பின்/முன் வழிசெலுத்தலைத் தடுக்கிறது */
}

.carousel-item {
  scroll-snap-align: start;
  /* ... */
}

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

5. ஸ்க்ரோல் செய்யக்கூடிய பகுதிகளில் அணுகல்தன்மையை மேம்படுத்துதல்

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

ஸ்க்ரோல் செய்யக்கூடிய பகுதிகளில் பொருத்தமான ARIA பண்புக்கூறுகள் (எ.கா., role="region", aria-label) இருப்பதை உறுதிசெய்து, உதவித் தொழில்நுட்பங்களுக்குப் பொருள்சார்ந்த தகவலை வழங்கவும். ஸ்க்ரோலிங் நடத்தை அணுகக்கூடியதாகவும், கணிக்கக்கூடியதாகவும் உள்ளதா என்பதைச் சரிபார்க்க உங்கள் செயலாக்கங்களை ஸ்கிரீன் ரீடர்களுடன் சோதிக்கவும்.

சிறந்த நடைமுறைகள் மற்றும் கருத்தில் கொள்ள வேண்டியவை

overscroll-behavior ஐப் பயன்படுத்தும்போது, பின்வரும் சிறந்த நடைமுறைகள் மற்றும் கருத்தில் கொள்ள வேண்டியவற்றை மனதில் கொள்ளுங்கள்:

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

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

overscroll-behavior ஆனது Chrome, Firefox, Safari மற்றும் Edge உள்ளிட்ட நவீன உலாவிகளில் சிறந்த ஆதரவைக் கொண்டுள்ளது. இருப்பினும், உங்கள் இலக்கு பார்வையாளர்கள் உங்கள் செயலாக்கங்களை சரியாக அனுபவிக்க முடியும் என்பதை உறுதிப்படுத்த Can I Use (caniuse.com) போன்ற வலைத்தளங்களில் சமீபத்திய உலாவி இணக்கத்தன்மை தகவலைச் சரிபார்ப்பது எப்போதும் ஒரு நல்ல யோசனையாகும்.

overscroll-behavior ஐ ஆதரிக்காத பழைய உலாவிகளுக்கு, இதே போன்ற விளைவுகளை அடைய நீங்கள் பாலிஃபில்கள் அல்லது மாற்று நுட்பங்களைப் பயன்படுத்த வேண்டியிருக்கலாம். இருப்பினும், இந்த அணுகுமுறைகள் நேட்டிவ் overscroll-behavior இன் நடத்தையை முழுமையாகப் பிரதிபலிக்காது என்பதை நினைவில் கொள்ளுங்கள்.

குறியீடு மற்றும் உலகளாவிய சூழலுடன் எடுத்துக்காட்டுகள்

எடுத்துக்காட்டு 1: ஒரு ஸ்க்ரோலிங் செய்தி டிக்கரில் பன்மொழி ஆதரவு

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

<div class="news-ticker">
  <ul>
    <li><span lang="en">Breaking News: Global Stock Market Update</span></li>
    <li><span lang="fr">Dernières Nouvelles: Mise à Jour du Marché Boursier Mondial</span></li>
    <li><span lang="ja">速報：世界の株式市場の最新情報</span></li>
    <!-- More headlines in different languages -->
  </ul>
</div>

<style>
.news-ticker {
  overflow-x: auto;
  overscroll-behavior-x: contain; /* மொபைலில் தற்செயலான பின்/முன் செல்வதைத் தடுக்கிறது */
  white-space: nowrap;
}

.news-ticker ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-block;
  animation: ticker 20s linear infinite;
}

.news-ticker li {
  display: inline-block;
  margin-right: 20px;
}

@keyframes ticker {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
</style>

.news-ticker உறுப்புக்கு overscroll-behavior-x: contain ஐப் பயன்படுத்துவதன் மூலம், காட்டப்படும் மொழியைப் பொருட்படுத்தாமல், மொபைல் சாதனங்களில் உலாவியின் பின்/முன் வழிசெலுத்தலை டிக்கர் தற்செயலாகத் தூண்டுவதைத் தடுக்கிறீர்கள்.

எடுத்துக்காட்டு 2: பெரிதாக்கக்கூடிய படங்களுடன் கூடிய சர்வதேச தயாரிப்பு κατάλογος

பெரிதாக்கக்கூடிய படங்களைக் கொண்ட ஒரு தயாரிப்பு κατάλογος இடம்பெற்றுள்ள ஒரு இ-காமர்ஸ் வலைத்தளத்தைக் கவனியுங்கள். பயனர்கள் κατάλογοςக்குள் படங்களை பெரிதாக்கும்போது கீழே உள்ள பக்கம் ஸ்க்ரோல் செய்வதைத் தடுக்க விரும்புகிறீர்கள்.

<div class="product-catalog">
  <div class="product">
    <img src="product1.jpg" alt="Product Image" class="zoomable-image">
  </div>
  <div class="product">
    <img src="product2.jpg" alt="Product Image" class="zoomable-image">
  </div>
  <!-- More products -->
</div>

<style>
.product-catalog {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.product {
  width: 300px;
  margin: 20px;
}

.zoomable-image {
  width: 100%;
  cursor: zoom-in;
}

.zoomable-image.zoomed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-color: rgba(0, 0, 0, 0.8);
  cursor: zoom-out;
  overscroll-behavior: contain; /* கீழே உள்ள பக்கம் ஸ்க்ரோல் செய்வதைத் தடுக்கிறது */
}
</style>

<script>
const images = document.querySelectorAll('.zoomable-image');

images.forEach(image => {
  image.addEventListener('click', () => {
    image.classList.toggle('zoomed');
  });
});
</script>

இந்த எடுத்துக்காட்டில், ஒரு பயனர் .zoomable-image ஐக் கிளிக் செய்யும்போது, அது position: fixed உடன் ஒரு பெரிதாக்கப்பட்ட நிலைக்கு மாறுகிறது, முழு வ்யூபோர்ட்டையும் உள்ளடக்கியது. overscroll-behavior: contain பண்பு பெரிதாக்கப்பட்ட படத்திற்குப் பயன்படுத்தப்படுகிறது, படம் பெரிதாக்கப்பட்டிருக்கும்போது கீழே உள்ள தயாரிப்பு κατάλογος ஸ்க்ரோல் செய்வதைத் தடுக்கிறது.

முடிவுரை

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

MLOG