jQuery 如何更改网页的默认滚动速度、滚动量、滚动惯性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14426548/
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
How to change default scrollspeed,scrollamount,scrollinertia of a webpage
提问by Rahul Shah
I am tring to change the the default scrolling speed,amount and inertia of a webpage.I google a lot,but in vain
我正在尝试更改网页的默认滚动速度，数量和惯性。我谷歌了很多，但徒劳无功
Fortunately,later,this day,I found a pluginwhich allows us to change the scrollspeed,amount,inertia ONLY WITHIN a particular div tag and not in the entire webpage.
幸运的是，后来，今天，我找到了一个插件，它允许我们仅在特定 div 标签内而不是在整个网页中更改滚动速度、数量和惯性。
Here is a basic code
这是一个基本的代码
$(".I-WILL-APPLY-ONLY HERE").mCustomScrollbar({
set_width:false,
set_height:false,
horizontalScroll:false,
scrollInertia:550,
SCROLLINERTIA:"easeOutCirc",
mouseWheel:"auto",
autoDraggerLength:true,
scrollButtons:{
enable:false,
scrollType:"continuous",
SCROLLSPEED:20,
SCROLLAMOUNT:40
},
advanced:{
updateOnBrowserResize:true,
updateOnContentResize:false,
autoExpandHorizontalScroll:false,
autoScrollOnFocus:true
},
callbacks:{
onScrollStart:function(){},
onScroll:function(){},
onTotalScroll:function(){},
onTotalScrollBack:function(){},
onTotalScrollOffset:0,
whileScrolling:false,
whileScrollingInterval:30
}
});
<div id="I-WILL-APPLY-ONLY HERE" class="I-WILL-APPLY-ONLY HERE">
A basic height in pixels would be defined for this element and any content appearing here will have a different scrollspeed,inertia.Mentioning heignt of this div element is compulsary,else i wont show the output </div>
The issue is that i want for the entire page and not merely withing a particular div element.Any help would be appreciated.Please help me
问题是我想要整个页面，而不仅仅是一个特定的 div 元素。任何帮助将不胜感激。请帮助我
Thanks in advance
提前致谢
回答by António Almeida
You can use jQuery to do that, take a look in my fiddle: http://jsfiddle.net/promatik/NFk2L/
你可以使用 jQuery 来做到这一点，看看我的小提琴：http: //jsfiddle.net/promatik/NFk2L/
You may add an event listener of the scroll event, be aware that you may prevent the Default action of the scroll ...
if (event.preventDefault) event.preventDefault();
您可以添加滚动事件的事件侦听器，请注意您可能会阻止滚动的默认操作...
if (event.preventDefault) event.preventDefault();
Then the handler of that event, using jQuery animate, will perform the scroll ...
然后该事件的处理程序，使用 jQuery animate，将执行滚动...
function handle(delta) {
var time = 1000;
var distance = 300;
$('html, body').stop().animate({
scrollTop: $(window).scrollTop() - (distance * delta)
}, time );
}
You can set the time, distance (and you can also add an easing method), see the full example in the fiddle
您可以设置时间、距离（也可以添加缓动方法），请参阅fiddle 中的完整示例
回答by Hermann Pessoa
My adapt to smooth on element working: Codepen
我对元素工作的平滑适应：Codepen
$('.smooth').on('mousewheel', function(e){
wheel(e.originalEvent, this)
})
function wheel(event, elm) {
var delta = 0;
if (event.wheelDelta) delta = event.wheelDelta / 120;
else if (event.detail) delta = -event.detail / 3;
handle(delta, elm);
if (event.preventDefault) event.preventDefault();
event.returnValue = false;
}
function handle(delta, elm) {
var time = 1000;
var distance = 100;
$(elm).stop().animate({
scrollTop: $(elm).scrollTop() - (distance * delta)
}, time );
}
回答by Calum Gunn
Why not wrap your HTML in a container div and target that, like this:
为什么不将您的 HTML 包装在一个容器 div 中并以此为目标，如下所示：
<div class="container">
<div id="I-WILL-APPLY-ONLY HERE" class="I-WILL-APPLY-ONLY HERE">
<!-- Content here -->
</div>
</div>
Then target your container class in the jQuery:
然后在 jQuery 中定位您的容器类：
$('.container').mCustomScrollbar...
