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 इवेंट को बेहतर तरीके से बेहतर बनाया जा सके उपलब्ध है. यह तरीका भी अपनाया जा सकता है पॉलीफ़िल (NPM) मैंने ऐसा कॉन्टेंट बनाया जो सबसे अच्छा परफ़ॉर्म करता है ब्राउज़र ये काम कर सकता है:

import {scrollend} from "scrollyfills"

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

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

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

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

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

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

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

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

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