Question

我有一个页面，我正在应用视差效果。这是使用translate3d完成的。现在，虽然这很好用，但我想知道如何在使用鼠标滚轮滚动时覆盖默认的“步骤”？

如果我使用滚动条滚动，一切都很好。但是使用鼠标滚轮，一切都很蠢。

我是以一种非常直接的方式做到这一点：

    var prefix = Modernizr.prefixed('transform');
    $window.on('scroll', function(){
        var scroll_top = $window.scrollTop();
        if(scroll_top < forside_infographics_offset){
            $_('#slider').css(prefix , "translate3d(0,"+(scroll_top/3)+"px,0)");
        }

    });

现在，我已经看到这个滚动超级平滑的网站，还有一个带有台阶的鼠标滚轮。我试着查看代码，他似乎正在使用requestAnimationFrame，但是他如何实现这种精确的滚动效果，我不确定。

http://cirkateater.no/

有什么想法吗？

Answer 1

经过大量研究后，我找到了一个非常简单的解决方案:) http://bassta.bg/demos/smooth-page-scroll/

有趣的是，我根本不需要改变现有的代码。这会覆盖默认的滚动行为，同时让我打开事件，就像我通常那样。

Answer 2

使用鼠标滚轮滚动需要特殊处理。每个鼠标滚轮滚动的原因不会将内容滚动一定量的像素。每个卷轴都会导致页面跳转，然后每次跳转都会导致“跳跃”的抖动动画，因为背景图像正试图将自己定位在这些跳跃中。

使用库可以在大多数时间解决问题，但也值得了解它试图解决的问题。

仅供参考，鼠标事件为mousewheel和DOMMouseScroll

Answer 3

此plugin for Chrome提供了必要的功能。有人用minified version of it创建了一个要点。它来自一个非常古老的版本，但我认为这很好，因为我已经检查过，最新版本的插件增加了太多东西。

尽管有一些要点：

在启动之前检查浏览器是否为Chrome。
自动启动。
它使用jQuery。

所以我让自己创建一个version来解决这些问题。只需添加脚本并致电SmoothScroll.init()即可开始。

Answer 4

编辑：测试时我发现这有一个重大错误。虽然我的版本（在我看来）表现得比原始代码好得多，但遗憾的是它没有考虑通过其他方式滚动（滚动条/中间点击和拖动）。通过其中一种方法滚动然后使用鼠标滚轮滚动会使其恢复到上次滚动鼠标滚轮时所处的滚动位置。当我为此开发解决方案时，我会更新。

Kenny的引用解决方案是一种很好的方法，但它的功能让我疯狂。如果您快速滚动滚轮，它将不会更快地滚动。

我对其进行了改进，无论鼠标滚轮旋转速度如何，每次点击都会滚动指定的距离。

他的回答没有的原因是因为如果你在第一个动画完成之前第二次滚动滚轮，新滚动到高度只是当前的滚动高度加上每轮滚动滚动多少。（因此，如果滚动时间为.5秒，并且您在.25秒后滚动第二次，那么它将滚动1.5倍轮距滚动距离而不是该距离的2倍）

这是深夜，我希望这是有道理的。

这里没有重复我的代码：

必需的库

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/ScrollToPlugin.min.js"></script>

滚动代码

<script>
    $(function(){   
        var $window = $(window)
        var $scoll = $('#page-container')
        var scrollTime = 0.5
        var scrollDistance = 120

        var scrollTop = $scoll.scrollTop()

        $window.on("mousewheel DOMMouseScroll", function(event){

            event.preventDefault()  

            var delta = event.originalEvent.wheelDelta/120 || -event.originalEvent.detail/3
            scrollTop = scrollTop - parseInt(delta*scrollDistance)
            scrollTop = Math.max(0, Math.min($scoll[0].scrollHeight, scrollTop))

            TweenMax.to($scoll, scrollTime, {
                scrollTo : { y: scrollTop, autoKill:true },
                    ease: Power1.easeOut,
                    overwrite: 5                            
                })

        })
    })
</script>

Answer 5

很棒的问题。

我使用的库是这样的： https://github.com/cferdinandi/smooth-scroll

只需包含smoothscroll.js文件，然后完成工作。现在，鼠标滚轮可以在页面上顺畅地轻松下载，而不是以像素块的形式向下跳跃。

它确实改善了视差网页的外观。

不过，对于视差图像，我使用这个库：

https://github.com/pederan/Parallax-ImageScroll

添加到网页非常简单，只需记住在网页底部</ em>中包含并初始化此库，您的图片和HTML。

（我没有意识到这会有所作为，但绝对可以！）

Answer 6

我知道我迟到了，但在偶然发现 I Love me Wellness' 网站后，我今天正在研究平滑滚动的主题。分析站点 JavaScript，我发现他们使用了一个名为 Luxy.js 的 vanillaJS 脚本，该脚本在 GitHub 上的 Luxy.js 上展示。我觉得效果比较满意。如果实施得好，我不认为这是一个非常糟糕的主意。而且很容易实现。

Javascript - 使用鼠标滚轮平滑视差滚动

6 个答案: