如何实施“平滑滚动"?鼠标滚轮的规则，jQuery? [英] How to enforce a "smooth scrolling" rule for mousewheel, jQuery?

问题描述

你好吗?我的问题:

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

How can I control or specify the way a document scrolls to the position of desire described by either the mouse scrollwheel, and/or grabbing the scrollbar. What I want would be to overcome the particular default method of page scrolling.
As it currently works the page jumps right to x# of pixels down per 'notch' that is progressed on the scrollwheel. Or goes directly to where you drag the scroll bar. What i'm looking for is a simple extension to jquery that can apply certain scrolling rules.The principals are simple. Imposed acceleration, this would prevent the page from moving too fast without first accelerating. settable as a rate of in px/sec- with the option to apply easing functions...There is a maximum px/sec that the page can slide/move/drag. and thirdly is a deceleration rule, applied as the page approaches it's destination position (in %, px?). This may have to be calculated in one of many ways, and may be trickier. ie when scrolling the last 25 pixels to the destination position, the deceleration applys. There's more... The main concern I'd want to prepare for would be ensuring that small page scrolls we're supported fully and not glitchy.
What sort of jQuery approaches could be used to control the document in this way? _kyle

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

Update::: Thanks For following this Q, if you are. Great News. Found a great plugin that hopefully can be handled to be supporting the desired effects, yo! I've implemented a whole page container and used this nifty jScrollPane script to commandeer if you will the scrolling of the page http://jscrollpane.kelvinluck.com/fullpage_scroll.html

页面的性能已经有很大的不同.滚轮上的每个滚动槽口是浏览器本机滚动槽口的三分之一至一半，因此它的移动速度较慢，很好，这是可以调整的.
不过，我们仍然具有页面移动的stall-stall-stall方法.

There is already a big difference in the performance of the page. Each scroll notch from the wheel is a third to a half of the browsers native scroll notch, so it moves slower, which is fine, surly that's adjustable.
We still have the stall-stall-stall method of page movement, though.

我自己编写了javascript，但更像是我重新编写了它. 我认为需要做的是一个像素"队列，该像素队列将在页面上滚动，总时间复杂化:然后将动画足迹定义和执行为三个阶段，即加速，最大滚动速度阶段和减速阶段.

I myself write javascript, but more it's like I re-write it. What I think needs to be done is a "queue" built of pixels to be scrolled along a page, with the total time compounded: and then an animation footprint defined and executed as three phases, an in easing acceleration, maxscrollspeed phase, and decel phase.

任何人都可以对我们如何提供任何建议

Could anybody offer any suggestions as to how we

1. 从滚动页面的本机功能中释放鼠标滚轮.

1. Detatch the mousescrollwheel from its native function of scrolling the page.

收听鼠标滚动的刻痕；并在发生凹口的情况下:初始化核心功能以开始页面的移动，但还要侦听并在队列"中添加其他凹口点击，然后重新计算并应用于窗口的滚动，以替换先前的totaldistancetoscroll，在计算下一个总滚动距离之前，这提供了一种预测目的地并减速的方法.开始运动的核心功能不希望重新启动，因为在加速时可能会出现多次陷波声，而应该重新计算何时何地减速.

listen for notches of the mousescroll; and in the event of a notch: initialize the corefunction to start the movement of the page, but also listen for and add additional notch clicks to "queue" that is re-calulated and applied to the scroll of the window replacing the previous totaldistancetoscroll, before calculating the next totaldistancetoscroll, which provides a way to anticipate the destination and decelerate. The corefunctions to start movement wouldn't want to be restarted, cause multiple notch clicks will probably happen while accelerating, but just a recalculated when and where to decelerate should be applied.

再次抱歉，您尚未发布任何实际代码，不确定是否从何处开始，并希望有人可能知道mwintent是否可以解决此问题，如果可以:可能还有些想法如何将减速应用于滚动条，似乎是期望的效果和当前相似的插件状态之间仅有的两个区别.

Sorry again for not posting any actual code yet, not exactly sure where to start and was hoping someone might know if mwintent will work for this and if so: might also have some ideas how to apply a deceleration to the scroll, which seems to be the only two difference between the desired effect and the state of the current plug-ins that are similar.

推荐答案

我想要做的是模拟在本机不支持，默认关闭或执行不正确的浏览器上浏览器的平滑滚动

What I wanted to do was to simulate browser's smooth scrolling on browsers that don't support it natively, has it turned off by default or has bad implementation of it.

感谢lumbric的回答，我想出了以下解决方案:

Thanks to lumbric's answer I've came up with this solution:

$(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插件.

Put some content on your page long enough to have scrollbars. Then use your mouse wheel. It works on every browser. I've used jQuery-1.7.2 and the mousescroll plugin mentioned in the lumbric's post.

步骤变量表示每次鼠标滚轮事件滚动多少像素.在大多数系统上，我发现〜55像素是默认值.

The step var means how many pixels to scroll on every mouse wheel event. ~55 pixels is what I've found to be the default value on most systems.

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

Also you may want to change the speed for the animation, other than that the rest of the code logic is needed to get the things work properly.

编辑:请注意，我已经将上述功能提取到了方便的 jquery插件中.

Note that I have extracted the above functionality into a convenience jquery plugin.

这篇关于如何实施“平滑滚动"?鼠标滚轮的规则，jQuery?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！