javascript - Jquery滚动插件仅向下滚动

标签 javascript jquery html events scroll

我正在使用 jquery 制作一个插件,它利用了鼠标滚动事件。 问题是,即使我向上滚动,它也会向下滚动。

这是我的代码

HTML:

     <body>
        <!-- <div id="element"></div> -->
        <div id='wrapper'>
            <img id='img1' src='./images/image1.jpg'>
        </div>

        <script>
            $(document).ready(function()
            {
                $(document).scrollPage();
            });
        </script>
    </body>

Javascript:

$.extend(Plugin.prototype, {
        init: function () {
            document.addEventListener('scroll', this.checkScroll);
        },
        checkScroll: function(event) {
            //Guess the delta.
            var delta = 0;

            if (event.wheelDelta) {
                delta = event.wheelDelta/120;
            }
            else if (event.detail) {
                delta = -event.detail/3;
            }

            if(delta / 120 > 0){
                console.log('up');
            }
            else{
                console.log('down');
            }
        }
    });

不知何故,当我滚动代码时,代码总是出现在 else 语句中 console.log('down');

这段代码中的公式 delta/120 > 0 是错误的吗?

最佳答案

检查当前的scrollTop 与之前的scrollTop

var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       // downscroll code
   } else {
      // upscroll code
   }
   lastScrollTop = st;
});

关于javascript - Jquery滚动插件仅向下滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33478859/

相关文章:

javascript - 如何在 JQuery 中操作 JSONArray

javascript - Bootstrap 模态未显示。如何解决?

javascript - 使用 HTML CSS JS 为每个外部列表项创建链接

javascript - 容器中的一个 div,其背景可以延伸到无穷大

php - Symfony 和 AJAX 404 响应

javascript - Tau Prolog 的行为与沙箱不同

PHP 用名称替换 radio 输入以进行注册

javascript - 如何在 jQuery 中设置选择下拉菜单的大小

javascript - 如何从 Greasemonkey 脚本中删除此 CSS 规则?

jQuery 未捕获类型错误 : undefined is not a function error