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

Posted 2023-05-08

【中文标题】如何更改网页的默认滚动速度、滚动量、滚动惯性

【英文标题】：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当你滚动时，页面滚动，元素向上移动并缓慢停止。

【参考方案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 );