Question

如何在jquery / javascript中计算鼠标滚动？像初始值0和向下滚动++ 1并向上滚动--1。而不是-1。必须是积极的。

如果我向下滚动2次，则值将为2，然后向上滚动一次，然后值为1.

Answer 1

$(document).ready(function(){
    var scrollPos = 0;
    var Counter = 0;
    $(window).scroll(function(){
        var scrollPosCur = $(this).scrollTop();
        if (scrollPosCur > scrollPos) {
            Counter -= 1;
        } else {
            Counter += 1;
        }
        scrollPos = scrollPosCur;
    });
});

代码比较滚动条的位置。 scrollPos显示向下移动滚动条的像素数，并使用值0进行初始化，因为它从顶部开始。

滚动页面时，scrollPosCur将首先保存滚动条的当前位置。之后我们比较值的变化：

如果当前值大于保存的值，则表示滚动条已向下移动，因此Counter会增加1。类似于此，当Counter小于1时，我们将scrollPosCur减去scrollPos。

为了使代码保持有效，我们保存当前值以与将来的滚动事件进行比较。

Answer 2

scrollcount=0;
$(document).ready(function(){
  $("div").scroll(function(){
    $("span").text(scrollcount+=1);
  });
});

Answer 3

以下是您的问题的可能解决方案

var scrollCount = 0, 
    latestScrollTop = 0,
    doc = document.documentElement,
    top = 0;

// Bind window scroll event
$(window).bind('scroll', function (e) {
    top = (window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0);

    if (latestScrollTop < top) {
        // Scroll down, increment value
        scrollCount += 1;
    } else {
        // Scroll up, decrement value
        scrollCount -= 1;
    }

    // Store latest scroll position for next position calculation
    latestScrollTop = top;
});

Answer 4

$(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            $('.scrollToTop').fadeIn();
        } else {
            $('.scrollToTop').fadeOut();
        }
    });

    //Click event to scroll to top
    $('.scrollToTop').click(function () {
        $('html, body').animate({ scrollTop: 0 }, 800);
        return false;
    });

如何计算jquery中的鼠标滚轮滚动

4 个答案: