Question

我希望在转动鼠标滚轮时实现平滑滚动。目前，当我转一圈时，滚动条有点跳跃，动画很跳跃。

此行为的示例： http://areaaperta.com/nicescroll/

只能使用skrollr实现滚动吗？如果是这样，怎么样？我尝试了以下代码

var s = skrollr.init({
render: function(data) {

            //Debugging - Log the current scroll position.
            console.log(data.curTop);
        },

        smoothScrolling: true,
        smoothScrollingDuration: 500,
                    easing: {
            WTF: Math.random,
            inverted: function(p) {
                return 1-p;
            }
        }
    });

但它并没有产生很大的影响。动画稍微平滑一些（即背景幻灯片暂停一段时间然后停止），但滚动本身仍然是跳跃的。

我更倾向于使用skrollr来解决这个问题，因为我认为它是为它准备的而不是添加另一个插件。

Answer 1

引自Petr Tichy（ihatetomatoes.net）：

对于流畅的动画，动画便宜的属性。

当你只为廉价的CSS制作动画时，你将获得最好的结果   属性。


transform：scale（1.2）

transform：translateX（100px）

transform：rotate（90deg）

不透明度：0.5


这4个属性可让您更改大小，位置，旋转   和元素的不透明度。

这些CSS属性的组合将使您能够创建漂亮   你们大多数人的想法都会给你带来最好的结果。

如果你遇到滞后和不连贯的滚动动画，请给出   动画元素变换：translateZ（0）。

这会将元素提升为复合图层并将被删除   滞后。

Answer 2

尝试包含此脚本

jQuery(function () {

        var $window = jQuery(window);
        var scrollTime = 0.5;
        var scrollDistance = 150;


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

            event.preventDefault();

            var delta = event.originalEvent.wheelDelta / 120 || -event.originalEvent.detail / 3;
            var scrollTop = $window.scrollTop();
            var finalScroll = scrollTop - parseInt(delta * scrollDistance);

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

        });

    });

Answer 3

我也遇到了这个问题（在Mac上使用Chrome）

我解决了这个插件： https://github.com/simov/simplr-smoothscroll

<!-- After jQuery -->
<script src="jquery.mousewheel.min.js"></script>
<script src="jquery.simplr.smoothscroll.min.js"></script>
<script type="text/javascript">$.srSmoothscroll();</script>

Skrollr：平滑滚动

3 个答案: