如何为mousewheel,jQuery执行“平滑滚动”规则?

前端之家收集整理的这篇文章主要介绍了如何为mousewheel,jQuery执行“平滑滚动”规则?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
你好吗?我的问题:

如何控制或指定文档滚动到由鼠标滚轮描述的欲望位置和/或抓取滚动条。
我想要的是克服特定的页面滚动的默认方法
目前的工作原理是,页面向右跳转到向下移动到滚轮上的“凹陷”的x像素。或者直接转到拖动滚动条的位置。
我正在寻找的是jQuery的一个简单的扩展,可以应用某些滚动规则。原理很简单。加速加速,这样会阻止页面移动得太快而没有先加速。可设置为以px / sec为单位的速度 – 可以使用缓动功能页面可以滑动/移动/拖动的最大px /秒。第三个是减速规则,当页面接近目标位置时(以%,px为单位)应用。这可能必须以许多方式之一计算,可能会更棘手。即当将最后25个像素滚动到目标位置时,减速应用。还有更多…我想要准备的主要关注点是确保小页面滚动,我们完全支持,而不是毛刺。
可以使用什么样的jQuery方法来以这种方式控制文档?
_kyle

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

页面性能已经有很大的差异。滚轮的每个滚动槽都是浏览器原生滚动槽的三分之一到二分之一,所以它移动得更慢,这是可以调整的。
尽管如此,我们仍然拥有失速摊档的移动方式。

我自己写了javascript,但更多的是我重写它。
我认为需要完成的是一个“沿队列”构建的像素,沿着页面滚动,总时间复合:然后动画足迹定义和执行三个阶段,一个在缓解加速,maxscrollspeed阶段和减速相。

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

>从滚动页面的本机功能中检测鼠标滚轮。
倾听mousescroll的缺口;并且在发生缺陷的情况下:初始化核心功能以开始页面的移动,还可以收听并添加额外的点击次数,将其重新计算并应用到窗口的滚动条上,替换以前的totaldistancetoroll,在计算下一个总距离之前,这提供了一种预期目的地和减速的方法。开始运动的核心功能不会被重新启动,因为加速时可能会发生多次点击,但应该重新计算何时何地减速。

对不起,没有发布任何实际的代码,不完全确定从哪里开始,希望有人可能会知道,如果mwentent将为此工作,如果是这样:也可能有一些想法如何应用减速对滚动,这似乎是期望的效果和当前插件的状态之间的唯一的两个区别是相似的。

解决方法

我想做的是模拟浏览器平滑滚动浏览器,不支持本机,默认关闭或执行不良。

感谢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},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 plugin

猜你在找的jQuery相关文章