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

在这个jsFiddle的例子中 ,我想降低div的内容的滚动速度,尤其是当使用鼠标滚轮时,因为一个滚轮大约滚动div的高度。

是否有可能用CSS控制,如果没有,JavaScript(也许使用jQuery)?

注意:我意识到,os / browers和浏览器设置的滚动速度可能会有所不同。 但我认为,在大多数情况下,滚动速度(使用鼠标滚轮时)速度太快,所以我想慢下来。

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

话虽如此,有可能有很多方法可以尝试通过移动您自己的内容来抵制滚动来仿冒不同的滚动速度。 不过,我认为在可用性,可访问性和对用户的尊重方面,这样做是一个可怕的想法,但是我会先find目标浏览器触发的事件,指示滚动。

一旦你可以捕捉滚动事件(假设你可以),那么你将能够dynamic调整你的内容,使你想要的部分是可见的。

另一种方法是在Flash中处理这个问题,它至less给你一定程度的滚动事件控制。

滚动速度可以改变,调整,颠倒,以上所有 – 通过JavaScript(或js库,如jQuery)。

你为什么想做这个? 视差只是原因之一。 我不知道为什么有人会反对这样做 – 对于隐藏DIV,向上/向下滑动元素等等,也可能产生同样的否定论点。网站总是技术function和用户体验devise的结合 – 一个好的devise师可以使用几乎所有提高用户体验的技术能力。 这是什么使他/她很好。

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

jsFiddle演示

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; 

资源:

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

我只是基于这个代码做了一个纯Javascript的function。 只有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); } 

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

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

这是一个演示

你也可以试试这个 。 这是一个演示