jquery - 如何对鼠标滚轮、jQuery 强制执行 "smooth scrolling"规则？

Question

你好吗？我的问题:

如何控制或指定文档滚动到通过鼠标滚轮和/或抓取滚动条描述的所需位置的方式。我想要的是克服页面滚动的特定默认方法。
目前，页面会根据滚轮上的每个“凹口”向右跳转到 x# 像素。或者直接拖动滚动条到您所在的位置。我正在寻找的是 jquery 的简单扩展，可以应用某些滚动规则。原理很简单。施加加速，这将防止页面在没有首先加速的情况下移动得太快。可设置为 px/sec 的速率，并可选择应用缓动函数...页面可以滑动/移动/拖动的最大 px/sec。第三是减速规则，当页面接近其目标位置时应用(以％，px？)。这可能必须以多种方式之一来计算，并且可能更棘手。即，当将最后 25 个像素滚动到目标位置时，会应用减速。还有更多...我想要准备的主要问题是确保我们完全支持小页面滚动并且不会出现故障。
什么样的 jQuery 方法可以用来以这种方式控制文档？_凯尔

更新:::感谢您关注此问题(如果您愿意)。好消息。找到了一个很棒的插件，希望可以处理它以支持所需的效果，哟!我已经实现了一个完整的页面容器，并使用这个漂亮的 jScrollPane 脚本来控制页面的滚动 http://jscrollpane.kelvinluck.com/fullpage_scroll.html

页面的性能已经有很大的差异。滚轮上的每个滚动槽口都是浏览器 native 滚动槽口的三分之一到一半，因此移动速度较慢，这很好，当然可以调节。
不过，我们仍然有页面移动的“停顿-停顿-停顿”方法。

我自己写了 javascript，但更多的是我重写了它。我认为需要做的是一个由要沿着页面滚动的像素构建的“队列”，总时间复合:然后将动画足迹定义为三个阶段并执行，即缓动加速、最大滚动速度阶段和减速阶段。

有人可以就我们如何做提供任何建议吗

1. 将 mousescrollwheel 与其滚动页面的 native 功能分离。

2. 监听鼠标滚动的凹口；如果出现缺口:初始化核心函数以启动页面的移动，同时还要监听并向“队列”添加额外的缺口点击，该“队列”将重新计算并应用于窗口的滚动，替换之前的总距离滚动，在计算下一个总滚动距离之前，这提供了一种预测目的地和减速的方法。开始运动的核心功能不想重新启动，因为加速时可能会发生多个凹口点击，但只需重新计算何时何地减速即可。

再次抱歉，尚未发布任何实际代码，不完全确定从哪里开始，希望有人知道 mwintent 是否适用于此，如果是的话:可能还有一些想法如何对滚动应用减速，这似乎是想要的效果和当前插件的状态之间唯一的两个区别是相似的。

Answer 1

我想做的是在本身不支持浏览器、默认情况下关闭浏览器或实现不良的浏览器上模拟浏览器的平滑滚动。

感谢 Lubric 的回答，我想出了这个解决方案:

$(function () {

    var top = 0,
        step = 55,
        viewport = $(window).height(),
        body = $.browser.webkit ? $('body') : $('html'),
        wheel = false;


    $('body').mousewheel(function(event, delta) {

        wheel = true;

        if (delta < 0) {

            top = (top+viewport) >= $(document).height() ? top : top+=step;

            body.stop().animate({scrollTop: top}, 400, function () {
                wheel = false;
            });
        } else {

            top = top <= 0 ? 0 : top-=step;

            body.stop().animate({scrollTop: top}, 400, function () {
                wheel = false;
            });
        }

        return false;
    });

    $(window).on('resize', function (e) {
        viewport = $(this).height();
    });

    $(window).on('scroll', function (e) {
        if (!wheel)
            top = $(this).scrollTop();
    });

});

在页面上放置一些足够长的内容以形成滚动条。然后使用鼠标滚轮。它适用于每个浏览器。我使用了 jQuery-1.7.2 和 Lubric 帖子中提到的 mousescroll 插件。

step 变量表示每个鼠标滚轮事件上滚动的像素数。我发现 ~55 像素是大多数系统上的默认值。

此外，您可能想更改动画的速度，除了需要其余的代码逻辑才能使事情正常工作。

编辑:请注意，我已将上述功能提取到一个方便的 jquery plugin 中。 .