स्क्रोल खत्म होने तक काम को रोकें

वेब पर स्क्रोल करने की सुविधा आसान और रिस्पॉन्सिव होनी चाहिए. स्क्रोल करने के दौरान, ज़्यादा डेटा वाले टास्क पूरे करने से मुख्य थ्रेड पर लोड बढ़ सकता है. जैसे, लेआउट को फिर से कैलकुलेट करना, आंकड़ों के डेटा बीकन को ट्रैक करना या डाइनैमिक डीओएम अपडेट करना. इससे फ़्रेम ड्रॉप हो सकते हैं और लेआउट थ्रैशिंग हो सकती है.

पहले, डेवलपर setTimeout() का इस्तेमाल करके scroll इवेंट को डिबाउंस करते थे, ताकि यह अनुमान लगाया जा सके कि स्क्रोल कब खत्म हुआ. हालांकि, ये डिबाउंस किए गए फ़ंक्शन भरोसेमंद नहीं होते. जब उपयोगकर्ता स्क्रोल कर रहा हो, तब भी ये ट्रिगर हो सकते हैं.

scrollend इवेंट, भरोसेमंद और परफ़ॉर्मेंस पर आधारित समाधान उपलब्ध कराता है. ब्राउज़र, scrollend इवेंट को ठीक उसी समय ट्रिगर करता है, जब स्क्रोल करना बंद हो जाता है, सभी ट्रांज़िशन खत्म हो जाते हैं, और टच जेस्चर को रिलीज़ कर दिया जाता है.

इन्हें कैसे लागू करें

डिफ़र-वर्क पैटर्न लागू करने के लिए:

1. स्क्रोल किया जा सकने वाला कंटेनर सेट अप करना: overflow: auto या overflow: scroll का इस्तेमाल करके कंटेनर बनाएं.
2. scroll इवेंट को मॉनिटर करना: इस लिसनर का इस्तेमाल सिर्फ़ बुनियादी डाइनैमिक मेट्रिक या जानकारी देने वाले लेआउट की स्टाइलिंग के लिए करें. यहां ज़्यादा मेहनत वाला काम न करें.
3. scrollend इवेंट के लिए सुनें: स्क्रोल कंटेनर या दस्तावेज़ पर scrollend कॉलबैक रजिस्टर करें.
4. कॉलबैक में ज़्यादा रिसॉर्स खर्च करने वाले काम करना: यहां लगातार अपडेट होने वाली जानकारी फ़ेच करना या बड़े डीओएम लेआउट ट्रिगर करना सुरक्षित होता है.

कोड का उदाहरण

.scroll-container {
  height: 300px;
  overflow-y: auto;
}

const scroller = document.querySelector('.scroll-container');

// 1. Informative feedback during scroll
scroller.addEventListener('scroll', () => {
  // Avoid dynamic heavier data updates here
  console.log('Scrolling dynamically... updates deferred');
});

// 2. Safe callback when scrolling rests
scroller.addEventListener('scrollend', () => {
  // Run layout recalculations or analytical beacons updates here
  const currentVisibleSection = findMostVisibleSection(scroller);
  fetchAdditionalData(currentVisibleSection);
});

रणनीति को लागू करने के तरीके और सबसे सही तरीके

• ज़रूर करें: लेआउट डेटा बीकन को ट्रिगर करते समय या डाइनैमिक तौर पर नया कॉन्टेंट लेआउट फ़ेच करते समय, डिबाउंस किए गए scroll इवेंट के बजाय scrollend का इस्तेमाल करें.
• ज़रूर करें: अगर आपको कैरसेल या टेस्टिमोनियल गैलरी स्लाइड बनानी हैं, तो इसे scrollSnapChange या scrollSnapChanging स्नैप इंटरैक्शन के साथ जोड़ें.
• डाइनैमिक विज़ुअल स्क्रोल कॉलबैक में, लेआउट पर निर्भर डाइनैमिक अपडेट को बंडल न करें.
• ज़रूर करें: ध्यान रखें कि विज़ुअल व्यूपोर्ट को ज़ूम और स्क्रोल करने से, scrollend इवेंट सही तरीके से ट्रिगर हो.

फ़ॉलबैक रणनीति

काम न करने वाले ब्राउज़र के लिए, कस्टम scrollend इवेंट भेजने के लिए, setTimeout के साथ डिबाउंस किए गए scroll इवेंट पर वापस जाएं.

function initializeDemo() {
  const scroller = document.querySelector('#scroller');
  scroller.addEventListener('scrollend', () => {
    // Safe execution
  });
}

if ('onscrollend' in window) {
  initializeDemo();
} else {
  initializeDemo();
  const scroller = document.querySelector('#scroller');
  scroller.addEventListener('scroll', () => {
    clearTimeout(window.scrollendtimer);
    window.scrollendtimer = setTimeout(() => {
      scroller.dispatchEvent(new CustomEvent('scrollend'));
    }, 100);
  });
}