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

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

Adam Argyle

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

पहले

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

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

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

बाद में

document.onscrollend = event => {…}

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

ब्राउज़र सहायता

• 114
• 114
• 109
• x

सोर्स

इसे आज़माएं!

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

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 इवेंट का इस्तेमाल, अलग-अलग कार्रवाइयों को ट्रिगर करने के लिए किया जा सकता है. इस्तेमाल का एक सामान्य उदाहरण यह है कि उससे जुड़े यूज़र इंटरफ़ेस (यूआई) एलिमेंट को उस पोज़िशन से सिंक करना होता है जहां स्क्रोल बंद हो गया था. उदाहरण के लिए: - डॉट इंडिकेटर के साथ कैरसेल की स्क्रोल पोज़िशन को सिंक करना. - गैलरी आइटम को उसके मेटा डेटा के साथ सिंक करना. - उपयोगकर्ता के नए टैब पर स्क्रोल करने के बाद डेटा फ़ेच करना.

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

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

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

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