¿Puedo cambiar la velocidad de desplazamiento usando css o jQuery?

En el ejemplo siguiente, me gustaría reducir la velocidad de desplazamiento del contenido del div, especialmente cuando se usa la rueda del mouse, ya que un tic de una rueda se desplaza aproximadamente a la altura del div.

¿Es posible controlar eso con CSS, y si no, javascript (quizás usando jQuery)?

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

Nota: me doy cuenta de que la velocidad de desplazamiento puede variar entre os / browers y la configuración del navegador. Pero creo que en la mayoría de los casos, la velocidad de desplazamiento (cuando se usa la rueda del mouse) es demasiado rápida, por lo que me gustaría desacelerarla.

No. La velocidad de desplazamiento está determinada por el navegador (y generalmente directamente por la configuración en la computadora / dispositivo). CSS y Javascript no tienen (o no deberían) afectar la configuración del sistema.

Una vez dicho esto, es probable que haya varias formas en que puede intentar falsificar una velocidad de desplazamiento diferente moviendo su propio contenido de tal manera que contrarreste el desplazamiento. Sin embargo, creo que hacerlo es una idea HORRIBLE en términos de usabilidad, accesibilidad y respeto para sus usuarios, pero comenzaría por encontrar eventos que disparen los navegadores de destino que indiquen desplazamiento.

Una vez que pueda capturar el evento de desplazamiento (asumiendo que pueda), entonces podrá ajustar su contenido dinámicamente para que la porción que desea esté visible.

Otro enfoque sería lidiar con esto en Flash, que le brinda al menos cierto nivel de control sobre los eventos de desplazamiento.

La velocidad de desplazamiento se puede cambiar, ajustar, invertir, todo lo anterior, a través de javascript (o una biblioteca js como jQuery).

¿Por qué querrías hacer esto? Parallax es solo una de las razones. No tengo idea de por qué alguien argumentaría en contra de hacerlo: se pueden hacer los mismos argumentos negativos contra la ocultación de los DIV, los elementos deslizantes hacia arriba / abajo, etc. Los sitios web son siempre una combinación de funcionalidad técnica y diseño UX, un buen diseñador puede usar casi cualquier capacidad técnica para mejorar UX. Eso es lo que lo hace a él / ella bueno.

Toni Almeida de Portugal creó una demo shiny, que se reproduce a continuación:

jsFiddle Demo

HTML:

 
Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops.

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; 

Fuente:

Cómo cambiar la velocidad de desplazamiento predeterminada, scrollamount, scrollinertia de una página web

Solo usa este archivo js. (Mencioné 2 ejemplos con diferentes archivos js. Espero que el segundo sea lo que necesita) Simplemente puede cambiar la cantidad de desplazamiento, la velocidad, etc. cambiando los parámetros.

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

Aquí hay una demostración

También puedes probar esto . Aquí hay una demostración

Acabo de hacer una función pura de Javascript basada en ese código. Demostración de la versión solo de Javascript: http://jsbin.com/copidifiji

Ese es el código independiente de 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); }