我可以使用 css 或 jQuery 更改滚动速度吗？

Posted 2023-03-06

【中文标题】我可以使用 css 或 jQuery 更改滚动速度吗？

【英文标题】：Can I change the scroll speed using css or jQuery?

【发布时间】：2011-11-16 12:15:18

【问题描述】：

在下面的示例中，我想降低 div 内容的滚动速度，尤其是在使用鼠标滚轮时，因为一个滚轮刻度大约滚动 div 的高度。

是否可以使用 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>

注意：我意识到滚动速度可能因操作系统/浏览器和浏览器设置而异。但是我认为在大多数情况下，滚动速度（使用鼠标滚轮时）太快了，所以我想放慢它。

【参考方案1】：

可以通过 javascript（或 jQuery 等 js 库）更改、调整、反转滚动速度。

您为什么要这样做？视差只是原因之一。我不知道为什么有人会反对这样做——同样的负面论点可以反对隐藏 DIV、向上/向下滑动元素等。网站总是技术功能和 UX 设计的结合——一个好的设计师可以使用几乎所有改进用户体验的技术能力。这就是他/她优秀的原因。

葡萄牙的Toni Almeida 创造了一个精彩的演示，转载如下：

jsFiddle Demo

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:

  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;

来源：

How to change default scrollspeed,scrollamount,scrollinertia of a webpage

【讨论】：

此演示在 Chrome Opera 和 FIreFox 中具有不同的行为

【参考方案2】：

鼠标滚动甚至可以通过事件监听器在浏览器中使用 JS 覆盖。可以通过这种方式防止默认滚动行为，并实现您自己的行为（参见 cssyphus 的回答）。

但是，就可用性、可访问性和对用户的尊重而言，我认为这样做是一个可怕的想法。

【讨论】：

一旦你可以捕捉到滚动事件（假设你可以） - $(window).scroll() 请查看我的回答了解更多信息。

根据此页面上的其他答案，此答案不正确，并且在当前状态下会误导观众。请考虑更新您的答案。

这可能是一个可怕的想法，但不改变速度有时甚至更可怕。例如，我有一个 300 行的表格，当我非常努力时，我可以一次滚动 3 行。那是不可用的。

最终，滚动是动画，而不是跳跃。我猜你认为控制页面中任何元素的动画是你的合法权利。作为前端开发人员，这应该是您的责任。正确的？当我们谈论根元素上几乎不可避免的动画时，您为什么会有不同的想法？

【参考方案3】：

我刚刚基于该代码制作了一个纯 Javascript 函数。 仅 Javascript 版本演示：http://jsbin.com/copidifiji

那是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);

【讨论】：

在向下滚动后立即向上滚动时不起作用