CSS ഓവർസ്‌ക്രോൾ ബിഹേവിയർ: മികച്ച ഉപയോക്തൃ അനുഭവത്തിനായി സ്ക്രോൾ ബൗണ്ടറി നിയന്ത്രിക്കുന്നതിൽ വൈദഗ്ദ്ധ്യം നേടാം

ആധുനിക വെബിൽ, സുഗമവും അവബോധജന്യവുമായ ഉപയോക്തൃ അനുഭവങ്ങൾ സൃഷ്ടിക്കുന്നത് വളരെ പ്രധാനമാണ്. ഇതിന്റെ ഒരു നിർണായക വശം, സ്ക്രോളിംഗ് എങ്ങനെ പ്രവർത്തിക്കുന്നു എന്ന് കൈകാര്യം ചെയ്യുക എന്നതാണ്, പ്രത്യേകിച്ചും ഉപയോക്താക്കൾ സ്ക്രോൾ ചെയ്യാവുന്ന ഇടങ്ങളുടെ അതിരുകളിൽ എത്തുമ്പോൾ. ഇവിടെയാണ് overscroll-behavior എന്ന CSS പ്രോപ്പർട്ടി പ്രസക്തമാകുന്നത്. ഈ സമഗ്രമായ ഗൈഡ് overscroll-behavior-നെക്കുറിച്ച് വിശദമായി പര്യവേക്ഷണം ചെയ്യും, മികച്ച ഉപയോക്തൃ ഇടപെടൽ കൈവരിക്കുന്നതിനുള്ള അതിന്റെ പ്രോപ്പർട്ടികൾ, ഉപയോഗങ്ങൾ, മികച്ച രീതികൾ എന്നിവയെല്ലാം ഇതിൽ ഉൾക്കൊള്ളുന്നു.

എന്താണ് ഓവർസ്ക്രോൾ ബിഹേവിയർ?

ഒരു എലമെന്റിന്റെ (ഉദാഹരണത്തിന്, ഒരു സ്ക്രോളിംഗ് കണ്ടെയ്നർ അല്ലെങ്കിൽ ഡോക്യുമെന്റ് തന്നെ) സ്ക്രോൾ അതിർത്തിയിൽ എത്തുമ്പോൾ എന്ത് സംഭവിക്കണമെന്ന് നിയന്ത്രിക്കുന്ന ഒരു CSS പ്രോപ്പർട്ടിയാണ് overscroll-behavior. സാധാരണയായി, ഒരു ഉപയോക്താവ് സ്ക്രോൾ ചെയ്യാവുന്ന ഒരു ഏരിയയുടെ മുകളിലോ താഴെയോ സ്ക്രോൾ ചെയ്യുമ്പോൾ, ബ്രൗസർ പേജ് റീഫ്രഷ് ചെയ്യുക (മൊബൈൽ ഉപകരണങ്ങളിൽ) അല്ലെങ്കിൽ അടിയിലുള്ള ഉള്ളടക്കം സ്ക്രോൾ ചെയ്യുക പോലുള്ള പ്രവർത്തനങ്ങൾ ട്രിഗർ ചെയ്യുന്നു. overscroll-behavior ഡെവലപ്പർമാർക്ക് ഈ സ്വഭാവം ഇഷ്ടാനുസൃതമാക്കാൻ അനുവദിക്കുന്നു, ഇത് അനാവശ്യമായ പാർശ്വഫലങ്ങൾ തടയുകയും കൂടുതൽ തടസ്സമില്ലാത്ത അനുഭവം സൃഷ്ടിക്കുകയും ചെയ്യുന്നു.

പ്രോപ്പർട്ടികൾ മനസ്സിലാക്കാം

overscroll-behavior പ്രോപ്പർട്ടി മൂന്ന് പ്രധാന മൂല്യങ്ങൾ സ്വീകരിക്കുന്നു:

• auto: ഇതാണ് ഡിഫോൾട്ട് സ്വഭാവം. ഇത് ബ്രൗസറിനെ സാധാരണഗതിയിൽ ഓവർസ്‌ക്രോൾ പ്രവർത്തനങ്ങൾ കൈകാര്യം ചെയ്യാൻ അനുവദിക്കുന്നു (ഉദാഹരണത്തിന്, സ്ക്രോൾ ചെയിനിംഗ് അല്ലെങ്കിൽ റീഫ്രഷ്).
• contain: ഈ മൂല്യം സ്ക്രോളിനെ അതിന്റെ മുകളിലുള്ള എലമെന്റുകളിലേക്ക് വ്യാപിക്കുന്നത് തടയുന്നു. ഇത് സ്ക്രോളിനെ ഫലപ്രദമായി ആ എലമെന്റിനുള്ളിൽ "ഒതുക്കുന്നു", സ്ക്രോൾ ചെയിനിംഗും മറ്റ് ഡിഫോൾട്ട് ഓവർസ്‌ക്രോൾ ഇഫക്റ്റുകളും തടയുന്നു.
• none: ഈ മൂല്യം ഏതൊരു ഓവർസ്‌ക്രോൾ സ്വഭാവത്തെയും പൂർണ്ണമായും പ്രവർത്തനരഹിതമാക്കുന്നു. സ്ക്രോൾ ചെയിനിംഗ് ഇല്ല, റീഫ്രഷ് ഇഫക്റ്റുകൾ ഇല്ല – സ്ക്രോൾ നിർദ്ദിഷ്ട എലമെന്റിൽ കർശനമായി പരിമിതപ്പെടുത്തിയിരിക്കുന്നു.

കൂടാതെ, താഴെ പറയുന്ന സബ്-പ്രോപ്പർട്ടികൾ ഉപയോഗിച്ച് overscroll-behavior നിർദ്ദിഷ്‌ട അക്ഷങ്ങളിൽ (axes) പ്രയോഗിക്കാവുന്നതാണ്:

• overscroll-behavior-x: തിരശ്ചീന അക്ഷത്തിലെ (horizontal axis) ഓവർസ്ക്രോൾ സ്വഭാവം നിയന്ത്രിക്കുന്നു.
• overscroll-behavior-y: ലംബമായ അക്ഷത്തിലെ (vertical axis) ഓവർസ്ക്രോൾ സ്വഭാവം നിയന്ത്രിക്കുന്നു.

ഉദാഹരണത്തിന്:

.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. സ്ക്രോൾ ചെയ്യാവുന്ന ഭാഗങ്ങളിൽ പ്രവേശനക്ഷമത മെച്ചപ്പെടുത്തുന്നു

സ്ക്രോൾ ചെയ്യാവുന്ന ഭാഗങ്ങൾ നടപ്പിലാക്കുമ്പോൾ, പ്രവേശനക്ഷമത (accessibility) പരിഗണിക്കേണ്ടത് പ്രധാനമാണ്. overscroll-behavior പ്രധാനമായും വിഷ്വൽ ഇടപെടലുകളെയാണ് ബാധിക്കുന്നതെങ്കിലും, അപ്രതീക്ഷിതമായ പെരുമാറ്റം തടയുന്നതിലൂടെയും വിവിധ ഉപകരണങ്ങളിലും ബ്രൗസറുകളിലും സ്ഥിരമായ ഉപയോക്തൃ അനുഭവം ഉറപ്പാക്കുന്നതിലൂടെയും ഇത് പരോക്ഷമായി പ്രവേശനക്ഷമതയെ സ്വാധീനിക്കും.

സഹായക സാങ്കേതികവിദ്യകൾക്ക് വിവരങ്ങൾ നൽകുന്നതിന് സ്ക്രോൾ ചെയ്യാവുന്ന ഭാഗങ്ങൾക്ക് ഉചിതമായ ARIA ആട്രിബ്യൂട്ടുകൾ (ഉദാ. role="region", aria-label) ഉണ്ടെന്ന് ഉറപ്പാക്കുക. സ്ക്രോളിംഗ് സ്വഭാവം പ്രവേശനക്ഷമവും പ്രവചിക്കാവുന്നതുമാണോയെന്ന് പരിശോധിക്കാൻ സ്ക്രീൻ റീഡറുകൾ ഉപയോഗിച്ച് നിങ്ങളുടെ കോഡ് പരീക്ഷിക്കുക.

മികച്ച രീതികളും പരിഗണനകളും

overscroll-behavior ഉപയോഗിക്കുമ്പോൾ, ഇനിപ്പറയുന്ന മികച്ച രീതികളും പരിഗണനകളും മനസ്സിൽ വയ്ക്കുക:

• കൃത്യമായി പരിശോധിക്കുക: നിങ്ങളുടെ കോഡ് വിവിധ ഉപകരണങ്ങളിലും ബ്രൗസറുകളിലും പരിശോധിച്ച് സ്ഥിരമായ പ്രവർത്തനം ഉറപ്പാക്കുക. overscroll-behavior വിവിധ സ്ക്രോളിംഗ് മെക്കാനിസങ്ങളുമായി (ഉദാ. മൗസ് വീൽ, ടച്ച് ജെസ്റ്ററുകൾ, കീബോർഡ് നാവിഗേഷൻ) എങ്ങനെ ഇടപഴകുന്നു എന്നതിൽ പ്രത്യേക ശ്രദ്ധ നൽകുക.
• പ്രവേശനക്ഷമത പരിഗണിക്കുക: നേരത്തെ സൂചിപ്പിച്ചതുപോലെ, പ്രവേശനക്ഷമത നിർണായകമാണ്. നിങ്ങളുടെ സ്ക്രോൾ ചെയ്യാവുന്ന ഭാഗങ്ങൾ ശരിയായി ലേബൽ ചെയ്തിട്ടുണ്ടെന്നും വൈകല്യമുള്ള ഉപയോക്താക്കൾക്ക് அணுகാവുന്നതാണെന്നും ഉറപ്പാക്കുക.
• അമിതമായി ഉപയോഗിക്കുന്നത് ഒഴിവാക്കുക: overscroll-behavior സഹായകമാകുമെങ്കിലും, അത് അമിതമായി ഉപയോഗിക്കുന്നത് ഒഴിവാക്കുക. ചില സന്ദർഭങ്ങളിൽ, ഡിഫോൾട്ട് ബ്രൗസർ സ്വഭാവം തികച്ചും സ്വീകാര്യമായിരിക്കാം അല്ലെങ്കിൽ ഉപയോക്താക്കൾക്ക് കൂടുതൽ ഇഷ്ടപ്പെട്ടേക്കാം.
• സ്പെസിഫിസിറ്റി ശ്രദ്ധയോടെ ഉപയോഗിക്കുക: overscroll-behavior പ്രയോഗിക്കുമ്പോൾ CSS സ്പെസിഫിസിറ്റിയെക്കുറിച്ച് ശ്രദ്ധിക്കുക. നിങ്ങളുടെ സ്റ്റൈലുകൾ കൂടുതൽ സ്പെസിഫിക് ആയ നിയമങ്ങളാൽ മറികടക്കപ്പെടുന്നില്ലെന്ന് ഉറപ്പാക്കുക.
• ഫീഡ്‌ബാക്ക് നൽകുക: ഡിഫോൾട്ട് ഓവർസ്‌ക്രോൾ ഇഫക്റ്റുകൾ പ്രവർത്തനരഹിതമാക്കുമ്പോൾ, സ്ക്രോൾ അതിരുകൾ സൂചിപ്പിക്കുന്നതിന് ബദൽ ഫീഡ്‌ബാക്ക് മെക്കാനിസങ്ങൾ നൽകുന്നത് പരിഗണിക്കുക (ഉദാ. കസ്റ്റം സ്ക്രോൾ ഇൻഡിക്കേറ്ററുകൾ, ആനിമേഷനുകൾ).
• മൊബൈൽ പരിഗണനകൾ: മൊബൈൽ ഉപകരണങ്ങൾക്ക് പലപ്പോഴും തനതായ സ്ക്രോളിംഗ് സ്വഭാവങ്ങളുണ്ട്. സുഗമവും അവബോധജന്യവുമായ അനുഭവം ഉറപ്പാക്കാൻ യഥാർത്ഥ മൊബൈൽ ഉപകരണങ്ങളിൽ എല്ലായ്പ്പോഴും നിങ്ങളുടെ കോഡ് പരീക്ഷിക്കുക.
• പ്രകടനം: overscroll-behavior ന് സാധാരണയായി കാര്യമായ പ്രകടന സ്വാധീനമില്ലെങ്കിലും, നിങ്ങളുടെ സ്ക്രോൾ ചെയ്യാവുന്ന ഭാഗങ്ങളുടെ മൊത്തത്തിലുള്ള പ്രകടനത്തെക്കുറിച്ച് ശ്രദ്ധിക്കുക, പ്രത്യേകിച്ചും വലിയ അളവിലുള്ള ഉള്ളടക്കം കൈകാര്യം ചെയ്യുമ്പോൾ. സുഗമമായ സ്ക്രോളിംഗ് ഉറപ്പാക്കാൻ നിങ്ങളുടെ കോഡും അസറ്റുകളും ഒപ്റ്റിമൈസ് ചെയ്യുക.

ബ്രൗസർ കോംപാറ്റിബിലിറ്റി

Chrome, Firefox, Safari, Edge എന്നിവയുൾപ്പെടെയുള്ള ആധുനിക ബ്രൗസറുകളിൽ overscroll-behavior-ന് മികച്ച പിന്തുണയുണ്ട്. എന്നിരുന്നാലും, നിങ്ങളുടെ ഉപയോക്താക്കൾക്ക് നിങ്ങളുടെ കോഡ് ശരിയായി അനുഭവിക്കാൻ കഴിയുന്നുവെന്ന് ഉറപ്പാക്കാൻ Can I Use (caniuse.com) പോലുള്ള വെബ്സൈറ്റുകളിലെ ഏറ്റവും പുതിയ ബ്രൗസർ കോംപാറ്റിബിലിറ്റി വിവരങ്ങൾ പരിശോധിക്കുന്നത് എല്ലായ്പ്പോഴും നല്ലതാണ്.

overscroll-behavior പിന്തുണയ്ക്കാത്ത പഴയ ബ്രൗസറുകൾക്കായി, സമാനമായ ഫലങ്ങൾ നേടുന്നതിന് നിങ്ങൾക്ക് പോളിഫില്ലുകളോ ബദൽ സാങ്കേതികതകളോ ഉപയോഗിക്കേണ്ടി വന്നേക്കാം. എന്നിരുന്നാലും, ഈ സമീപനങ്ങൾ നേറ്റീവ് overscroll-behavior-ന്റെ സ്വഭാവത്തെ പൂർണ്ണമായി പകർത്തിയേക്കില്ലെന്ന് ഓർമ്മിക്കുക.

കോഡും ഗ്ലോബൽ കോൺടെക്സ്റ്റും ഉള്ള ഉദാഹരണങ്ങൾ

ഉദാഹരണം 1: സ്ക്രോൾ ചെയ്യുന്ന ന്യൂസ് ടിക്കറിൽ ബഹുഭാഷാ പിന്തുണ

ഒന്നിലധികം ഭാഷകളിൽ തലക്കെട്ടുകൾ പ്രദർശിപ്പിക്കുന്ന ഒരു വാർത്താ ടിക്കർ സങ്കൽപ്പിക്കുക. ഉപയോഗിക്കുന്ന ഭാഷ പരിഗണിക്കാതെ സുഗമമായ സ്ക്രോളിംഗ് ഉറപ്പാക്കാനും മൊബൈലിൽ അപ്രതീക്ഷിതമായ പേജ് റീഫ്രഷുകൾ തടയാനും നിങ്ങൾ ആഗ്രഹിക്കുന്നു.

<div class="news-ticker">
  <ul>
    <li><span lang="en">ബ്രേക്കിംഗ് ന്യൂസ്: ആഗോള സ്റ്റോക്ക് മാർക്കറ്റ് അപ്ഡേറ്റ്</span></li>
    <li><span lang="fr">ഏറ്റവും പുതിയ വാർത്ത: ആഗോള സ്റ്റോക്ക് മാർക്കറ്റ് അപ്‌ഡേറ്റ്</span></li>
    <li><span lang="ja">ബ്രേക്കിംഗ് ന്യൂസ്: ലോക സ്റ്റോക്ക് മാർക്കറ്റുകളെക്കുറിച്ചുള്ള ഏറ്റവും പുതിയ വിവരങ്ങൾ</span></li>
    <!-- വിവിധ ഭാഷകളിലുള്ള കൂടുതൽ തലക്കെട്ടുകൾ -->
  </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="ഉൽപ്പന്നത്തിൻ്റെ ചിത്രം" class="zoomable-image">
  </div>
  <div class="product">
    <img src="product2.jpg" alt="ഉൽപ്പന്നത്തിൻ്റെ ചിത്രം" class="zoomable-image">
  </div>
  <!-- കൂടുതൽ ഉൽപ്പന്നങ്ങൾ -->
</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 ഫലപ്രദമായി നടപ്പിലാക്കുന്നതിന് നിയന്ത്രണവും ഉപയോക്തൃ പ്രതീക്ഷകളും തമ്മിലുള്ള ഒരു സന്തുലിതാവസ്ഥ ആവശ്യമാണ്, ഇത് സ്വാഭാവിക ഇടപെടലുകളെ തടസ്സപ്പെടുത്താതെ ഉപയോഗക്ഷമത വർദ്ധിപ്പിക്കുന്നു.

കൂടുതൽ പഠിക്കാൻ

• MDN വെബ് ഡോക്സ്: overscroll-behavior
• Can I Use: overscroll-behavior