如何对mousewheel，jQuery强制执行“平滑滚动”规则？
你好吗？ 我的问题：
如何控制或指定文档滚动到鼠标滚轮所描述的欲望位置和/或抓住滚动条的方式。 我想要的是克服页面滚动的特定默认方法。
当它正在工作时，页面向右跳转到滚轮上每个“凹口”下降的x＃像素。 或者直接转到拖动滚动条的位置。 我正在寻找的是jquery的简单扩展，可以应用某些滚动规则。主体很简单。 施加加速度，这将防止页面在没有首先加速的情况下移动得太快。 可设置为以px / sec为单位的速率 – 可选择应用缓动function…页面可以滑动/移动/拖动的最大px /秒。 第三个是减速规则，当页面接近它的目标位置时应用（％，px？）。 这可能必须以多种方式之一来计算，并且可能更棘手。 即，当将最后25个像素滚动到目标位置时，减速度适用。 还有更多…我想要准备的主要问题是确保小页面滚动我们得到充分支持而不是毛病。
可以使用哪种jQuery方法以这种方式控制文档？ _kyle
更新:::感谢您关注此问题，如果您是。 好消息。 找到一个很棒的插件，希望可以处理以支持所需的效果，哟！ 我已经实现了一个整页容器并使用这个漂亮的jScrollPane脚本来命令你是否要滚动页面http://jscrollpane.kelvinluck.com/fullpage_scroll.html
页面的性能已经有很大差异。 来自滚轮的每个滚动凹口是浏览器原生滚动凹口的三分之一到一半，因此它移动得更慢，这很好，可调节。
不过，我们仍然有页面移动的失速 – 失速 – 失速方法。
我自己写javascript，但更像是我重写它。 我认为需要做的是构建像素的“队列”，沿着页面滚动，总时间复合：然后动画足迹定义并执行为三个阶段，缓和加速，maxscrollspeed阶段和decel相。
任何人都可以就我们的方式提出任何建议
-
从其滚动页面的本机function中取出mousescrollwheel。
-
听取mousescroll的缺口; 并且如果存在缺口：初始化核心function以开始页面的移动，还要监听并添加额外的缺口点击以“重新计算”并应用于窗口滚动替换先前的totaldistancetoscroll的“队列”，在计算下一个totaldistancetoscroll之前，它提供了一种预测目的地和减速的方法。 开始运动的核心function不希望重新启动，导致加速时可能发生多次缺口点击，但只应重新计算何时何地减速。
再次抱歉没有发布任何实际的代码，不确定从哪里开始，并希望有人可能知道mwintent是否会为此工作，如果是这样的话：也可能有一些想法如何将减速应用到滚动，这似乎是所需效果与当前插件状态相似的唯一两个区别。
我想要做的是模拟浏览器在本机不支持它的浏览器上的平滑滚动，默认情况下是关闭浏览器还是执行不好。
感谢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和lumbricpost中提到的mousescroll插件。
步骤 var表示在每个鼠标滚轮事件上滚动多少像素。 我发现大约55个像素是大多数系统的默认值。
此外，您可能希望更改动画的速度，除了需要其余的代码逻辑才能使事情正常工作。
编辑：请注意，我已将上述function提取到一个方便的jquery插件中 。
我有一个非常类似的问题。 我想更改普通页面的滚动function。 我希望每个卷轴都具有特定的高度，以便页面仅停留在非常特定的位置。
我通过以下方式实现了它：
1.使用过的插件
下载并包含以下2个jQuery插件和jQuery本身：
- scrollTo （另见这里 ）
- 鼠标滚轮 （另见此处 ）
2.鼠标滚轮事件
最简单的方法是以这种方式使用鼠标滚轮：
$('body').mousewheel(function(event, delta) { /* code here */ });
变量delta则为负或正，这取决于车轮是向上还是向下滚动。 如果你返回false我认为（！）它会禁用正常滚动。
3.滚动方法
为了滚动页面，我使用了scrollTo，但是任何其他插件（如在另一个答案中建议的Smooth Scroll）也应该这样做。
4.完整的代码
将它放在HTML-File的头部：
5.演示
我在这里创建了一个演示： http ： //pastehtml.com/view/ba0ziusqk.html
你想尝试一下这个
https://github.com/galambalazs/smoothscroll-for-websites
它有很好的设置来调整动画，似乎维护得很好。
// 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 : '' };
Karl Swedberg创建了一个名为Smooth Scroll的jQuery插件，听起来它可能正是你所追求的。
我的解决方案与移动效果
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
#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); } } });
演示
这是一个很好的解决方案，请查看http://ataredo.com/morphology/lucidscroll/
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); }); }