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/

有趣的是，我根本不需要更改现有代码。这会覆盖默认的滚动行为，同时让事件保持打开状态供我像往常一样使用。

编辑：这是一个非常糟糕的主意。永远不要劫持和覆盖预期的行为。我想我当时对动画过于着迷，并且做得过火了。值得庆幸的是，我们都学习并扩展了我们对良好用户体验原则的看法:)

Answer 2

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

在大多数情况下，使用库可以解决问题，但也值得了解它试图在后台解决什么问题。

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

Answer 3

这个plugin for Chrome 提供了必要的功能。有人用minified version of it 创建了一个要点。它来自一个相当旧的版本，但我认为这很好，因为正如我所检查的，最新版本的插件添加了太多东西。

不过，有几件事与这个要点有关：

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

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

Answer 4

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

Kenny 引用的解决方案是一个不错的方法，但它的功能让我抓狂。如果你快速滚动滚轮，它不会滚动得更快。

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

他没有回答的原因是因为如果您在第一个动画完成之前第二次滚动滚轮，则新滚动到高度只是当前滚动高度加上每次滚轮单击滚动的高度。 （因此，如果滚动时间为 0.5 秒，并且您在 0.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

添加到网页非常简单，只需记住在您的网页底部，在您的图像和 HTML 之后包含并初始化这个库。

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

Answer 6

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