如何为mousewheel,jQuery强制执行"平滑滚动"规则？

Question

你好吗？我的问题:

如何控制或指定的方式文档滚动到由两种鼠标滚轮所描述的愿望的位置,和/或抓取滚动条.我想要的是克服页面滚动的特定默认方法.
当它正在工作时,页面向右跳转到滚轮上每个'凹口'下来的x#像素.或者直接转到拖动滚动条的位置.我正在寻找的是jquery的简单扩展,可以应用某些滚动规则.主体很简单.施加加速度,这将防止页面在没有首先加速的情况下移动得太快.可设置为以px/sec为单位的速率,可选择应用缓动功能...页面可以滑动/移动/拖动的最大px /秒.第三个是减速规则,当页面接近它的目标位置时应用(%,px？).这可能必须以多种方式之一进行计算,并且可能更棘手.即,当将最后25个像素滚动到目标位置时,减速度适用.还有更多...我想要准备的主要问题是确保我们完全支持小页面滚动而不是毛病.
可以使用哪种jQuery方法以这种方式控制文档？_kyle

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

页面的性能已经有很大差异.来自滚轮的每个滚动凹口是浏览器原生滚动凹口的三分之一到一半,因此它移动得更慢,这很好,可调节.
不过,我们仍然有页面移动的失速 - 失速 - 失速方法.

我自己写javascript,但更像是我重写它.我认为需要做的是一个由沿着页面滚动的像素构建的"队列",总时间复合:然后定义并执行三个阶段的动画足迹,一个缓和加速,maxscrollspeed阶段和decel相.

任何人都可以就我们的方式提出任何建议

1. 从其滚动页面的本机功能中取出mousescrollwheel.

2. 听听mousescroll的缺口; 并且如果缺口:初始化核心功能以开始页面的移动,但也要监听并添加额外的缺口点击以"重新计算"并应用于窗口滚动替换先前的totaldistancetoscroll的"队列",在计算下一个totaldistancetoscroll之前,它提供了一种预测目的地和减速的方法.开始运动的核心功能不希望重新启动,导致加速时可能发生多次陷波咔嗒声,但只应重新计算何时何地减速.

再次抱歉没有发布任何实际代码,不确定从哪里开始,并希望有人可能知道mwintent是否会为此工作,如果是这样的话:也可能有一些想法如何将减速应用到滚动,这似乎是期望效果与当前插件状态之间的唯一两个区别是相似的.

Answer 1

我想要做的是模拟浏览器在本机不支持它的浏览器上的平滑滚动,默认情况下关闭它或者执行不当.

感谢lumbric的回答,我提出了这个解决方案:

$(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和lumbric帖子中提到的mousescroll插件.

该步 VAR是指有多少像素上的每个鼠标滚轮事件滚动.我发现大约55个像素是大多数系统的默认值.

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

编辑:请注意,我已将上述功能提取到便捷jquery插件中.

Answer 2

Karl Swedberg 制作了一个名为Smooth Scroll 的jQuery 插件，听起来它可能正是您所追求的。