it-swarm.cn

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

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

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

39
Benjamin Crouzier

可以通过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;

资源:

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

74
cssyphus

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

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

一旦可以捕获滚动事件(假设可以),便可以动态调整内容,以便所需部分可见。

另一种方法是在Flash中处理此问题,其中至少给您some对滚动事件的控制级别。

15
cdeszaq

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

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

这是一个 演示

您也可以尝试 this 。这是一个 演示

7
anu g prem

我只是基于该代码制作了一个纯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);
}
4
user3768564