我可以使用 css 或 jQuery 更改滚动速度吗? [英] Can I change the scroll speed using css or jQuery?

问题描述

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

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

.scrollable {宽度:500px；高度:70px；溢出:自动；}

Sed ut perspiciatis unde omnis iste natus error sat voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illoinvente veritatis et quasi architecto beatae vitae dicta sunt explicabo.Nemo enim ipsam voluptatem quia voluptas 坐 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 sat amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut laboure 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 moestiae consequatur, velillum qui dolorem eum fugiat quo voluptas nulla pariatur?

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

解决方案

滚动速度可以改变、调整、反转，以上所有 - 通过 javascript(或 js 库，如 jQuery).

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

葡萄牙的

Toni Almeida 制作了精彩的演示，转载如下:

jsFiddle 演示

HTML:

使用鼠标滚轮(不是滚动条)滚动此 DIV.您将看到滚动最终变慢，然后停止.<span class="boldit">使用鼠标滚轮(不是滚动条)来滚动这个 DIV.您将看到滚动最终变慢，然后停止.</span>

javascript/jQuery:

 功能轮(事件){无功增量 = 0;if (event.wheelDelta) {(delta = event.wheelDelta/120);}else if (event.detail) {(delta = -event.detail/3);}处理(增量)；如果(event.preventDefault){(event.preventDefault())；}event.returnValue = false;}函数句柄(增量){无功时间 = 1000;无功距离= 300；$('html, body').stop().animate({scrollTop: $(window).scrollTop() - (distance * delta)}， 时间 );}if (window.addEventListener) {window.addEventListener('DOMMouseScroll', wheel, false);}window.onmousewheel = 文档.onmousewheel = 轮子；

来源:

如何更改默认滚动速度,scrollamount, 网页的滚动惯性

In the example below, I would like to reduce the scroll speed of the div's content, especially when using the mouse wheel, as one wheel tick scrolls approximately the div's height.

Is it possible to control that with CSS, and if not, javascript (perhaps using 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>

Note: I realize that the scroll speed might differ between os/browers and browser settings. But I think that in the majority of the cases, the scroll speed (when using the mouse wheel) is too fast, so I would like to slow it down.

解决方案

The scroll speed CAN be changed, adjusted, reversed, all of the above - via javascript (or a js library such as jQuery).

WHY would you want to do this? Parallax is just one of the reasons. I have no idea why anyone would argue against doing so -- the same negative arguments can be made against hiding DIVs, sliding elements up/down, etc. Websites are always a combination of technical functionality and UX design -- a good designer can use almost any technical capability to improve UX. That is what makes him/her good.

Toni Almeida of Portugal created a brilliant demo, reproduced below:

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;

Source:

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

这篇关于我可以使用 css 或 jQuery 更改滚动速度吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！