पता लगाएँ कि क्या स्क्रॉल इवेंट उपयोगकर्ता द्वारा बनाया गया था

Question 1

क्या यह बताना संभव है कि एक स्क्रॉल घटना ब्राउज़र द्वारा या उपयोगकर्ता द्वारा की गई थी? विशेष रूप से, बैक बटन का उपयोग करते समय ब्राउज़र अंतिम ज्ञात स्क्रॉल स्थिति पर जा सकता है। यदि मैं ईवेंट स्क्रॉल करने के लिए बाध्य हूं तो मैं कैसे बता सकता हूं कि यह उपयोगकर्ता या ब्राउज़र के कारण हुआ था?

$(document).scroll( function(){ 
    //who did this?!
});

मैं तीन प्रकार की स्थितियों को देखता हूं जो एक ब्राउज़र में स्क्रॉलिंग का कारण बनती हैं।

उपयोगकर्ता कुछ कार्रवाई करता है। उदाहरण के लिए, मूसवेल, एरो कीज़, पेज अप / डाउन कीज़, होम / एंड कीज़ का उपयोग करता है।
ब्राउज़र स्वचालित रूप से स्क्रॉल करता है। उदाहरण के लिए, अपने ब्राउज़र में बैक बटन का उपयोग करते समय यह अंतिम ज्ञात स्क्रॉल स्थिति पर स्वचालित रूप से कूद जाएगा।
जावास्क्रिप्ट स्क्रॉल। उदाहरण के लिए, element.scrollTo(x,y)।

Question 2

दुर्भाग्य से, यह बताने का कोई सीधा तरीका नहीं है।

मैं कहूंगा कि यदि आप अपने ऐप को फिर से डिज़ाइन कर सकते हैं ताकि यह इस प्रकार के प्रवाह पर निर्भर न हो, तो इसके लिए जाएं।

यदि नहीं, तो एक वैकल्पिक हल मैं के बारे में सोच सकते हैं उपयोगकर्ता द्वारा आरंभ किए स्क्रॉल का ट्रैक रखने और जाँच लें कि देखने के लिए कि पुस्तक ब्राउज़र द्वारा या उपयोगकर्ता द्वारा ट्रिगर किया गया है।

यहाँ एक उदाहरण है जो मैंने एक साथ रखा है जो इसे बहुत अच्छी तरह से करता है (उन ब्राउज़रों को छोड़कर जहां jQuery के इतिहास में समस्याएं हैं)।

आपको इसे पूरी तरह से परखने में सक्षम होने के लिए इसे स्थानीय रूप से चलाने की आवश्यकता है (jsFiddle / jsbin अच्छा फिट नहीं है क्योंकि वे सामग्री को iFrame करते हैं)।

यहाँ परीक्षण के मामले हैं जिन्हें मैंने सत्यापित किया है:

पेज लोड - userScrollहैfalse
माउस / कीबोर्ड का उपयोग करते हुए स्क्रॉल करें - userScrollबन जाता हैtrue
पेज बॉटम पर जाने के लिए लिंक पर क्लिक करें - userScrollबन जाता हैfalse
क्लिक बैक / फॉरवर्ड - userScrollबन जाता है false;

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script> 
    <script type="text/javascript" src="https://raw.github.com/tkyk/jquery-history-plugin/master/jquery.history.js"></script> 
</head> 
<body> 
    <span> hello there </span><br/> 
    <a href="#bottom"> click here to go down </a> 
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
    <a name="bottom"> just sitting </a> 
</body> 
<script type="text/javascript"> 

var userScroll = false;     

function mouseEvent(e) { 
    userScroll = true; 
} 


$(function() { 

    // reset flag on back/forward 
    $.history.init(function(hash){ 
        userScroll = false; 
    }); 

    $(document).keydown(function(e) { 
        if(e.which == 33        // page up 
           || e.which == 34     // page dn 
           || e.which == 32     // spacebar
           || e.which == 38     // up 
           || e.which == 40     // down 
           || (e.ctrlKey && e.which == 36)     // ctrl + home 
           || (e.ctrlKey && e.which == 35)     // ctrl + end 
          ) { 
            userScroll = true; 
        } 
    }); 

    // detect user scroll through mouse
    // Mozilla/Webkit 
    if(window.addEventListener) {
        document.addEventListener('DOMMouseScroll', mouseEvent, false); 
    }

    //for IE/OPERA etc 
    document.onmousewheel = mouseEvent; 


    // to reset flag when named anchors are clicked
    $('a[href*=#]').click(function() { 
        userScroll = false;
    }); 

      // detect browser/user scroll
    $(document).scroll( function(){  
        console.log('Scroll initiated by ' + (userScroll == true ? "user" : "browser"));
    });
}); 
</script> 
</html>

टिप्पणियाँ:

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

उम्मीद है की यह मदद करेगा!

Question 3

सभी उपयोगकर्ता घटनाओं को पकड़ने की कोशिश करने के बजाय, यह विपरीत करना आसान है और केवल प्रोग्रामेटिक घटनाओं को संभालना है - और उन पर ध्यान न दें।

उदाहरण के लिए, इस तरह का कोड काम करेगा:

// Element that needs to be scrolled
var myElement = document.getElementById('my-container');

// Flag to tell if the change was programmatic or by the user
var ignoreNextScrollEvent = false;

function setScrollTop(scrollTop) {
    ignoreNextScrollEvent = true;
    myElement.scrollTop = scrollTop
}

myElement.addEventListener('scroll', function() {
    if (ignoreNextScrollEvent) {
        // Ignore this event because it was done programmatically
        ignoreNextScrollEvent = false;
        return;
    }

    // Process user-initiated event here
});

फिर जब आप कॉल करते हैं setScrollTop(), तो स्क्रॉल ईवेंट को अनदेखा कर दिया जाएगा, जबकि यदि उपयोगकर्ता माउस, कीबोर्ड या किसी अन्य तरीके से स्क्रॉल करता है, तो ईवेंट संसाधित हो जाएगा।

Question 4

जहां तक मुझे पता है कि "उपयोगकर्ता" या अन्य माध्यमों से जब भी स्क्रॉल इवेंट जारी किया गया है, यह बताना असंभव है (किसी भी काम के बिना)।

आप कोशिश कर सकते हैं (जैसा कि दूसरों ने उल्लेख किया है) मौसमी घटनाओं को पकड़ते हैं, तो संभवतः किसी भी कुंजी पर कीडाउन घटना को पकड़ने की कोशिश कर रहे हैं जो स्क्रॉल (तीर, स्थान आदि) को ट्रिगर कर सकता है, जबकि वर्तमान में ध्यान केंद्रित करने वाले तत्व की जांच कर रहा है, क्योंकि आप उदाहरण के लिए स्क्रॉल नहीं कर सकते हैं। तीर कुंजी एक इनपुट क्षेत्र में टाइप करते समय। सामान्य तौर पर यह जटिल और गड़बड़ स्क्रिप्ट होगी।

आप जिस स्थिति से निपट रहे हैं, उसके आधार पर मैं अनुमान लगा सकता हूं कि "तर्क को वापस लाएं", और उपयोगकर्ता का पता लगाने के बजाय स्क्रॉल किए गए ईवेंट जारी किए गए किसी भी स्क्रॉल में हुक करें जो प्रोग्राम द्वारा किए गए किसी भी स्क्रॉल ईवेंट को आपके कोड द्वारा किए गए व्यवहार के रूप में न करें। जैसा मैंने कहा कि यह एक स्थिति पर निर्भर करता है, और आप क्या हासिल करने की कोशिश कर रहे हैं।

Question 5

हां, यह 100% संभव है। मैं एक ऐसे अनुप्रयोग में इसका उपयोग कर रहा हूं जहां IE एक आवश्यकता नहीं है - केवल क्लाइंट का सामना करना पड़ रहा है। जब मेरा बैकबोन ऐप एक एनीमेशन शुरू करता है जहां स्क्रॉल बदल जाता है - स्क्रॉल होता है लेकिन इन ईवेंट कैप्चर को ट्रिगर नहीं करता है। यह एफएफ, सफारी और क्रोम नवीनतम में परीक्षण किया गया है।

$('html, body').bind('scroll mousedown wheel DOMMouseScroll mousewheel keyup', function(evt) {
  // detect only user initiated, not by an .animate though
    if (evt.type === 'DOMMouseScroll' || evt.type === 'keyup' || evt.type === 'mousewheel') {
    // up
    if (evt.originalEvent.detail < 0 || (evt.originalEvent.wheelDelta && evt.originalEvent.wheelDelta > 0)) { 
    // down.
    } else if (evt.originalEvent.detail > 0 || (evt.originalEvent.wheelDelta && evt.originalEvent.wheelDelta < 0)) { 
  }
}
});

Question 6

इसके बजाय Mousewheel और DOMMouseScroll घटनाओं का उपयोग करने का प्रयास करें। Http://www.quirksmode.org/dom/events/scroll.html देखें

Question 7

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

$(function () {
    var loadScrollTop = ($(document).scrollTop() > 0 ? $(document).scrollTop() : null);
    $(document).scroll(function (e) {
        if ( $(document).scrollTop() !== loadScrollTop) {
            // scroll code here!
        }
        loadScrollTop = null;
    });
});

Question 8

के बारे में:

विशेष रूप से, बैक बटन का उपयोग करते समय ब्राउज़र अंतिम ज्ञात स्क्रॉल स्थिति पर जा सकता है।

पृष्ठ के रेंडर होने के बाद यह बहुत जल्द ही फायर हो जाता है। आप स्क्रॉल इवेंट में सूची को 1 सेकंड या तो विलंबित कर सकते हैं।

Question 9

उपयोगकर्ता द्वारा बनाई गई स्क्रॉल को अलग करने का एक और तरीका है: आप वैकल्पिक ईवेंट हैंडलर का उपयोग कर सकते हैं, उदाहरण के लिए 'मूसवेल', 'टचमूव', 'कीडड' कोड 38 और 40 के साथ तीर स्क्रॉलिंग के लिए, स्क्रॉल बार के साथ स्क्रॉल करने के लिए - यदि 'माउसअप' इवेंट तक 'स्क्रॉल' इवेंट को 'मूसडाउन' के साथ एक साथ निकाल दिया जाता है।

Question 10

यह बहुत उपयोगी पाया। यहाँ उन इच्छुक लोगों के लिए एक कॉफ़ीस्क्रिप्ट संस्करण है।

$ ->
  S.userScroll = false

  # reset flag on back/forward
  if $.history?
    $.history.init (hash) ->
      S.userScroll = false

  mouseEvent = (e)->
    S.userScroll = true

  $(document).keydown (e) ->
    importantKey =  (e.which == 33 or        # page up
      e.which == 34 or    # page dn
      e.which == 32 or    # spacebar
      e.which == 38 or    # up
      e.which == 40 or    # down
      (e.ctrlKey and e.which == 36) or    # ctrl + home
      (e.ctrlKey and e.which == 35)    # ctrl + end
    )
    if importantKey
      S.userScroll = true;

  # Detect user scroll through mouse
  # Mozilla/Webkit
  if window.addEventListener
      document.addEventListener('DOMMouseScroll', mouseEvent, false);

  # for IE/OPERA etc
  document.onmousewheel = mouseEvent;

Question 11

अगर आप JQuery का उपयोग कर रहे हैं तो इसका बेहतर जवाब है, जाहिरा तौर पर - मैं सिर्फ इसे खुद से आज़मा रहा हूं।

देखें: उपयोगकर्ता द्वारा jquery ईवेंट ट्रिगर का पता लगाना या कोड द्वारा कॉल करना

Question 12

यह आपके एप्लिकेशन के साथ मदद नहीं कर सकता है, लेकिन मुझे उपयोगकर्ता स्क्रॉल पर एक घटना को आग लगाने की ज़रूरत थी लेकिन प्रोग्रामिक स्क्रॉल और पोस्टिंग इंसेज़ नहीं है जो किसी और की मदद करता है।

wheelइसके बजाय घटना को सुनें scroll,

जब भी कोई उपयोगकर्ता माउस व्हील या ट्रैकर पैड का उपयोग करता है, तो यह ट्रिगर हो जाता है (जो मुझे लगता है कि ज्यादातर लोग किसी भी तरह स्क्रॉल करते हैं) और जब आप प्रोग्राम स्क्रॉल करते हैं तो निकाल नहीं दिया जाता है। मैंने इसका उपयोग उपयोगकर्ता स्क्रॉल कार्रवाई और स्क्रॉलिंग फ़ंक्शन के बीच अंतर करने के लिए किया था।

https://developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event


element.addEventListener('wheel', (event) => {
       //do user scroll stuff here
})

एक चेतावनी यह है कि wheelमोबाइल पर स्क्रॉल करने से आग नहीं लगती है, इसलिए मैंने जांच की कि क्या डिवाइस मोबाइल था और इसी तरह के फ़ंक्शन का उपयोग किया गया था

if(this.mobile){
  element.addEventListener('scroll', (event) => {
       //do mobile scroll stuff here
  })
}