jQuery स्क्रॉल () पता लगाता है कि उपयोगकर्ता स्क्रॉल करना कब बंद करता है

Question

इस के साथ ठीक है ..

$(window).scroll(function()
{
    $('.slides_layover').removeClass('showing_layover');
    $('#slides_effect').show();
});

मैं बता सकता हूं कि जब कोई मेरी समझ से स्क्रॉल कर रहा हो। तो इसके साथ मैं यह पता लगाने की कोशिश कर रहा हूं कि जब किसी ने रोका है तो उसे कैसे पकड़ा जाए। उपरोक्त उदाहरण से आप देख सकते हैं कि मैं तत्वों के एक सेट से एक कक्षा को हटा रहा हूं जबकि स्क्रॉलिंग हो रही है। हालाँकि, मैं उस कक्षा को वापस लाना चाहता हूं जब उपयोगकर्ता स्क्रॉल करना बंद कर देता है।

इसका कारण यह है कि मैं एक लेओवर शो होने का इरादा कर रहा हूं, जबकि पेज पेज को एक विशेष प्रभाव देने के लिए स्क्रॉल कर रहा है जिस पर मैं काम करने का प्रयास कर रहा हूं। लेकिन मैं जिस वर्ग को हटाने की कोशिश कर रहा हूं, वह उस प्रभाव के साथ टकराव को दूर कर रहा है, क्योंकि यह कुछ प्रकृति के लिए एक पारदर्शी प्रभाव है।

Comments

स्क्रॉलिंगबार या मूसव्हील जावास्क्रिप्ट के बाद आग की घटना

— डब्ल्यू

बहुत बढ़िया, बिल्कुल डुप्लिकेट नहीं, लेकिन निश्चित रूप से मैं जो देख रहा था, उसके बारे में निश्चित रूप से मेरे मुद्दे को हल करने में मदद की। धन्यवाद।

— 22

Answer 1

$(window).scroll(function() {
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function() {
        // do something
        console.log("Haven't scrolled in 250ms!");
    }, 250));
});

अपडेट करें

मैंने jQuery के डिफॉल्ट -हैंडलर को बढ़ाने के लिए एक एक्सटेंशन लिखा है on। यह चयनित तत्वों में एक या एक से अधिक घटनाओं के लिए एक ईवेंट हैंडलर फ़ंक्शन को जोड़ता है और हैंडलर फ़ंक्शन को कॉल करता है यदि इवेंट किसी दिए गए अंतराल के लिए ट्रिगर नहीं किया गया था। यह उपयोगी है यदि आप एक देरी के बाद ही कॉल बैक करना चाहते हैं, जैसे कि आकार बदलने वाली घटना, या ऐसे।

अपडेट के लिए जीथब-रेपो की जांच करना महत्वपूर्ण है!

https://github.com/yckart/jquery.unevent.js

;(function ($) {
    var on = $.fn.on, timer;
    $.fn.on = function () {
        var args = Array.apply(null, arguments);
        var last = args[args.length - 1];

        if (isNaN(last) || (last === 1 && args.pop())) return on.apply(this, args);

        var delay = args.pop();
        var fn = args.pop();

        args.push(function () {
            var self = this, params = arguments;
            clearTimeout(timer);
            timer = setTimeout(function () {
                fn.apply(self, params);
            }, delay);
        });

        return on.apply(this, args);
    };
}(this.jQuery || this.Zepto));

इसे किसी अन्य onया bind-वेंट हैंडलर की तरह उपयोग करें , सिवाय इसके कि आप अंतिम के रूप में एक अतिरिक्त पैरामीटर पास कर सकते हैं:

$(window).on('scroll', function(e) {
    console.log(e.type + '-event was 250ms not triggered');
}, 250);

http://yckart.github.com/jquery.unevent.js/

(इस डेमो के resizeबजाय का उपयोग करता है scroll, लेकिन कौन परवाह करता है ?!

Comments

यह अभी भी 100% सही नहीं है: कभी-कभी उपयोगकर्ता बंद हो जाता है और 250 एमएस के बाद भी स्क्रॉल करना शुरू कर देता है

— अरमान बिमातोव

यह कोड बहुत अच्छा काम करता है, लेकिन इसने jquery ui के स्वतः पूर्ण विजेट को पूरी तरह से तोड़ दिया।

— kazazakov

@ArmanBimatov तब इसे माना जाएगा क्योंकि उपयोगकर्ता स्क्रॉल करता रहता है, जो अच्छा लगता है, नहीं?

— गॉडबलेसस्ट्रॉबेरी

जब उपयोगकर्ता स्क्रॉल करना बंद कर देता है, तो स्क्रॉलिंग इवेंट रुकने और न होने पर यह समय समाप्त हो जाता है। उपयोगकर्ता माउस से अपनी उंगली उठा सकता है और स्क्रॉल करने की गति के आधार पर कुछ सेकंड तक स्क्रॉल करना जारी रख सकता है। जब उपयोगकर्ता ने स्क्रॉल करना बंद कर दिया है तो यह समाधान आपको एक संकेत नहीं देगा।

— AndroidDev

@abzarak यह अमूर्त सहायक सही नहीं है, किसी भी मामले में! मैंने हाल ही में कारणों से जीथब-रेपो को अपडेट नहीं किया है - यह एक भयानक विचार था। इसके बजाय बस एक "गला घोंटना" या "पराजय" आवरण समारोह का उपयोग करें। मुझे ध्यान देना चाहिए कि कहीं और भी! :)

— यॉकर्ट

Answer 2

JQuery थ्रॉटल / डेब्यू का उपयोग करना

jQuery बहस इस तरह की समस्याओं के लिए एक अच्छा एक है। jsFidlle

$(window).scroll($.debounce( 250, true, function(){
    $('#scrollMsg').html('SCROLLING!');
}));
$(window).scroll($.debounce( 250, function(){
    $('#scrollMsg').html('DONE!');
}));

दूसरा पैरामीटर "at_begin" ध्वज है। यहां मैंने दिखाया है कि "स्क्रॉल प्रारंभ" और "स्क्रॉल फिनिश" दोनों पर कोड को कैसे निष्पादित किया जाए।

लॉडश का उपयोग करना

जैसा कि बैरी पी द्वारा सुझाया गया है, jsFiddle , अंडरस्कोर या लॉश में भी एक बहस है , प्रत्येक थोड़ा अलग एपिस के साथ।

$(window).scroll(_.debounce(function(){
    $('#scrollMsg').html('SCROLLING!');
}, 150, { 'leading': true, 'trailing': false }));

$(window).scroll(_.debounce(function(){
    $('#scrollMsg').html('STOPPED!');
}, 150));

Comments

क्या एक ही समय में एक सामान्य स्क्रॉल फ़ंक्शन का उपयोग करना संभव है? $ (विंडो) .scroll (फ़ंक्शन () {...});

— डैनियल वोगेलनेस्ट

बेशक, jQuery किसी हैंडलर को एक इवेंट में बाँध देगा जैसा आप चाहते हैं।

— सिनहेटा

इस @BarryP को अपडेट करने के लिए धन्यवाद Jsfiddle भी lo-dash प्रदान करता है ताकि आप बाहरी लिंक से बच सकें jsfiddle.net/qjggnyhf

— Sinetheta

FYI करें, मेरे पास ऐसे मुद्दे थे जहां तेजी से स्क्रॉल वापस नहीं लौट रहे थे। ऐसा लगता था कि आपको "STOPPED" बहस में कुछ मिलीसेकंड जोड़ने की आवश्यकता है, अन्यथा यह एक दौड़ की स्थिति का कारण बनता है, जहां, कभी-कभी, STOPPED शुरू होने से पहले ट्रिगर हो जाता है, और आप उस आइटम के साथ समाप्त हो जाते हैं जैसे आप अभी भी स्क्रॉल कर रहे हैं। मैंने क्रमशः १५० और १६० की खान बनाई, और यह चाल करने के लिए लग रहा था।

— कोडशिम

धन्यवाद @CodeChimp जो साफ-सुथरा है, लेकिन मैं 16 में से 15 बार उन्हें ठीक करके किनारे के मामलों को संभालने के बारे में चिंतित हूं;) हो सकता है कि अंदर के सभी तर्क वाला एक भी हैंडलर सबसे सुरक्षित होगा। leadingऔर trailingअपने आप को जांचें , फिर सुनिश्चित करें कि कोई भ्रम नहीं हो सकता है।

— सिनहेटा

Answer 3

रोब डब्ल्यू सुगरेटेड मैंने स्टैक पर यहां एक और पोस्ट की जांच की जो मूल रूप से मेरे मूल एक समान पोस्ट थी। कौन से पढ़ने से मुझे एक साइट का लिंक मिला:

http://james.padolsey.com/javascript/special-scroll-events-for-jquery/

यह वास्तव में मेरी अपनी जरूरतों के लिए थोड़ा सा ट्वीक करने के बाद बहुत अच्छी तरह से मेरी समस्या को हल करने में मदद करने के लिए समाप्त हो गया, लेकिन सभी ने रास्ते से बहुत सारे गुफ को प्राप्त करने में मदद की और मुझे अपने दम पर इसे निकालने के लगभग 4 घंटे बचाए।

इस पद को देखते हुए लगता है कि कुछ योग्यता है, मुझे लगा कि मैं वापस आऊंगा और मूल रूप से उल्लिखित लिंक पर पाया गया कोड प्रदान करूंगा, बस लेखक ने कभी भी साइट के साथ एक अलग दिशा में जाने का फैसला किया और लिंक को समाप्त कर दिया।

(function(){

    var special = jQuery.event.special,
        uid1 = 'D' + (+new Date()),
        uid2 = 'D' + (+new Date() + 1);

    special.scrollstart = {
        setup: function() {

            var timer,
                handler =  function(evt) {

                    var _self = this,
                        _args = arguments;

                    if (timer) {
                        clearTimeout(timer);
                    } else {
                        evt.type = 'scrollstart';
                        jQuery.event.handle.apply(_self, _args);
                    }

                    timer = setTimeout( function(){
                        timer = null;
                    }, special.scrollstop.latency);

                };

            jQuery(this).bind('scroll', handler).data(uid1, handler);

        },
        teardown: function(){
            jQuery(this).unbind( 'scroll', jQuery(this).data(uid1) );
        }
    };

    special.scrollstop = {
        latency: 300,
        setup: function() {

            var timer,
                    handler = function(evt) {

                    var _self = this,
                        _args = arguments;

                    if (timer) {
                        clearTimeout(timer);
                    }

                    timer = setTimeout( function(){

                        timer = null;
                        evt.type = 'scrollstop';
                        jQuery.event.handle.apply(_self, _args);

                    }, special.scrollstop.latency);

                };

            jQuery(this).bind('scroll', handler).data(uid2, handler);

        },
        teardown: function() {
            jQuery(this).unbind( 'scroll', jQuery(this).data(uid2) );
        }
    };

})();

Answer 4

मैं ऊपर की कुछ टिप्पणियों से सहमत था कि टाइमआउट के लिए सुनना इतना सटीक नहीं था क्योंकि जब आप स्क्रॉल करना बंद कर देते हैं तो आप स्क्रॉल बार को लंबे समय तक हिलाना बंद कर देंगे। मुझे लगता है कि बेहतर समाधान यह है कि उपयोगकर्ता को माउस (माउसअप) के बारे में सुनना चाहिए जैसे ही वे स्क्रॉल करना शुरू करते हैं:

$(window).scroll(function(){
    $('#scrollMsg').html('SCROLLING!');
    var stopListener = $(window).mouseup(function(){ // listen to mouse up
        $('#scrollMsg').html('STOPPED SCROLLING!');
        stopListner(); // Stop listening to mouse up after heard for the first time 
    });
});

और काम करने का एक उदाहरण इस JSFiddle में देखा जा सकता है

Comments

यह बहुत अच्छा लगता है, लेकिन अगर आप ट्रैकपैड, या स्क्रोलव्हील पर 2-उंगली के इशारे से स्क्रॉल कर रहे हैं, तो माउसअप निकाल नहीं है। यह शायद स्क्रॉल करने का सबसे आम तरीका है, जो इसे समस्याग्रस्त बनाता है।

— एडम

अच्छी बात। लेकिन संभावित रूप से इसके लिए कुछ सुधार हैं। Jquery के 'mousewheel' ईवेंट का उपयोग करना या यदि पहले mousedown पर नज़र रखना, और दूसरों द्वारा सुझाई गई टाइमआउट दृष्टिकोण का उपयोग करना। लेकिन मुझे लगता है कि माउस व्हील इवेंट्स के लिए अन्य उत्तरों के संयोजन का उपयोग करने और स्क्रॉल बार खींचने के लिए यह उत्तर सबसे सटीक परिणाम देगा

— Theo

Answer 5

आप एक अंतराल सेट कर सकते हैं जो प्रत्येक 500 एमएस या तो चलता है, निम्नलिखित की लाइनों के साथ:

var curOffset, oldOffset;
oldOffset = $(window).scrollTop();
var $el = $('.slides_layover'); // cache jquery ref
setInterval(function() {
  curOffset = $(window).scrollTop();
  if(curOffset != oldOffset) {
    // they're scrolling, remove your class here if it exists
    if($el.hasClass('showing_layover')) $el.removeClass('showing_layover');
  } else {
    // they've stopped, add the class if it doesn't exist
    if(!$el.hasClass('showing_layover')) $el.addClass('showing_layover');
  }
  oldOffset = curOffset;
}, 500);

मैंने इस कोड का परीक्षण नहीं किया है, लेकिन सिद्धांत काम करना चाहिए।

Answer 6

function scrolled() {
    //do by scroll start
    $(this).off('scroll')[0].setTimeout(function(){
        //do by scroll end
        $(this).on('scroll',scrolled);
    }, 500)
}
$(window).on('scroll',scrolled);

शुरू और अंत क्षमता के साथ बहुत छोटा संस्करण

Answer 7

ठीक है यह कुछ ऐसा है जिसे मैंने पहले इस्तेमाल किया है। मूल रूप से आप एक पकड़ को अंतिम रूप में देखते हैं scrollTop()। एक बार जब आपका समय समाप्त हो जाता है, तो आप वर्तमान की जांच करते हैं scrollTop()और यदि वे समान हैं, तो आपको स्क्रॉल किया जाता है।

$(window).scroll((e) ->
  clearTimeout(scrollTimer)
  $('header').addClass('hidden')

  scrollTimer = setTimeout((() ->
    if $(this).scrollTop() is currentScrollTop
      $('header').removeClass('hidden') 
  ), animationDuration)

  currentScrollTop = $(this).scrollTop()
)

Answer 8

स्क्रॉलिंग स्टार्ट के साथ ईएस 6 स्टाइल भी।

function onScrollHandler(params: {
  onStart: () => void,
  onStop: () => void,
  timeout: number
}) {
  const {onStart, onStop, timeout = 200} = params
  let timer = null

  return (event) => {
    if (timer) {
      clearTimeout(timer)
    } else {
      onStart && onStart(event)
    }
    timer = setTimeout(() => {
      timer = null
      onStop && onStop(event)
    }, timeout)
  }
}

उपयोग:

yourScrollableElement.addEventListener('scroll', onScrollHandler({
  onStart: (event) => {
    console.log('Scrolling has started')
  },
  onStop: (event) => {
    console.log('Scrolling has stopped')
  },
  timeout: 123 // Remove to use default value
}))

Answer 9

कृपया jquery मोबाइल स्क्रॉलस्टॉप ईवेंट की जाँच करें

$(document).on("scrollstop",function(){
  alert("Stopped scrolling!");
});

Comments

मोबाइल jquery, नहीं jquery। मैं लगभग एक ही जाल के लिए गिर गया;)

— katzenhut

Answer 10

जो लोग अभी भी यह यहाँ की जरूरत है समाधान के लिए है

  $(function(){
      var t;
      document.addEventListener('scroll',function(e){
          clearTimeout(t);
          checkScroll();
      });
      
      function checkScroll(){
          t = setTimeout(function(){
             alert('Done Scrolling');
          },500); /* You can increase or reduse timer */
      }
  });

Answer 11

यह काम करना चाहिए:

var Timer;
$('.Scroll_Table_Div').on("scroll",function() 
{
    // do somethings

    clearTimeout(Timer);
    Timer = setTimeout(function()
    {
        console.log('scrolling is stop');
    },50);
});

Answer 12

यहां बताया गया है कि आप इसे कैसे संभाल सकते हैं:

    var scrollStop = function (callback) {
        if (!callback || typeof callback !== 'function') return;
        var isScrolling;
        window.addEventListener('scroll', function (event) {
            window.clearTimeout(isScrolling);
            isScrolling = setTimeout(function() {
                callback();
            }, 66);
        }, false);
    };
    scrollStop(function () {
        console.log('Scrolling has stopped.');
    });

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
</body>
</html>

Answer 13

यह एक वैश्विक टाइमर का उपयोग करके 1 मील प्रति सेकंड (या इसे बदलने) के बाद स्क्रॉल स्टॉप का पता लगाता है:

var scrollTimer;

$(window).on("scroll",function(){
    clearTimeout(scrollTimer);
    //Do  what you want whilst scrolling
    scrollTimer=setTimeout(function(){afterScroll()},1);
})

function afterScroll(){
    //I catched scroll stop.
}