Javascript - 使用鼠标滚轮平滑视差滚动 [英] Javascript - Smooth parallax scrolling with mouse wheel

问题描述

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

I have a page where I'm applying a parallax effect. This is accomplished using translate3d. Now, while this works well, I'm wondering how I can override the default "steps" when scrolling with the mouse wheel?

如果我用滚动条滚动，一切都很好.但是使用鼠标滚轮，一切都变得神经质.

If I scroll with the scrollbars, everything is fine. But with the mouse wheel, it's all jumpy.

我以一种非常直接的方式来做这件事:

I'm doing this in a pretty straight forward way:

    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，但是他是如何实现这种精确的滚动效果的，我不确定.

Now, I've seen this site where the scrolling is super smooth, also with a mouse wheel with steps on it. I've tried to look at the code, and he's using requestAnimationFrame is seems, but how he accomplish this excact scrolling effect, I'm not sure.

http://cirkateater.no/

有什么想法吗?

推荐答案

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

After doing a lot of research, I found a pretty easy solution :) http://bassta.bg/demos/smooth-page-scroll/

有趣的是，我根本不需要更改我现有的代码.这会覆盖默认的滚动行为，同时让我像往常一样使用该事件.

Interestingly enough, I didn't have to alter my existing code at all. This overrides the default scroll behaviour, while leaving the event open for me to use like I would normally do.

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

This is a really bad idea. Never ever hijack and override expected behavior. I guess I was overly fascinated with animations back then and overdid everything. Thankfully we all learn and expand our perceptions of good UX principles :)

这篇关于Javascript - 使用鼠标滚轮平滑视差滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！