Javascript -鼠标轮平滑的视差滚动

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/

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

编辑:这真是个坏主意。永远不要劫持和超越预期的行为。我想当时我对动画太着迷了，做得太过火了。谢天谢地，我们都学习并扩展了对良好UX原则的认识:)

Answer 2

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

使用一个库可以解决大多数情况下的问题，但也值得理解它试图在幕后解决哪些问题。

为了参考起见，鼠标事件是鼠轮和DOMMouseScroll。

Answer 3

此Chrome插件提供了实现此功能所必需的功能。有人用它的缩小版创建了一个要点。它是从一个相当老的版本，但我认为这是好的，因为，正如我已经检查过，最新版本的插件增加了太多的东西。

不过，有几件事的要点是：

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

所以我让我自己创建一个版本来解决这些问题。只需添加脚本并调用SmoothScroll.init()启动即可。