സിഎസ്എസ് സ്ക്രോൾ എൻഡ്: സ്ക്രോൾ പൂർത്തീകരണം കണ്ടെത്തലും കൈകാര്യം ചെയ്യലും

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

സ്ക്രോൾ എൻഡ് കണ്ടെത്തേണ്ടതിന്റെ ആവശ്യകത മനസ്സിലാക്കാം

ഒരു ഉപയോക്താവ് സ്ക്രോളിംഗ് പൂർത്തിയാക്കിയെന്ന് അറിയേണ്ടത് എന്തുകൊണ്ട് പ്രധാനമാണ്? അതിനുള്ള ചില കാരണങ്ങൾ ഇതാ:

• ഇൻഫിനിറ്റ് സ്ക്രോളിംഗ്: ഉപയോക്താവ് പേജിന്റെ താഴേക്ക് എത്തുമ്പോൾ പുതിയ ഉള്ളടക്കം ലോഡുചെയ്യുന്ന "ഇൻഫിനിറ്റ് സ്ക്രോൾ" എന്ന ജനപ്രിയ രീതി നടപ്പിലാക്കാൻ ഇത് സഹായിക്കുന്നു. വ്യക്തമായ പേജിനേഷൻ ആവശ്യമില്ലാതെ തുടർച്ചയായി ഉള്ളടക്കം നൽകുന്നതിലൂടെ ഇത് ഉപയോക്തൃ ഇടപെടൽ വർദ്ധിപ്പിക്കുന്നു. ലിങ്ക്ഡ്ഇൻ പോലുള്ള സോഷ്യൽ മീഡിയ ഫീഡുകളോ ലോകമെമ്പാടുമുള്ള വാർത്താ വെബ്സൈറ്റുകളോ ഇതിന് ഉദാഹരണമാണ്.
• ലേസി ലോഡിംഗ്: ചിത്രങ്ങളും മറ്റ് റിസോഴ്‌സുകളും വ്യൂപോർട്ടിൽ ദൃശ്യമാകുന്നതിന് തൊട്ടുമുമ്പ് മാത്രം ലോഡ് ചെയ്യുന്നത് വൈകിപ്പിക്കുക. ഇത് പ്രാരംഭ പേജ് ലോഡ് സമയം മെച്ചപ്പെടുത്തുകയും ബാൻഡ്‌വിഡ്ത്ത് ഉപയോഗം കുറയ്ക്കുകയും ചെയ്യുന്നു, പരിമിതമായ ഡാറ്റാ പ്ലാനുകളോ വേഗത കുറഞ്ഞ ഇന്റർനെറ്റ് കണക്ഷനുകളോ ഉള്ള ഉപയോക്താക്കൾക്ക് ഇത് പ്രത്യേകിച്ചും പ്രയോജനകരമാണ്. നിരവധി ഉൽപ്പന്ന ചിത്രങ്ങളുള്ള ഇ-കൊമേഴ്‌സ് വെബ്‌സൈറ്റുകൾ പരിഗണിക്കുക.
• ആനിമേഷനുകളും ഇഫക്റ്റുകളും: ഉപയോക്താവ് പേജിന്റെ നിർദ്ദിഷ്ട ഭാഗങ്ങളിൽ എത്തുമ്പോൾ ആനിമേഷനുകളോ വിഷ്വൽ ഇഫക്റ്റുകളോ പ്രവർത്തനക്ഷമമാക്കുക, ഇത് കൂടുതൽ ആകർഷകമായ ബ്രൗസിംഗ് അനുഭവം സൃഷ്ടിക്കുന്നു. നിങ്ങൾ താഴേക്ക് സ്ക്രോൾ ചെയ്യുമ്പോൾ പ്രോജക്റ്റുകൾ ആനിമേറ്റ് ചെയ്ത് വരുന്ന ഒരു പോർട്ട്‌ഫോളിയോ വെബ്സൈറ്റ് സങ്കൽപ്പിക്കുക.
• ഉപയോക്തൃ ഫീഡ്‌ബാക്ക്: ഉപയോക്താവ് ഉള്ളടക്കത്തിന്റെ അവസാനത്തിൽ എത്തുമ്പോൾ "മുകളിലേക്ക് പോകുക" (Back to Top) ബട്ടൺ അല്ലെങ്കിൽ കൂടുതൽ ഉള്ളടക്കം ലോഡുചെയ്യാനില്ലെന്ന് സൂചിപ്പിക്കുന്ന ഒരു സന്ദേശം പോലുള്ള ഫീഡ്‌ബാക്ക് നൽകുക. ഇത് ഉപയോഗക്ഷമത മെച്ചപ്പെടുത്തുകയും ഉപയോക്താവിന്റെ നിരാശ ഒഴിവാക്കുകയും ചെയ്യുന്നു.
• അനലിറ്റിക്സ് ട്രാക്കിംഗ്: ഉപയോക്താക്കൾ ഒരു പേജിൽ എത്ര ദൂരം സ്ക്രോൾ ചെയ്യുന്നുവെന്ന് ട്രാക്ക് ചെയ്യുന്നതിലൂടെ ഉള്ളടക്ക ഇടപഴകലിനെക്കുറിച്ചുള്ള വിവരങ്ങൾ നേടാനും പേജ് ലേഔട്ട് ഒപ്റ്റിമൈസ് ചെയ്യാനും കഴിയും. ഉള്ളടക്ക നിർമ്മാതാക്കൾക്കും വിപണനക്കാർക്കും ഈ ഡാറ്റ വളരെ വിലപ്പെട്ടതാണ്.

സ്ക്രോൾ എൻഡ് കണ്ടെത്തൽ: സാങ്കേതിക വിദ്യകളും കോഡ് ഉദാഹരണങ്ങളും

സ്ക്രോൾ എൻഡ് കണ്ടെത്താൻ നിരവധി മാർഗങ്ങളുണ്ട്, ഓരോന്നിനും അതിൻ്റേതായ ഗുണങ്ങളും ദോഷങ്ങളുമുണ്ട്. സിഎസ്എസ് അടിസ്ഥാനമാക്കിയുള്ളതും ജാവാസ്ക്രിപ്റ്റ് അടിസ്ഥാനമാക്കിയുള്ളതുമായ സമീപനങ്ങൾ നമ്മുക്ക് പരിശോധിക്കാം.

1. ജാവാസ്ക്രിപ്റ്റ് അടിസ്ഥാനമാക്കിയുള്ള സ്ക്രോൾ എൻഡ് കണ്ടെത്തൽ

ഏറ്റവും സാധാരണവും വഴക്കമുള്ളതുമായ സമീപനം, scroll ഇവന്റ് ശ്രദ്ധിക്കുന്നതിനും നിലവിലെ സ്ക്രോൾ പൊസിഷൻ മൊത്തം സ്ക്രോൾ ചെയ്യാവുന്ന ഉയരവുമായി താരതമ്യം ചെയ്യുന്നതിനും ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിക്കുക എന്നതാണ്. പ്രധാന ആശയങ്ങളുടെയും കോഡ് ഉദാഹരണങ്ങളുടെയും ഒരു വിവരണം ഇതാ:

a. scroll ഇവന്റ്

ഒരു എലമെന്റിന്റെ സ്ക്രോൾ സ്ഥാനം മാറുമ്പോഴെല്ലാം scroll ഇവന്റ് പ്രവർത്തനക്ഷമമാകും. നമുക്ക് വിൻഡോയിലേക്കോ (മുഴുവൻ ഡോക്യുമെന്റിനും) അല്ലെങ്കിൽ ഒരു പ്രത്യേക സ്ക്രോൾ ചെയ്യാവുന്ന കണ്ടെയ്നറിലേക്കോ ഒരു ഇവന്റ് ലിസണർ ചേർക്കാൻ കഴിയും.

ഉദാഹരണം:

            window.addEventListener('scroll', function() {
  // Code to execute on scroll
});

            

              
                Copy
              
            
          

b. സ്ക്രോൾ പൊസിഷൻ കണക്കാക്കൽ

ഉപയോക്താവ് സ്ക്രോളിന്റെ അവസാനത്തിൽ എത്തിയോ എന്ന് നിർണ്ണയിക്കാൻ, നിലവിലെ സ്ക്രോൾ പൊസിഷൻ മൊത്തം സ്ക്രോൾ ചെയ്യാവുന്ന ഉയരവുമായി താരതമ്യം ചെയ്യേണ്ടതുണ്ട്. ഈ മൂല്യങ്ങൾ എങ്ങനെ കണക്കാക്കാമെന്ന് നോക്കാം:

• നിലവിലെ സ്ക്രോൾ പൊസിഷൻ: window.scrollY (അല്ലെങ്കിൽ പഴയ ബ്രൗസറുകൾക്ക് document.documentElement.scrollTop)
• വിൻഡോയുടെ ഉയരം: window.innerHeight
• ഡോക്യുമെന്റിന്റെ ഉയരം: document.documentElement.scrollHeight

നിലവിലെ സ്ക്രോൾ പൊസിഷന്റെയും വിൻഡോയുടെ ഉയരത്തിന്റെയും ആകെത്തുക ഡോക്യുമെന്റിന്റെ ഉയരത്തേക്കാൾ കൂടുതലോ തുല്യമോ ആകുമ്പോൾ ഉപയോക്താവ് സ്ക്രോളിന്റെ അവസാനത്തിൽ എത്തിയതായി കണക്കാക്കപ്പെടുന്നു.

c. സമ്പൂർണ്ണ ജാവാസ്ക്രിപ്റ്റ് ഉദാഹരണം

            window.addEventListener('scroll', function() {
  const scrollY = window.scrollY || document.documentElement.scrollTop;
  const windowHeight = window.innerHeight;
  const documentHeight = document.documentElement.scrollHeight;

  if (scrollY + windowHeight >= documentHeight) {
    // User has reached the end of the scroll
    console.log('Scroll end reached!');
    // Add your logic here (e.g., load more content)
  }
});

            

              
                Copy
              
            
          

വിശദീകരണം:

• ഈ കോഡ് വിൻഡോയിലേക്ക് ഒരു scroll ഇവന്റ് ലിസണർ ചേർക്കുന്നു.
• ഇവന്റ് ലിസണറിനുള്ളിൽ, ഇത് നിലവിലെ സ്ക്രോൾ പൊസിഷൻ, വിൻഡോയുടെ ഉയരം, ഡോക്യുമെന്റിന്റെ ഉയരം എന്നിവ കണക്കാക്കുന്നു.
• സ്ക്രോൾ പൊസിഷന്റെയും വിൻഡോയുടെ ഉയരത്തിന്റെയും ആകെത്തുക ഡോക്യുമെന്റിന്റെ ഉയരവുമായി താരതമ്യം ചെയ്തുകൊണ്ട് ഉപയോക്താവ് സ്ക്രോളിന്റെ അവസാനത്തിൽ എത്തിയോ എന്ന് ഇത് പരിശോധിക്കുന്നു.
• ഉപയോക്താവ് അവസാനത്തിൽ എത്തിയിട്ടുണ്ടെങ്കിൽ, അത് കൺസോളിലേക്ക് ഒരു സന്ദേശം ലോഗ് ചെയ്യുകയും നിങ്ങളുടെ ഇഷ്ടാനുസൃത ലോജിക്കിനായി ഒരു സ്ഥലം നൽകുകയും ചെയ്യുന്നു.

d. സ്ക്രോൾ ഇവന്റുകളെ ഡീബൗൺസിംഗ്/ത്രോട്ട്ലിംഗ് ചെയ്യുക

scroll ഇവന്റ് വളരെ വേഗത്തിൽ പ്രവർത്തനക്ഷമമാകും, നിങ്ങളുടെ സ്ക്രോൾ എൻഡ് ഹാൻഡ്‌ലിംഗ് ലോജിക് കമ്പ്യൂട്ടേഷണലായി ചെലവേറിയതാണെങ്കിൽ ഇത് പ്രകടന പ്രശ്‌നങ്ങളിലേക്ക് നയിച്ചേക്കാം. ഇത് ലഘൂകരിക്കുന്നതിന്, നിങ്ങൾക്ക് ഡീബൗൺസിംഗ് അല്ലെങ്കിൽ ത്രോട്ട്ലിംഗ് ടെക്നിക്കുകൾ ഉപയോഗിക്കാം.

ഡീബൗൺസിംഗ്: ഒരു ഫംഗ്‌ഷൻ അവസാനമായി വിളിച്ചതിന് ശേഷം ഒരു നിശ്ചിത സമയം കഴിയുന്നതുവരെ ആ ഫംഗ്‌ഷന്റെ പ്രവർത്തനം വൈകിപ്പിക്കുന്നു.

            function debounce(func, delay) {
  let timeout;
  return function(...args) {
    const context = this;
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(context, args), delay);
  };
}

const handleScroll = () => {
  // Your scroll end handling logic here
  console.log('Scroll end (debounced)');
};

const debouncedHandleScroll = debounce(handleScroll, 250); // Delay of 250ms

window.addEventListener('scroll', debouncedHandleScroll);

            

              
                Copy
              
            
          

ത്രോട്ട്ലിംഗ്: ട്രിഗർ ചെയ്യുന്ന ഇവന്റ് എത്ര തവണ സംഭവിച്ചാലും, ഒരു ഫംഗ്‌ഷൻ കൃത്യമായ ഇടവേളകളിൽ മാത്രം പ്രവർത്തിക്കുന്നുവെന്ന് ഉറപ്പാക്കുന്നു.

            function throttle(func, interval) {
  let lastTime = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastTime >= interval) {
      func.apply(this, args);
      lastTime = now;
    }
  };
}

const handleScroll = () => {
  // Your scroll end handling logic here
  console.log('Scroll end (throttled)');
};

const throttledHandleScroll = throttle(handleScroll, 250); // Interval of 250ms

window.addEventListener('scroll', throttledHandleScroll);

            

              
                Copy
              
            
          

നിങ്ങളുടെ സ്ക്രോൾ എൻഡ് ഹാൻഡ്‌ലിംഗ് ലോജിക്കിന്റെ നിർദ്ദിഷ്ട ആവശ്യകതകളെ അടിസ്ഥാനമാക്കി നിങ്ങളുടെ ആവശ്യങ്ങൾക്ക് ഏറ്റവും അനുയോജ്യമായ ഡീബൗൺസിംഗ് അല്ലെങ്കിൽ ത്രോട്ട്ലിംഗ് ടെക്നിക് തിരഞ്ഞെടുക്കുക.

2. സിഎസ്എസ് അടിസ്ഥാനമാക്കിയുള്ള സ്ക്രോൾ എൻഡ് കണ്ടെത്തൽ (ഇന്റർസെക്ഷൻ ഒബ്സർവർ എപിഐ ഉപയോഗിച്ച്)

സിഎസ്എസ് നേരിട്ട് ഒരു "സ്ക്രോൾ എൻഡ്" ഇവന്റ് നൽകുന്നില്ലെങ്കിലും, സമാനമായ ഒരു പ്രഭാവം നേടുന്നതിന് നമുക്ക് ഇന്റർസെക്ഷൻ ഒബ്സർവർ എപിഐ ഉപയോഗിക്കാം. ഒരു ടാർഗെറ്റ് എലമെന്റും ഒരു ആൻസെസ്റ്റർ എലമെന്റും അല്ലെങ്കിൽ ഡോക്യുമെന്റിന്റെ വ്യൂപോർട്ടുമായുള്ള ഇന്റർസെക്ഷനിലെ മാറ്റങ്ങൾ അസിൻക്രണസായി നിരീക്ഷിക്കാൻ ഈ എപിഐ നിങ്ങളെ അനുവദിക്കുന്നു.

a. ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു

നമ്മൾ ഒരു "സെന്റിനൽ" എലമെന്റ് (ഉദാഹരണത്തിന്, ഒരു സാധാരണ <div>) ഉണ്ടാക്കി സ്ക്രോൾ ചെയ്യാവുന്ന കണ്ടെയ്നറിന്റെ അവസാനത്തിൽ സ്ഥാപിക്കുന്നു. ഇന്റർസെക്ഷൻ ഒബ്സർവർ ഈ സെന്റിനൽ എലമെന്റിനെ നിരീക്ഷിക്കുന്നു. സെന്റിനൽ എലമെന്റ് വ്യൂപോർട്ടിൽ ദൃശ്യമാകുമ്പോൾ (അതായത്, വ്യൂപോർട്ടുമായി ഇന്റർസെക്ട് ചെയ്യുമ്പോൾ), ഉപയോക്താവ് സ്ക്രോളിന്റെ അവസാനത്തിൽ എത്തിയെന്ന് ഇത് സൂചിപ്പിക്കുന്നു.

b. ഉദാഹരണ കോഡ്

എച്ച്ടിഎംഎൽ:

            <div class="scrollable-container">
  <!-- Content -->
  <div id="sentinel"></div>
</div>

            

              
                Copy
              
            
          

സിഎസ്എസ്:

            .scrollable-container {
  overflow: auto;
  height: 300px; /* Adjust as needed */
  position: relative; /* Required for absolute positioning of the sentinel */
}

#sentinel {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px; /* Make it small and invisible */
}

            

              
                Copy
              
            
          

ജാവാസ്ക്രിപ്റ്റ്:

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

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // Sentinel is visible, scroll end reached
      console.log('Scroll end reached (Intersection Observer)!');
      // Add your logic here
      // Disconnect the observer if you only need to trigger once
      // observer.disconnect();
    }
  });
});

observer.observe(sentinel);

            

              
                Copy
              
            
          

വിശദീകരണം:

• എച്ച്ടിഎംഎൽ ഒരു സ്ക്രോൾ ചെയ്യാവുന്ന കണ്ടെയ്നറും താഴെ ഒരു സെന്റിനൽ എലമെന്റും നിർവചിക്കുന്നു.
• സിഎസ്എസ് കണ്ടെയ്നറിനെ സ്ക്രോൾ ചെയ്യാവുന്ന രീതിയിൽ സ്റ്റൈൽ ചെയ്യുകയും സെന്റിനലിനെ താഴെ സ്ഥാപിക്കുകയും ചെയ്യുന്നു.
• ജാവാസ്ക്രിപ്റ്റ് സെന്റിനൽ എലമെന്റിനെ നിരീക്ഷിക്കുന്ന ഒരു ഇന്റർസെക്ഷൻ ഒബ്സർവർ സൃഷ്ടിക്കുന്നു.
• സെന്റിനൽ വ്യൂപോർട്ടുമായി ഇന്റർസെക്ട് ചെയ്യുമ്പോൾ, എൻട്രിയുടെ isIntersecting പ്രോപ്പർട്ടി true ആയി സജ്ജീകരിക്കപ്പെടുന്നു, ഇത് സ്ക്രോൾ എൻഡ് ലോജിക്കിനെ പ്രവർത്തനക്ഷമമാക്കുന്നു.

c. ഇന്റർസെക്ഷൻ ഒബ്സർവർ എപിഐയുടെ പ്രയോജനങ്ങൾ

• പ്രകടനം: ഇന്റർസെക്ഷൻ ഒബ്സർവർ എപിഐ ഉയർന്ന പ്രകടനക്ഷമതയുള്ളതും എലമെന്റ് ദൃശ്യപരത കണ്ടെത്തുന്നതിന് ഒപ്റ്റിമൈസ് ചെയ്തതുമാണ്.
• അസിൻക്രണസ്: ഇത് അസിൻക്രണസായി പ്രവർത്തിക്കുന്നു, മെയിൻ ത്രെഡ് ബ്ലോക്ക് ചെയ്യുന്നത് ഒഴിവാക്കുകയും സുഗമമായ ഉപയോക്തൃ അനുഭവം ഉറപ്പാക്കുകയും ചെയ്യുന്നു.
• ഡിക്ലറേറ്റീവ്: ജാവാസ്ക്രിപ്റ്റിൽ സ്ക്രോൾ പൊസിഷനുകൾ നേരിട്ട് കണക്കാക്കുന്നതിനേക്കാൾ, സ്ക്രോൾ എൻഡ് കണ്ടെത്താൻ ഇത് കൂടുതൽ ഡിക്ലറേറ്റീവ് ആയ ഒരു മാർഗ്ഗം നൽകുന്നു.

3. സിഎസ്എസ് overscroll-behavior (പരിമിതമായ സ്ക്രോൾ എൻഡ് നിയന്ത്രണം)

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

ഉദാഹരണം:

            .scrollable-container {
  overflow: auto;
  overscroll-behavior: contain; /* Prevents scroll chaining */
}

            

              
                Copy
              
            
          

overscroll-behavior മൂല്യങ്ങൾ:

• auto: സാധാരണ സ്വഭാവം; സ്ക്രോൾ ചെയിനിംഗ് സംഭവിക്കുന്നു.
• contain: പാരന്റ് എലമെന്റുകളിലേക്ക് സ്ക്രോൾ ചെയിനിംഗ് തടയുന്നു.
• none: എല്ലാ സ്ക്രോൾ ചെയിനിംഗും (റിഫ്രഷ് ജെസ്റ്ററുകൾ ഉൾപ്പെടെ) തടയുന്നു.

ബ്രൗസർ അനുയോജ്യത

സ്ക്രോൾ എൻഡ് കണ്ടെത്തൽ നടപ്പിലാക്കുമ്പോൾ ബ്രൗസർ അനുയോജ്യത ഒരു പ്രധാന പരിഗണനയാണ്.

• ജാവാസ്ക്രിപ്റ്റ് സ്ക്രോൾ പ്രോപ്പർട്ടികൾ: window.scrollY, document.documentElement.scrollTop, window.innerHeight, document.documentElement.scrollHeight എന്നിവ ആധുനിക ബ്രൗസറുകളിൽ വ്യാപകമായി പിന്തുണയ്ക്കുന്നു. പഴയ ബ്രൗസറുകൾക്ക്, നിങ്ങൾക്ക് വെണ്ടർ പ്രിഫിക്സുകളോ പോളിഫില്ലുകളോ ഉപയോഗിക്കേണ്ടി വന്നേക്കാം.
• ഇന്റർസെക്ഷൻ ഒബ്സർവർ എപിഐ: ഇന്റർസെക്ഷൻ ഒബ്സർവർ എപിഐക്ക് മികച്ച ബ്രൗസർ പിന്തുണയുണ്ട്, എന്നാൽ പഴയ ബ്രൗസറുകൾക്ക് (ഉദാഹരണത്തിന്, ഇന്റർനെറ്റ് എക്സ്പ്ലോറർ) നിങ്ങൾ ഒരു പോളിഫിൽ ഉപയോഗിക്കേണ്ടി വന്നേക്കാം. നിങ്ങൾക്ക് polyfill.io അല്ലെങ്കിൽ npm-ൽ പോളിഫില്ലുകൾ കണ്ടെത്താൻ കഴിയും.
• overscroll-behavior: ഈ പ്രോപ്പർട്ടിക്ക് ആധുനിക ബ്രൗസറുകളിൽ നല്ല പിന്തുണയുണ്ട്, എന്നാൽ ഇന്റർനെറ്റ് എക്സ്പ്ലോററിന്റെ പഴയ പതിപ്പുകൾ ഇത് പിന്തുണയ്ക്കുന്നില്ല.

സ്ഥിരവും വിശ്വസനീയവുമായ ഉപയോക്തൃ അനുഭവം ഉറപ്പാക്കാൻ നിങ്ങളുടെ കോഡ് എല്ലായ്പ്പോഴും വ്യത്യസ്ത ബ്രൗസറുകളിലും ഉപകരണങ്ങളിലും സമഗ്രമായി പരിശോധിക്കുക.

പ്രായോഗിക ഉദാഹരണങ്ങളും ഉപയോഗ സാഹചര്യങ്ങളും

1. ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് ഇൻഫിനിറ്റ് സ്ക്രോളിംഗ്

ഉപയോക്താവ് പേജിന്റെ അവസാനത്തിൽ എത്തുമ്പോൾ കൂടുതൽ ഉള്ളടക്കം ലോഡുചെയ്യുന്നതിന് ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് ഇൻഫിനിറ്റ് സ്ക്രോളിംഗ് എങ്ങനെ നടപ്പിലാക്കാമെന്ന് ഈ ഉദാഹരണം കാണിക്കുന്നു.

            <div id="content">
  <!-- Initial content -->
</div>

<div id="loading" style="display: none;">Loading...
</div>

<script>
  const contentElement = document.getElementById('content');
  const loadingElement = document.getElementById('loading');
  let isLoading = false;
  let page = 1; // Start from page 1

  function loadMoreContent() {
    if (isLoading) return;
    isLoading = true;
    loadingElement.style.display = 'block';

    // Simulate loading content from an API
    setTimeout(() => {
      // Replace this with your actual API call
      const newContent = generateContent(page);
      contentElement.innerHTML += newContent;
      page++;
      isLoading = false;
      loadingElement.style.display = 'none';
    }, 1000); // Simulate API delay
  }

  function generateContent(page) {
    let content = '';
    for (let i = 0; i < 10; i++) {
      content += `<p>Content item ${page * 10 + i + 1}</p>`;
    }
    return content;
  }

  window.addEventListener('scroll', function() {
    const scrollY = window.scrollY || document.documentElement.scrollTop;
    const windowHeight = window.innerHeight;
    const documentHeight = document.documentElement.scrollHeight;

    if (scrollY + windowHeight >= documentHeight - 200) { // Adjusted threshold
      loadMoreContent();
    }
  });

  // Initial load
  loadMoreContent();
</script>

            

              
                Copy
              
            
          

വിശദീകരണം:

• ഉള്ളടക്കം സൂക്ഷിക്കാൻ ഒരു content div-ഉം കൂടുതൽ ഉള്ളടക്കം ലോഡ് ചെയ്യുകയാണെന്ന് സൂചിപ്പിക്കാൻ ഒരു loading div-ഉം ഈ കോഡ് നിർവചിക്കുന്നു.
• loadMoreContent ഫംഗ്ഷൻ ഒരു എപിഐയിൽ നിന്ന് ഉള്ളടക്കം ലോഡുചെയ്യുന്നത് അനുകരിക്കുന്നു (നിങ്ങൾ ഇത് നിങ്ങളുടെ യഥാർത്ഥ എപിഐ കോൾ ഉപയോഗിച്ച് മാറ്റിസ്ഥാപിക്കണം).
• ഉപയോക്താവ് പേജിന്റെ താഴേക്ക് സ്ക്രോൾ ചെയ്തിട്ടുണ്ടോ എന്ന് scroll ഇവന്റ് ലിസണർ പരിശോധിക്കുന്നു (യഥാർത്ഥ അവസാനത്തിന് അല്പം മുമ്പ് ലോഡിംഗ് ട്രിഗർ ചെയ്യുന്നതിന് ഒരു ത്രെഷോൾഡ് ഉപയോഗിക്കുന്നു).
• ഉപയോക്താവ് താഴേക്ക് സ്ക്രോൾ ചെയ്തിട്ടുണ്ടെങ്കിൽ, കൂടുതൽ ഉള്ളടക്കം ലോഡുചെയ്യാൻ loadMoreContent ഫംഗ്ഷൻ വിളിക്കപ്പെടുന്നു.
• ഒരേ സമയം ഒന്നിലധികം ഉള്ളടക്കം ലോഡിംഗ് അഭ്യർത്ഥനകൾ പ്രവർത്തനക്ഷമമാകുന്നതിൽ നിന്ന് isLoading ഫ്ലാഗ് തടയുന്നു.

2. ഇന്റർസെക്ഷൻ ഒബ്സർവർ എപിഐ ഉപയോഗിച്ച് ചിത്രങ്ങൾ ലേസി ലോഡ് ചെയ്യുക

പേജ് ലോഡ് സമയം മെച്ചപ്പെടുത്തുന്നതിന് ഇന്റർസെക്ഷൻ ഒബ്സർവർ എപിഐ ഉപയോഗിച്ച് ചിത്രങ്ങളുടെ ലേസി ലോഡിംഗ് എങ്ങനെ നടപ്പിലാക്കാമെന്ന് ഈ ഉദാഹരണം കാണിക്കുന്നു.

            <img data-src="image1.jpg" alt="Image 1" class="lazy-load">
<img data-src="image2.jpg" alt="Image 2" class="lazy-load">
<img data-src="image3.jpg" alt="Image 3" class="lazy-load">

<script>
  const lazyLoadImages = document.querySelectorAll('.lazy-load');

  const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        img.classList.remove('lazy-load');
        observer.unobserve(img);
      }
    });
  });

  lazyLoadImages.forEach(img => {
    observer.observe(img);
  });
</script>

            

              
                Copy
              
            
          

വിശദീകരണം:

• യഥാർത്ഥ ചിത്രത്തിന്റെ URL സംഭരിക്കുന്നതിന് എച്ച്ടിഎംഎൽ data-src ആട്രിബ്യൂട്ട് ഉപയോഗിക്കുന്നു. src ആട്രിബ്യൂട്ട് തുടക്കത്തിൽ ശൂന്യമാണ്.
• ജാവാസ്ക്രിപ്റ്റ് lazy-load ക്ലാസുള്ള എല്ലാ ചിത്രങ്ങളെയും തിരഞ്ഞെടുക്കുന്നു.
• ഇന്റർസെക്ഷൻ ഒബ്സർവർ ഓരോ ലേസി-ലോഡഡ് ചിത്രത്തെയും നിരീക്ഷിക്കുന്നു.
• ഒരു ചിത്രം വ്യൂപോർട്ടിൽ ദൃശ്യമാകുമ്പോൾ, അതിന്റെ src ആട്രിബ്യൂട്ട് അതിന്റെ data-src ആട്രിബ്യൂട്ടിന്റെ മൂല്യത്തിലേക്ക് സജ്ജീകരിക്കുന്നു, ഇത് ചിത്രം ലോഡുചെയ്യാൻ പ്രേരിപ്പിക്കുന്നു.
• lazy-load ക്ലാസ് നീക്കം ചെയ്യുകയും ഒബ്സർവർ ചിത്രത്തെ നിരീക്ഷിക്കുന്നത് നിർത്തുകയും ചെയ്യുന്നു.

3. ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് സ്ക്രോൾ എൻഡിൽ ആനിമേഷനുകൾ ട്രിഗർ ചെയ്യുക

ഉപയോക്താവ് പേജിന്റെ അവസാനത്തിൽ എത്തുമ്പോൾ ഒരു ആനിമേഷൻ എങ്ങനെ ട്രിഗർ ചെയ്യാമെന്ന് ഈ ഉദാഹരണം കാണിക്കുന്നു.

            <div id="animated-element" style="opacity: 0; transition: opacity 1s ease-in-out;">
  <h2>You've reached the end!</h2>
  <p>Thanks for reading!</p>
</div>

<script>
  const animatedElement = document.getElementById('animated-element');

  window.addEventListener('scroll', function() {
    const scrollY = window.scrollY || document.documentElement.scrollTop;
    const windowHeight = window.innerHeight;
    const documentHeight = document.documentElement.scrollHeight;

    if (scrollY + windowHeight >= documentHeight) {
      // User has reached the end of the scroll
      animatedElement.style.opacity = 1; // Fade in the element
    }
  });
</script>

            

              
                Copy
              
            
          

വിശദീകരണം:

• തുടക്കത്തിൽ 0 ഒപ്പാസിറ്റിയും ഒപ്പാസിറ്റിക്ക് ഒരു സിഎസ്എസ് ട്രാൻസിഷനും ഉള്ള ഒരു എലമെന്റ് എച്ച്ടിഎംഎൽ നിർവചിക്കുന്നു.
• ജാവാസ്ക്രിപ്റ്റ് scroll ഇവന്റിനായി കാത്തിരിക്കുന്നു.
• ഉപയോക്താവ് സ്ക്രോളിന്റെ അവസാനത്തിൽ എത്തുമ്പോൾ, എലമെന്റിന്റെ ഒപ്പാസിറ്റി 1 ആയി സജ്ജീകരിക്കുന്നു, ഇത് ഫേഡ്-ഇൻ ആനിമേഷൻ പ്രവർത്തനക്ഷമമാക്കുന്നു.

സ്ക്രോൾ എൻഡ് കൈകാര്യം ചെയ്യുന്നതിനുള്ള മികച്ച രീതികൾ

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

ഉപസംഹാരം

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