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

Question

在下面的示例中，我想降低 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>

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

Answer 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

Answer 2

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

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

Answer 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);
}