检测有意的顶部和底部额外滚动 [英] Detect Intentional Top and Bottom extra scroll

问题描述

我正在尝试使用 javascript 检测有意的额外顶部/底部滚动.$(window).scrollTop() 和 window.pageYOffset 没有用，因为它们停在 Top 0 并且我想达到类似顶部 -X.对于底部，假设我的文档高度为 500，底部将类似于 bottom 5XX.

I'm trying to detect with javascript an intentional extra top/bottom scroll. $(window).scrollTop() and window.pageYOffset are not useful since they stop at Top 0 and I would like to reach something like top -X. For bottom let's suppose my document's height is 500, bottom would be like bottom 5XX.

示例代码可以是:

$(window).scroll(function(){

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

});

Gif 示例:

推荐答案

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

Thanks to @Louys and @Konstantin I found some clues to get my answer.

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

To detect the scroll event with cross browser support I used this reference, which creates an event listener addWheelListener( elem, callback, useCapture ).

然后使用 scrollPos 我可以检测滚动是在顶部/底部边缘还是没有，并使用 e.deltaY 和 maxScrollTop 或 maxScrollBottom 我可以触发额外的滚动消息.

Then using scrollPos I can detect whether the scroll is at top/bottom edge or none and with e.deltaY and maxScrollTop or maxScrollBottom I can trigger the Extra scroll message.

$(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 的工作示例.

And here is the working example using CodePen.

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

这篇关于检测有意的顶部和底部额外滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！