我可以使用 css 或 jQuery 更改滚动速度吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7408100/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I change the scroll speed using css or jQuery?
提问by Benjamin Crouzier
In the example below, I would like to reduce the scroll speed of the div's content, especially when using the mouse wheel, as one wheel tick scrolls approximately the div's height.
在下面的示例中，我想降低 div 内容的滚动速度，尤其是在使用鼠标滚轮时，因为一个滚轮刻度大约滚动 div 的高度。
Is it possible to control that with CSS, and if not, javascript (perhaps using jQuery) ?
是否可以使用 CSS 来控制它，如果不能，则使用 javascript（也许使用 jQuery）？
.scrollable {
width: 500px;
height: 70px;
overflow: auto;
}<div class="scrollable">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</div>Note:I realize that the scroll speed might differ between os/browers and browser settings. But I think that in the majority of the cases, the scroll speed (when using the mouse wheel) is too fast, so I would like to slow it down.
注意：我意识到操作系统/浏览器和浏览器设置之间的滚动速度可能不同。但我认为在大多数情况下，滚动速度（使用鼠标滚轮时）太快了，所以我想放慢速度。
回答by cssyphus
The scroll speed CAN be changed, adjusted, reversed, all of the above - via javascript (or a js library such as jQuery).
滚动速度可以改变，调整，反转，以上所有 - 通过javascript（或js库，如jQuery）。
WHY would you want to do this? Parallax is just one of the reasons. I have no idea why anyone would argue against doing so -- the same negative arguments can be made against hiding DIVs, sliding elements up/down, etc. Websites are always a combination of technical functionality and UX design -- a good designer can use almost any technical capability to improve UX. That is what makes him/her good.
你为什么想做这个？视差只是原因之一。我不知道为什么有人会反对这样做——同样的否定论点可以反对隐藏 DIV、向上/向下滑动元素等。网站总是技术功能和用户体验设计的结合——一个好的设计师可以使用几乎所有改善用户体验的技术能力。这就是他/她的优点。
Toni Almeidaof Portugal created a brilliant demo, reproduced below:
葡萄牙的托尼·阿尔梅达( Toni Almeida) 制作了精彩的演示，转载如下：
HTML:
HTML：
<div id="myDiv">
Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. <span class="boldit">Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. </span>
</div>
javascript/jQuery:
javascript/jQuery：
function wheel(event) {
var delta = 0;
if (event.wheelDelta) {(delta = event.wheelDelta / 120);}
else if (event.detail) {(delta = -event.detail / 3);}
handle(delta);
if (event.preventDefault) {(event.preventDefault());}
event.returnValue = false;
}
function handle(delta) {
var time = 1000;
var distance = 300;
$('html, body').stop().animate({
scrollTop: $(window).scrollTop() - (distance * delta)
}, time );
}
if (window.addEventListener) {window.addEventListener('DOMMouseScroll', wheel, false);}
window.onmousewheel = document.onmousewheel = wheel;
Source:
来源：
How to change default scrollspeed,scrollamount,scrollinertia of a webpage
回答by cdeszaq
No. Scroll speed is determined by the browser (and usually directly by the settings on the computer/device). CSS and Javascript don't (or shouldn't) have any way to affect system settings.
否。滚动速度由浏览器决定（通常直接由计算机/设备上的设置决定）。CSS 和 Javascript 没有（或不应该）影响系统设置的任何方式。
That being said, there are likely a number of ways you could try to fakea different scroll speed by moving your own content around in such a way as to counteract scrolling. However, I think doing so is a HORRIBLEidea in terms of usability, accessibility, and respect for your users, but I would start by finding events that your target browsers fire that indicate scrolling.
话虽如此，您可能有多种方法可以通过以抵消滚动的方式移动自己的内容来尝试伪造不同的滚动速度。但是，我认为这样做在可用性、可访问性和对用户的尊重方面是一个可怕的想法，但我会首先查找您的目标浏览器触发的指示滚动的事件。
Once you can capture the scroll event (assuming you can), then you would be able to adjust your content dynamically so that the portion you want is visible.
一旦您可以捕获滚动事件（假设您可以），那么您就可以动态调整您的内容，以便您想要的部分可见。
Another approach would be to deal with this in Flash, which doesgive you at least somelevel of control over scrolling events.
另一种方法是在 Flash 中处理这个问题，它至少可以让您对滚动事件进行一定程度的控制。
回答by anu g prem
Just use this js file. (I mentioned 2 examples with different js files. hope the second one is what you need) You can simply change the scroll amount, speed etc by changing the parameters.
只需使用这个js文件。（我提到了 2 个不同 js 文件的示例。希望第二个是您需要的）您可以通过更改参数来简单地更改滚动量、速度等。
https://github.com/nathco/jQuery.scrollSpeed
https://github.com/nathco/jQuery.scrollSpeed
Here's a Demo
这是一个演示
回答by user3768564
I just made a pure Javascript function based on that code. Javascript only version demo: http://jsbin.com/copidifiji
我刚刚根据该代码制作了一个纯 Javascript 函数。仅 Javascript 版本演示：http: //jsbin.com/copidifiji
That is the independent code from jQuery
那是来自 jQuery 的独立代码
if (window.addEventListener) {window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;}
function wheel(event) {
var delta = 0;
if (event.wheelDelta) delta = (event.wheelDelta)/120 ;
else if (event.detail) delta = -(event.detail)/3;
handle(delta);
if (event.preventDefault) event.preventDefault();
event.returnValue = false;
}
function handle(sentido) {
var inicial = document.body.scrollTop;
var time = 1000;
var distance = 200;
animate({
delay: 0,
duration: time,
delta: function(p) {return p;},
step: function(delta) {
window.scrollTo(0, inicial-distance*delta*sentido);
}});}
function animate(opts) {
var start = new Date();
var id = setInterval(function() {
var timePassed = new Date() - start;
var progress = (timePassed / opts.duration);
if (progress > 1) {progress = 1;}
var delta = opts.delta(progress);
opts.step(delta);
if (progress == 1) {clearInterval(id);}}, opts.delay || 10);
}
