Kaydırma olayının kullanıcı tarafından oluşturulup oluşturulmadığını tespit edin

Question 1

Bir kaydırma olayının tarayıcı tarafından mı yoksa kullanıcı tarafından mı yapıldığını söylemek mümkün mü? Özellikle, geri düğmesini kullanırken bir tarayıcı bilinen son kaydırma konumuna atlayabilir. Kaydırma olayına bağlanırsam, bunun kullanıcıya mı yoksa tarayıcıdan mı kaynaklandığını nasıl anlayabilirim?

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

Bir tarayıcıda kaydırmaya neden olan üç tür durum görüyorum.

Kullanıcı bazı eylemler gerçekleştirir. Örneğin, fare tekerleği, ok tuşları, sayfa yukarı / aşağı tuşları, ana sayfa / son tuşlarını kullanır.
Tarayıcı otomatik olarak kayar. Örneğin, tarayıcınızda geri düğmesini kullandığınızda, otomatik olarak bilinen en son kaydırma konumuna atlayacaktır.
Javascript parşömenleri. Örneğin element.scrollTo(x,y),.

Question 2

Ne yazık ki bunu söylemenin doğrudan bir yolu yok.

Uygulamanızı bu tür akışa bağlı kalmayacak şekilde yeniden tasarlayabilirseniz , bunun için gidin.

Değilse , düşünebildiğim bir çözüm , kullanıcı tarafından başlatılan kaydırmaları takip etmek ve kaydırmanın tarayıcı tarafından mı yoksa kullanıcı tarafından mı tetiklendiğini kontrol etmek.

İşte bunu oldukça iyi yapan bir araya getirdiğim örnek (jQuery geçmişinin sorun yaşadığı tarayıcılar hariç).

Tam olarak test edebilmek için bunu yerel olarak çalıştırmanız gerekir (jsFiddle / jsbin, içeriği iFrameledikleri için uygun değildir).

İşte doğruladığım test senaryoları:

Sayfa yükler - userScrollolduğufalse
Fare / klavye kullanarak Kaydırma - userScrollolurtrue
Sayfanın altına atlamak için bağlantıya tıklayın - userScrollolurfalse
Geri / İleri'ye tıklayın - userScrollolur 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>

Notlar:

Bu, kullanıcı kaydırma çubuğunu fareyle sürüklediğinde kaydırmayı izlemez. Bu, sizin için alıştırma olarak bıraktığım biraz daha kodla eklenebilir.
event.keyCodes işletim sistemine göre değişebilir, bu nedenle bunu uygun şekilde değiştirmeniz gerekebilir.

Bu yardımcı olur umarım!

Question 3

Tüm kullanıcı olaylarını yakalamaya çalışmak yerine, tersini yapmak ve yalnızca programatik olayları işlemek ve bunları görmezden gelmek çok daha kolaydır.

Örneğin, bu tür bir kod çalışır:

// 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
});

Ardından aradığınızda setScrollTop(), kaydırma olayı yok sayılırken, kullanıcı fare, klavye veya başka bir yolla kaydırırsa, olay işlenecektir.

Question 4

Bildiğim kadarıyla, kaydırma olayının ne zaman "kullanıcı" tarafından veya başka yollarla yayınlandığını söylemek (herhangi bir çalışma olmadan) imkansız.

(Başkalarının da belirtildiği gibi) fare tekerleği olaylarını yakalamayı deneyebilir, ardından muhtemelen hangi öğenin odaklandığını kontrol ederken kaydırmayı tetikleyebilecek herhangi bir tuşta (oklar, boşluk vb.) Keydown olayını yakalamaya çalışabilirsiniz, çünkü örneğin giriş alanına yazarken ok tuşları. Genel olarak bu karmaşık ve dağınık bir senaryo olurdu.

Karşılaştığınız duruma bağlı olarak, "mantığı geri alabilir" ve kullanıcı tarafından verilen kaydırma olaylarını tespit etmek yerine, programatik olarak yapılmış herhangi bir parşömene bağlanın ve herhangi bir kaydırma olayını işleyin. değil , bir kullanıcı tarafından yapılan gibi kod tarafından yaptı. Dediğim gibi, bir duruma ve neyi başarmak istediğinize bağlıdır.

Question 5

Evet,% 100 mümkündür. Bunu şu anda IE'nin bir gereklilik olmadığı bir uygulamada kullanıyorum - yalnızca müşteriye dönük. Backbone uygulamam kaydırmanın değiştirildiği bir animasyonu başlattığında - kaydırma gerçekleşir, ancak bu olay yakalamalarını tetiklemez. Bu, en son FF, Safari ve Chrome'da test edilmiştir.

$('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

Bunun yerine Mousewheel ve DOMMouseScroll olaylarını kullanmayı deneyin. Bkz. Http://www.quirksmode.org/dom/events/scroll.html

Question 7

Hazırda kaydırma konumunu kontrol edebilirsiniz. Kaydırma olayını başlattığınızda, kaydırma konumunun sayfanın yüklendiği zamandan farklı olduğundan emin olun. Son olarak, sayfa kaydırıldıktan sonra saklanan değeri temizlediğinizden emin olun.

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

Question 8

İle ilgili olarak:

Özellikle, geri düğmesini kullanırken bir tarayıcı bilinen son kaydırma konumuna atlayabilir.

Bu, sayfa oluşturulduktan hemen sonra tetiklenir. Kaydırma olayını dinlemeyi 1 saniye kadar geciktirebilirsiniz.

Question 9

Kullanıcı tarafından oluşturulan kaydırmayı ayırmanın bir yolu daha vardır: alternatif olay işleyicileri kullanabilirsiniz, örneğin ok kaydırma için 38 ve 40 kodlu 'fare tekerleği', 'dokunma hareketi', 'tuş aşağı', kaydırma çubuğu ile kaydırma için - eğer 'scroll' olayı, 'mouseup' olayına kadar 'mousedown' ile aynı anda tetiklenir.

Question 10

Bunu çok faydalı buldum. İşte bu kadar eğilimli olanlar için kahvehane versiyonu.

$ ->
  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

Eğer JQuery'yi olduğundan daha iyi bir cevap kullanıyorsanız, görünüşe göre - sadece kendim deniyorum.

bkz: jquery olay tetikleyicisini kullanıcı veya kodla arama

Question 12

Uygulamanıza yardımcı olmayabilir, ancak kullanıcı kaydırmasında bir etkinliği tetiklemem gerekiyordu, ancak programatik kaydırma ve yayınlama, başka birine yardımcı olursa.

wheelBunun yerine etkinliği dinleyinscroll ,

Bir kullanıcı fare tekerleğini veya izleme pedini kullandığında (ki çoğu insanın nasıl kaydırdığını hissettim) tetiklenir ve programlı olarak kaydırdığınızda tetiklenmez. Bunu, bir kullanıcı kaydırma eylemi ile kaydırma işlevleri arasında ayrım yapmak için kullandım.

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


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

Bir uyarı, wheelmobil cihazda kaydırma sırasında ateşlenmemesi, bu yüzden cihazın mobil olup olmadığını ve benzer işlevleri kullanıp kullanmadığını kontrol ettim.

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