检测滚动方向-第一个滚动更改方向上的布尔变量错误 [英] Detecting scroll direction - boolean variable wrong on first scroll change direction

问题描述

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

I want to detect whether I am scrolling up or down. I also have a global variable which should be true if scrolling down and false if up.

问题是，如果我向下滚动一次并继续向下滚动，则控制台会记录true和down，但是如果我仅向上滚动一次，它将正确记录为"up"，但也会记录为true false.沿另一方向滚动时也是如此.

The problem is, if I scroll down once, and keep scrolling down, the console logs true and down, but if I then scroll up just once, it logs 'up' correctly but also true instead of false. Same goes when scrolling the other way around.

因此，基本上，down变量在第一次滚动更改(方向改变)后是错误的.

So basically the down variable is wrong after first scroll change which changes direction.

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

推荐答案

部分问题是您每次都钩住滚动事件，因为有以下原因，任何东西都会滚动:

Part of the problem is that you're hooking the scroll event every time anything scrolls, because you have this:

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

...每次滚动时都会调用scrollDirection，并且在scrollDirection中您有以下内容:

...which calls scrollDirection every time there's any scrolling, and within scrollDirection you have this:

$(window).scroll(function(event) {
    // ...
});

...这将添加另一个处理程序.每一次.在进行相对少量的滚动后，由于所有这些事件处理程序的堆积，页面将变得缓慢且最终无响应.

...which adds another handler. Each time. After a relatively small amount of scrolling the page will become sluggish and ultimately non-responsive as all those event hanlders stack up.

另外，由于scrollDirection被反复调用，因此lastScroll会在内部处理程序有机会使用它之前进行更新.

Separately, since scrollDirection is called repeatedly, your lastScroll is updated before the inner handlers have a chance to work with it.

只需连接一个处理程序，并记住上一个滚动位置:

Just hook up a single handler, and remember the last scroll position:

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

实时示例:

(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");
    });
})();

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

这篇关于检测滚动方向-第一个滚动更改方向上的布尔变量错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！