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


Can I change the scroll speed using css or jQuery?

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

是否可以使用CSS(如果不是，则使用javascript，也许使用jQuery)来控制它？

1
2
3
4
5
.scrollable {
    width: 500px;
    height: 70px;
    overflow: auto;
}
1
    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?

注意：我意识到操作系统/浏览器和浏览器设置之间的滚动速度可能会有所不同。但是我认为在大多数情况下，滚动速度(使用鼠标滚轮时)过快，因此我想放慢速度。

相关讨论

可以通过javascript(或jQuery库，例如jQuery)来更改，调整，反转上述所有滚动速度。

您为什么要这样做？视差只是原因之一。我不知道为什么有人会反对这样做-可以对隐藏DIV，向上/向下滑动元素等提出相同的否定论点。网站始终是技术功能和UX设计的结合-好的设计师可以使用几乎所有改善UX的技术能力。那就是使他/她变得很好的原因。

葡萄牙的托尼·阿尔梅达(Toni Almeida)创作了精彩的演示，转载如下：

jsFiddle Demo

HTML：

1
    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>

javascript / jQuery：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
  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;

来源：

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

相关讨论

不。滚动速度由浏览器确定(通常直接由计算机/设备上的设置确定)。 CSS和Javascript没有(也不应该)有任何方式影响系统设置。

话虽这么说，但您可能有多种方法可以尝试通过伪造不同的滚动速度来移动自己的内容，以抵消滚动。但是，就可用性，可访问性和对用户的尊重而言，我认为这样做是一个可怕的想法，但是我首先要找到目标浏览器触发的指示滚动的事件。

一旦您可以捕获滚动事件(假设可以)，那么您就可以动态调整内容，以便所需的部分可见。

另一种方法是在Flash中处理此问题，这确实使您至少对滚动事件有一定程度的控制。

相关讨论

只需使用此js文件。 (我提到了2个使用不同js文件的示例。希望第二个示例是您所需要的)
您可以通过更改参数来简单地更改滚动量，速度等。

https://github.com/nathco/jQuery.scrollSpeed

这里是演示

您也可以尝试此操作。这是一个演示

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

那是jQuery的独立代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
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);
}
相关讨论