如何更改网页的默认滚动速度、滚动量、滚动惯性答案

【问题标题】：How to change default scrollspeed,scrollamount,scrollinertia of a webpage如何更改网页的默认滚动速度、滚动量、滚动惯性
【发布时间】：2013-01-03 19:03:23
【问题描述】：

我正在尝试更改网页的默认滚动速度，数量和惯性。我google了很多，但没有成功

幸运的是，今天，我找到了a plugin，它允许我们仅在特定的 div 标签内而不是在整个网页中更改滚动速度、数量、惯性。

这是一个基本代码

    $(".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>

问题是我想要整个页面，而不仅仅是特定的 div 元素。任何帮助将不胜感激。请帮助我

提前致谢

【问题讨论】：

“数量和惯性”是什么意思
在这里尝试滚动，manos.malihu.gr/tuts/custom-scrollbar-plugin/… 这是惯性。 Scrollamount 是每次滚动时滚动的数量/%/像素。滚动量越多，滚动越多（滚动量和滚动速度之间存在细线差异）
我真的无法解释，惯性到底是什么意思，........这里有一个例子loisjeans.com/web2012/es当你滚动时，页面滚动，元素向上移动并缓慢停止。

标签： jquery html jquery-ui jquery-plugins

【解决方案1】：

你可以使用 jQuery 来做到这一点，看看我的小提琴：http://jsfiddle.net/promatik/NFk2L/

您可以添加滚动事件的事件侦听器，请注意您可能会阻止滚动的默认操作... if (event.preventDefault) event.preventDefault();

然后该事件的处理程序，使用 jQuery animate，将执行滚动...

function handle(delta) {
    var time = 1000;
    var distance = 300;

    $('html, body').stop().animate({
        scrollTop: $(window).scrollTop() - (distance * delta)
    }, time );
}

可以设置时间、距离（也可以添加缓动方法），完整示例见fiddle

【讨论】：

【解决方案2】：

为什么不将你的 HTML 包装在一个容器 div 中并定位它，就像这样：

<div class="container">
  <div id="I-WILL-APPLY-ONLY HERE" class="I-WILL-APPLY-ONLY HERE">
<!-- Content here -->
  </div>
</div>

然后在 jQuery 中定位你的容器类：

$('.container').mCustomScrollbar...

【讨论】：

想详细说明一下吗？举例说明如何做到这一点？
在您的 HTML 中：'

'，然后在 jQuery 中使用 $(".container")
最好编辑您的答案，而不是使用评论。所以你可以使用（代码）格式。
这正是我不想要的。我想要整个页面而不是特定元素。
但是（正如我正在尝试的那样，显然没有说出来！）如果你将整个页面包装在容器 div 中，那就可以了。

【解决方案3】：

我适应平滑元素工作：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 );
}

【讨论】：