如何强制执行一项「；“平滑滚动”；鼠标滚轮的规则，jQuery？

你好吗？我的问题:

如何控制或指定文档滚动到鼠标滚轮和/或抓取滚动条所描述的所需位置的方式。 我想要的是克服页面滚动的特定默认方法。
在当前工作时，页面会在滚动轮上前进的每一个“凹口”上向右跳转到x像素。或者直接转到拖动滚动条的位置。 我要找的是jquery的一个简单扩展，它可以应用某些滚动规则。强制加速，这将防止页面在没有先加速的情况下移动过快。可设置为以px/秒为单位的速率-具有应用缓和功能的选项…页面可以滑动/移动/拖动的最大px/秒。第三个是减速规则，当页面接近其目标位置时应用（单位为%，px？）。这可能需要通过多种方法中的一种进行计算，而且可能更为棘手。当滚动最后25个像素到目标位置时，减速应用。还有更多。。。我想准备的主要问题是确保我们完全支持小页面滚动，而不是出现问题。
什么样的jQuery方法可以用来以这种方式控制文档？ _凯尔

更新：：： 如果你是的话，谢谢你关注这个问题。好消息。发现了一个很好的插件，希望可以处理，以支持所需的效果，哟！我已经实现了一个完整的页面容器，并使用这个漂亮的jScrollPane脚本来控制页面的滚动

页面的性能已经有了很大的差异。滚轮上的每个滚动凹口都是浏览器本机滚动凹口的三分之一到一半，因此移动速度较慢，这是可以调整的 不过，我们仍然有页面移动的暂停方法

我自己写javascript，但更像是我重写了它。 我认为需要做的是一个由像素组成的“队列”，沿着一个页面滚动，总时间是复合的：然后一个动画足迹被定义并执行为三个阶段，一个是放松加速阶段，一个是maxscrollspeed阶段，一个是减速阶段

有没有人能就我们该怎么做提出一些建议

取消鼠标滚轮的本机滚动页面功能

倾听鼠标滚轮的缺口；在出现凹口的情况下：初始化Core函数以开始页面的移动，但在计算下一个totaldistancetoscroll之前，还要侦听并向“队列”添加额外的凹口单击，该“队列”被重新计算并应用于替换上一个totaldistancetoscroll的窗口滚动，这提供了一种预测目的地并减速的方法。启动移动的核心功能不希望重新启动，因为加速时可能会发生多次切口咔哒声，但应应用重新计算的减速时间和地点

---

再次抱歉没有发布任何实际代码，不确定从何处开始，希望有人知道mwintent是否适用于此，如果适用：可能还有一些想法如何将减速应用于滚动，这似乎是期望效果和当前插件状态之间唯一的两个相似之处。

卡尔·斯维德伯格制作了一个名为jQuery的插件，听起来可能正是你想要的。

我有一个非常相似的问题。我想更改普通页面的滚动功能。我希望每个卷轴都有一个确切的高度，这样页面就只能停在非常特定的位置

我是通过以下方式实现的：

1。使用过的插件

下载并包括以下2个jQuery插件和jQuery本身：

• （另见）
• （另见）

2。鼠标滚轮事件

最简单的方法是以这种方式使用鼠标滚轮插头：

$('body').mousewheel(function(event, delta) { /* code here */ });

变量delta则为负值或正值，具体取决于滚轮是向上还是向下滚动。如果返回false，我认为（！）将禁用正常滚动

3。滚动方法

为了滚动我使用的scrollTo页面，但任何其他插件（如其他答案中建议的Smooth scroll）也应该这样做

4。完整代码

将其放在HTML文件的头部：

<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" src="jquery.mousewheel.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {          
        $('body').mousewheel(function(event, delta) {
            # This if might not be very elegant!
            if (delta < 0) {
                $('body').scrollTo('+=100', 1500 );
            }
            else
                $('body').scrollTo('-=100', 1500 );

            return false;
        });
    });
</script>

$（文档）.ready（函数（）{
$（'body'）。鼠标滚轮（函数（事件，增量）{
#这可能不是很优雅！
if（δ<0）{
$（'body'）。滚动到（'+=100'，1500）；
}
其他的
$（'body'）。滚动到（'-=100'，1500）；
返回false；
});
});

5。演示

---

我在这里创建了一个演示：

我想做的是在本机不支持浏览器的浏览器上模拟浏览器的平滑滚动，这些浏览器在默认情况下关闭了，或者实现得不好

感谢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();
    });

});

$（函数（）{
var top=0，
步骤=55，
视口=$（窗口）.height（），
正文=$.browser.webkit？$（'body'）：$（'html'），
轮子=假；
$（'body'）。鼠标滚轮（函数（事件，增量）{
轮子=真；
if（δ<0）{
顶部=（顶部+视口）>=$（文档）.height（）？顶部：顶部+=台阶；
body.stop（）.animate（{scrollTop:top}，400，函数（）{
轮子=假；
});
}否则{
top=top我的移动效果解决方案

    <div id="parent">
    <div id="child">aaa aaaaaaaaa aaaaaaaa aaaaaaaaaaaa abbbbbbbbbbbbbbbbb bbbbbbbbbbbbcc ccccccc ccccccccccc cccccccd ddddddd ddd ddddd ddddd dddddddd aaaaaaaaaaaa aaaaaaaa aaaaaaaaaaaa abbbbbbbbbbbbbbbbb bbbbbbbbbbbbcc ccccccc ccccccccccc cccccccd ddddddd ddd ddddd ddddd dddddddd aaaaaaaaaaaa aaaaaaaa aaaaaaaaaaaa abbbbbbbbbbbbbbbbb bbbbbbbbbbbbcc ccccccc ccccccccccc cccccccd ddddddd ddd ddddd ddddd dddddddd aaaaaaaaaaaa aaaaaaaa aaaaaaaaaaaa abbbbbbbbbbbbbbbbb bbbbbbbbbbbbcc ccccccc ccccccccccc cccccccd ddddddd ddd ddddd ddddd dddddddd aaaaaaaaaaaa aaaaaaaa aaaaaaaaaaaa abbbbbbbbbbbbbbbbb bbbbbbbbbbbbcc ccccccc ccccccccccc cccccccd ddddddd ddd ddddd ddddd dddddddd aaaaaaaaaaaa aaaaaaaa aaaaaaaaaaaa abbbbbbbbbbbbbbbbb bbbbbbbbbbbbcc ccccccc ccccccccccc cccccccd ddddddd ddd ddddd ddddd dddddddd aaaaaaaaaaaa aaaaaaaa aaa</div>


aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbcccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc
        #parent {
        width: 300px;
        height: 300px;
        background-color: #aaa;
        margin: auto auto;
        overflow: hidden;
    }
    #child {
        width: 200px;
        height: 800px;
        background-color: #999;
        margin: auto auto;
        text-align: justify;
        position: relative;
        top: 0;
        -webkit-transition: all 0.5s ease-out;
}




$('#parent').bind('mousewheel', function (e) {
        if (!(e.originalEvent.wheelDelta == 120)) {
            var top = parseInt($("#child").css("top"));
            $("#child").css("top", (top - 100) + "px");
            top = parseInt($("#child").css("top"));
            if (top <= -500) {
                setTimeout(function () {
                    $("#child").css("top", "-500px");
                }, 100);
            }
        } else {
            var top = parseInt($("#child").css("top"));

            $("#child").css("top", (top + 100) + "px");
            top = parseInt($("#child").css("top"));
            if (top >= 0) {
                setTimeout(function () {
                    $("#child").css("top", "0");
                }, 100);
            }
        }
    });

var $window              = $(window),
    scrollDistance   = 300,
    scrollSpeed      = 500,
    scrollEffect     = 'swing',
    scrollAmount     = 1,
    smoothScroll;

if (! ('ontouchstart' in document.documentElement) && ! $('body').hasClass('modal-open')) {

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

            event.preventDefault();

            if (smoothScroll) {

                // Start scrolling while waiting for final scoll amount (user stopped wheeling)
                if (scrollAmount == 1) {
                    var delta = event.originalEvent.wheelDelta / 120 || -event.originalEvent.detail / 3;
                    var finalScroll = $window.scrollTop() - parseInt(delta * (scrollDistance * scrollAmount));

                    $('html, body').stop().animate({ scrollTop: finalScroll }, scrollSpeed, scrollEffect);
                }

                // Increase scroll amount
                scrollAmount++;

                // Clear current timeout
                clearTimeout(smoothScroll);
            }

            // Set animated scroll
            smoothScroll = setTimeout(function() {

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

                // Reset scroll amoount
                scrollAmount = 1;

                $('html, body').stop().animate({ scrollTop: finalScroll },
                    (scrollSpeed*scrollAmount),
                    scrollEffect
                );

                // Clear timeout holder
                smoothScroll = null;

            }, 100);

        });
}

// Scroll Variables (tweakable)
var defaultOptions = {

    // Scrolling Core
    frameRate        : 100, // [Hz]
    animationTime    : 1200, // [ms]
    stepSize         : 80, // [px]

    // Pulse (less tweakable)
    // ratio of "tail" to "acceleration"
    pulseAlgorithm   : true,
    pulseScale       : 4,
    pulseNormalize   : 1,

    // Acceleration
    accelerationDelta : 50,  // 50
    accelerationMax   : 3,   // 3

    // Keyboard Settings
    keyboardSupport   : true,  // option
    arrowScroll       : 50,    // [px]

    // Other
    touchpadSupport   : false, // ignore touchpad by default
    fixedBackground   : true, 
    excluded          : ''    
};

<script src="file-directory/jquery.js"></script>
<script src="file-directory/lucid.js"></script>

<script>
$(window).on('load', function() {

  $(this).impulse();
});
</script>