Question

如何在每个用户请求中仅检测一次滚动。我的第一次尝试看起来像这样：

＆＃13;

$(window).bind('mousewheel', function(event) {
console.log("hello")
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<image src="https://www.setaswall.com/wp-content/uploads/2017/10/Beautiful-Wallpaper-1080x2160.jpg"></image>

＆＃13;

上面代码的问题是，当用户滚动时，函数不会持续触发，而不是只检测一次并打印console.log一次。

我的第二次尝试：

＆＃13;

$(this).one('scroll', function(){
        // scroll 
 console.log("hello")
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<image src="https://www.setaswall.com/wp-content/uploads/2017/10/Beautiful-Wallpaper-1080x2160.jpg"></image>

＆＃13;

第二次尝试的问题是除非刷新页面，否则该函数只会触发一次。

如何更好地进行第二次尝试，以便在不刷新页面的情况下检测到more than one time？如果我向下滚动我想要只显示一次你好，当我再次向上滚动时我想再次显示你好

Answer 1

设置滚动eventListener，然后在滚动时取消绑定：

$(window).on("scroll", function(e){
  console.log("only alerting once");
  $(window).unbind("scroll");
});

Answer 2

＆＃13;

var currentScrollTop = 0,
    previousScrollDir = true;

$(this).scroll(function () {
    var scrollTop = $(this).scrollTop();
    if (scrollTop < currentScrollTop) {
        if (!previousScrollDir) {
          console.log('scrolled up');
          previousScrollDir = true;
        }
    } else {
        if (previousScrollDir) {
          console.log('scrolled down');
          previousScrollDir = false;
        }
    }
    currentScrollTop = scrollTop;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<image src="https://www.setaswall.com/wp-content/uploads/2017/10/Beautiful-Wallpaper-1080x2160.jpg"></image>

＆＃13;

仅检测一次鼠标滚动

2 个答案: