Question

我想检测我是向上还是向下滚动。我还有一个全局变量，如果向下滚动则应为true，如果向上则为false。

问题是，如果我向下滚动一次并继续向下滚动，控制台会记录true和down，但如果我向上滚动一次，则会记录＆＃39; up＆＃ 39;正确但true代替false。滚动相反的方式也是如此。

所以基本上down变量在第一次滚动更改后改变方向是错误的。

<div id="id0" data-id="0" class="nbhd red scrolledto"></div>
<div id="id1" data-id="1" class="nbhd yellow"></div>
<div id="id2" data-id="2" class="nbhd green"></div>
<div id="id3" data-id="3" class="nbhd blue"></div>

var down = true;

    function setHeights() {
        $('.nbhd').css('height', window.innerHeight);
    }

    function scrollDirection() {
        var lastScrollTop = $(window).scrollTop();

        $(window).scroll(function(event) {

            var st = $(this).scrollTop();

            if (st > lastScrollTop){
                // down
                down = true;
                console.log('down');
            } else if (st < lastScrollTop) {
                // up
                down = false;
                console.log('up');
            }

            lastScrollTop = st;

        });

        console.log(down);
    }

    setHeights();

    $( window ).on( "scroll", function() {
        scrollDirection();
    });

小提琴：https://jsfiddle.net/gh3cgrqL/

Answer 1

问题的一部分是你每次滚动事件都会挂钩，因为你有这个：

var time = process.hrtime();
var result = binarySearch(sort, randomKey);
time = process.hrtime(time);
......

...每次滚动都会调用$( window ).on( "scroll", function() { scrollDirection(); });，并且在scrollDirection内你有这个：

scrollDirection

...增加了另一个处理程序。每一次。在相对少量的滚动之后，页面将变得迟缓并且最终没有响应，因为所有这些事件处理器堆叠起来。

另外，由于重复调用$(window).scroll(function(event) { // ... });，因此在内部处理程序有机会使用scrollDirection之前更新lastScroll。

只需连接一个处理程序，并记住最后一个滚动位置：

var lastScroll = 0;
var down = false;
$(window).on("scroll", function() {
    var scroll = $(this).scrollTop();
    down = scroll > lastScroll;
    lastScroll = scroll;
});

直播示例：

＆＃13;

(function() {
    var lastScroll = 0;
    var down = false;
    $(window).on("scroll", function() {
        var scroll = $(this).scrollTop();
        down = scroll > lastScroll;
        lastScroll = scroll;
        $("#indicator").text(down ? "down" : "up");
    });
})();

＆＃13;

<div id="indicator" style="position: fixed; top: 0; left: 0; right: 0"><em>(No scroll yet)</em></div>
<div style="margin-top: 1.1em">
<div>
  scroll over this
  <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>.
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

检测滚动方向 - 第一个滚动更改方向上的布尔变量错误

1 个答案: