检测故意的顶部和底部额外滚动

Question

我试图用javascript检测一个有意的额外顶部/底部滚动.$(window).scrollTop()并window.pageYOffset没有用,因为他们停在前0,我想达到顶级-X之类的东西.对于底部,假设我的文档高度为500,底部就像底部5XX.

编辑: 示例代码可能是:

$(window).scroll(function(){

  if(intentionalScrollTop){
    // Do something
  }else if(intentionalScrollDown){
    // Do something
  }

});

Gif例子:

Answer 1

感谢@Louys 和@Konstantin 我找到了一些线索来得到我的答案。

为了检测具有跨浏览器支持的滚动事件，我使用了此引用，它创建了一个事件侦听器addWheelListener( elem, callback, useCapture )。

然后使用scrollPosI 可以检测滚动是否位于顶部/底部边缘或没有，并且使用e.deltaY和maxScrollTop或maxScrollBottomI 可以触发额外滚动消息。

$(document).ready(function(){

  var canvasHeight    = ($("body").height() - $(window).height()).toFixed(0),
      elem            = document.getElementsByTagName("BODY")[0],
      maxScrollTop    = -200,
      maxScrollBottom = 200,
      scrollTop       = false,
      scrollBottom    = false;

  addWheelListener( elem, function( e ) {  

    var scrollPos = $(window).scrollTop();

    // Is Scroll at Top or Bottom edge?
    if(scrollPos === 0 || scrollPos === parseInt(canvasHeight)){
      if(e.deltaY < -1){
        if(e.deltaY < maxScrollTop){
          $('#message').text('Extra Scroll Top');
          console.log('Extra Scroll Top');
        }

        // This can be removed if you dont need to detect the first scroll top.
        if(!scrollTop){
          scrollTop = true;
          $('#message').text('Scroll Top');
          console.log('Scroll Top');
        }
      }else if(e.deltaY > 1){
        if(e.deltaY > maxScrollBottom){
          $('#message').text('Extra Scroll Bottom');
          console.log('Extra Scroll Bottom');
        }

        // This can be removed if you dont need to detect the first scroll bottom.
        if(!scrollBottom){
          scrollBottom = true;
          $('#message').text('Scroll Bottom');
          console.log('Scroll Bottom');
        }
      }
    }else{
      // Clean Scroll positions.
      scrollTop     = false;
      scrollBottom  = false;
      $('#message').text('Not at the top/bottom edge');
      console.log('Not at the top/bottom edge');
    }

  }, {passive: true});


}); // End Document.ready

这是使用 CodePen 的工作示例。

http://codepen.io/xWaZzo/pen/NRorKj