Scrollend, एक नया JavaScript इवेंट

अपने टाइम आउट फ़ंक्शन को मिटाएं और उनसे जुड़ी गड़बड़ियों को कम करें. आपको इस इवेंट की ज़रूरत है: Scrollend.

Adam Argyle

scrollend इवेंट से पहले, यह पता लगाने का कोई भरोसेमंद तरीका नहीं था कि स्क्रोल पूरा हो गया है. इसका मतलब था कि इवेंट देर से या उपयोगकर्ता की उंगली के चालू होने पर ट्रिगर होंगे स्क्रीन पर अब भी मौजूद था. मुझे यह पता नहीं है कि स्क्रोल ने खत्म हो गई, जिसकी वजह से उपयोगकर्ता को गड़बड़ियां और खराब अनुभव मिला.

document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

setTimeout() की इस रणनीति से यह पता चल सकता है कि 100ms के लिए स्क्रोल करना बंद हो गया है या नहीं. इससे यह स्क्रोल खत्म होने के बजाय, स्क्रोल रोके जाने के इवेंट की तरह लगता है.

scrollend इवेंट के बाद, ब्राउज़र आपके लिए यह मुश्किल आकलन करता है.

document.onscrollend = event => {…}

यह तो बहुत अच्छी बात है. यह सुविधा बिलकुल सही समय पर सही तरीके से काम करती है और काम की स्थितियों से भरपूर है .

इसे आज़माएं!

इवेंट की जानकारी

scrollend इवेंट तब ट्रिगर होता है, जब: - ब्राउज़र अब स्क्रोल को ऐनिमेट या अनुवाद नहीं कर रहा है. - उपयोगकर्ता ने टच छोड़ दिया है. - उपयोगकर्ता के पॉइंटर ने स्क्रोल थंब रिलीज़ किया है. - उपयोगकर्ता का बटन दबाने पर ऐप्लिकेशन को रिलीज़ कर दिया गया है. - फ़्रैगमेंट तक स्क्रोल करने की प्रोसेस पूरी हो गई है. - स्क्रोल स्नैप पूरा हो गया है. - scrollTo() पूरा हो गया है. - उपयोगकर्ता ने विज़ुअल व्यूपोर्ट को स्क्रोल किया है.

scrollend इवेंट तब ट्रिगर नहीं होता, जब: - उपयोगकर्ता के जेस्चर की वजह से स्क्रोल की पोज़िशन में कोई बदलाव नहीं होता (ट्रांसलेशन नहीं होता). - scrollTo() का कोई अनुवाद नहीं मिला.

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

इवेंट का इस्तेमाल करना

स्क्रोल वाले अन्य इवेंट की तरह, लिसनर को भी अलग-अलग तरीकों से रजिस्टर किया जा सकता है.

addEventListener("scrollend", (event) => {
  // scroll ended
});

aScrollingElement.addEventListener("scrollend", (event) => {
  // scroll ended
});

इसके अलावा, इवेंट प्रॉपर्टी का इस्तेमाल करें:

document.onscrollend = (event) => {
  // scroll ended
};

aScrollingElement.onscrollend = (event) => {
  // scroll ended
};

पॉलीफ़िल और प्रोग्रेसिव एन्हैंसमेंट

अगर आपको अभी इस नए इवेंट का इस्तेमाल करना है, तो हमारे लिए यह सबसे सही सलाह है. आप अपनी वर्तमान स्क्रॉल समाप्ति कार्यनीति (अगर आपके पास कोई है) का उपयोग करना जारी रखें और इसके साथ सहायता की जाँच करें:

'onscrollend' in window
// true, if available

ब्राउज़र के इवेंट उपलब्ध कराने पर, यह सही या गलत के तौर पर रिपोर्ट करेगा. के साथ है, तो कोड को ब्रांच में शामिल किया जा सकता है:

if ('onscrollend' in window) {
  document.onscrollend = callback
}
else {
  document.onscroll = event => {
    clearTimeout(window.scrollEndTimer)
    window.scrollEndTimer = setTimeout(callback, 100)
  }
}

यह scrollend इवेंट उपलब्ध होने पर, उसे बेहतर बनाने के लिए एक अच्छी शुरुआत है. मैंने एक ऐसा polyfill (NPM) भी बनाया है जिससे ब्राउज़र बेहतर तरीके से काम करता है. इसे आज़माया जा सकता है:

import {scrollend} from "scrollyfills"

// then use scrollend as if it's existed this whole time
document.onscrollend = callback

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

उपयोग के उदाहरण

स्क्रीन पर स्क्रोल करने के दौरान, ज़्यादा कंप्यूटिंग वाले काम से बचना अच्छा होता है. इससे यह पक्का होता है कि स्क्रीन पर ज़्यादा से ज़्यादा मेमोरी और प्रोसेसिंग का इस्तेमाल किया जा सके, ताकि उपयोगकर्ता को बेहतर अनुभव मिल सके. scrollend इवेंट का इस्तेमाल करने पर, उपयोगकर्ता को कॉल आउट करने और ज़रूरी कार्रवाई करने का सही समय मिलता है, क्योंकि अब स्क्रीन पर स्क्रोल नहीं किया जा रहा है.

scrollend इवेंट का इस्तेमाल, अलग-अलग कार्रवाइयों को ट्रिगर करने के लिए किया जा सकता है. इसका एक सामान्य इस्तेमाल, यूआई एलिमेंट को उस जगह से सिंक करना है जहां स्क्रोल करना बंद किया गया था. जैसे: - डॉट इंडिकेटर के साथ कैरसेल की स्क्रोल पोज़िशन को सिंक करना. - गैलरी आइटम को उसके मेटाडेटा के साथ सिंक करना. - जब उपयोगकर्ता किसी नए टैब पर स्क्रोल करता है, तब डेटा फ़ेच करना.

मान लें कि कोई उपयोगकर्ता किसी ईमेल को स्वाइप करके हटाता है. स्वाइप करने के बाद, उपयोगकर्ता जहां तक स्क्रोल करता है उसके आधार पर कार्रवाई की जा सकती है.

प्रोग्राम के हिसाब से अपने-आप होने वाली प्रोसेस या उपयोगकर्ता के बाद भी इस इवेंट का इस्तेमाल सिंक करने के लिए किया जा सकता है का इस्तेमाल किया जा सकता है.

यहां एक अच्छा उदाहरण दिया गया है, जिसमें ऐरो, बिंदु, और फ़ोकस जैसे कई एलिमेंट को स्क्रोल करने की जगह के हिसाब से अपडेट करना ज़रूरी होता है. देखें कि मैंने YouTube पर यह कैरसेल कैसे बनाया. साथ ही, लाइव डेमो आज़माएं.

इस सुविधा को इंजीनियर करने के लिए मेहदी काज़मी और एपीआई और उसे लागू करने के दिशा-निर्देश देने के लिए रॉबर्ट फ़्लैक को धन्यवाद.