(Javascript)平滑滚动鼠标滚轮

时间:2014-11-26 23:27:58

标签: javascript jquery smooth-scrolling

在我的网站上(仍在建设中 - 忘记了域名 - 以及广告......它的临时性) - http://davidsthilaire.comule.com我已经使用它来实现流畅的鼠标滚轮滚动。< / p>

<script>
        jQuery.extend(jQuery.easing, {
        easeOutQuint: function(x, t, b, c, d) {
        return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
        }
        });

        var wheel = false,
        $docH = $(document).height() - $(window).height(),
        $scrollTop = $(window).scrollTop();

        $(window).bind('scroll', function() {
        if (wheel === false) {
        $scrollTop = $(this).scrollTop();
        }
        });
        $(document).bind('DOMMouseScroll mousewheel', function(e, delta) {
        delta = delta || -e.originalEvent.detail / 3 || e.originalEvent.wheelDelta / 60;
        wheel = true;

        $scrollTop = Math.min($docH, Math.max(0, parseInt($scrollTop - delta * 50)));
        $($.browser.webkit ? 'body' : 'html').stop().animate({
        scrollTop: $scrollTop + 'px'
        }, 3000, 'easeOutQuint', function() {
        wheel = false;
        });
        return false;
        });
    </script>

然而,自从我添加了这段代码和jquery-1.8.3.js插件后,当我最小化浏览器时,我无法向下滚动到页面底部。它虽然在移动设备上完美运行但是我不知道为什么它不能直接滚动到桌面底部的页面底部..有谁知道修复此问题?我很感激。

1 个答案:

答案 0 :(得分:0)

你的代码在滚动时会激活很多动作...一次又一次地使用stop函数只是为了在1ms之后启动另一个动画....每当动画仍然在播放时都会引发一个标志

 if (animate) return;

 $($.browser.webkit ? 'body' : 'html').stop().animate({
    scrollTop: $scrollTop + 'px'
 }, 3000, 'easeOutQuint', function() 
 {
    animate = false;
    wheel = false;
 });
 animate = true;