it-swarm.it

Posso cambiare la velocità di scorrimento usando css o jQuery?

Nell'esempio che segue, vorrei ridurre la velocità di scorrimento del contenuto del div, specialmente quando si utilizza la rotellina del mouse, poiché un segno di spunta della rotellina scorre approssimativamente all'altezza del div.

È possibile controllarlo con CSS e, in caso contrario, javascript (forse usando 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>

Nota: Mi rendo conto che la velocità di scorrimento potrebbe differire tra os/browser e le impostazioni del browser. Ma penso che nella maggior parte dei casi, la velocità di scorrimento (quando si utilizza la rotellina del mouse) è troppo elevata, quindi vorrei rallentarla.

39

La velocità di scorrimento PU CAN essere cambiata, regolata, invertita, tutto quanto sopra - tramite javascript (o una libreria js come jQuery).

PERCHÉ vorresti farlo? Parallax è solo uno dei motivi. Non ho idea del perché qualcuno possa contestare di farlo - gli stessi argomenti negativi possono essere fatti contro il nascondere DIV, elementi scorrevoli su/giù, ecc. I siti Web sono sempre una combinazione di funzionalità tecnica e design UX - un buon designer può usare quasi ogni capacità tecnica per migliorare la UX. Questo è ciò che lo rende buono.

Toni Almeida del Portogallo ha creato una brillante demo, riprodotta di seguito:

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;

Fonte:

Come modificare la velocità di scorrimento predefinita, la quantità di scorrimento, l'inerzia di scorrimento di una pagina Web

74
cssyphus

No. La velocità di scorrimento è determinata dal browser (e di solito direttamente dalle impostazioni sul computer/dispositivo). CSS e Javascript non hanno (o non dovrebbero avere) alcun modo di influenzare le impostazioni di sistema.

Detto questo, ci sono probabilmente diversi modi in cui potresti provare a fake una diversa velocità di scorrimento spostando i tuoi contenuti in modo tale da contrastare lo scrolling. Tuttavia, penso che farlo sia un'idea [~ # ~] orribile [~ # ~] in termini di usabilità, accessibilità e rispetto per i tuoi utenti, ma Vorrei iniziare trovando gli eventi attivati ​​dai browser di destinazione che indicano lo scorrimento.

Una volta che puoi catturare l'evento scroll (supponendo che tu possa farlo), allora sarai in grado di adattare dinamicamente i tuoi contenuti in modo che la porzione desiderata sia visibile.

Un altro approccio sarebbe quello di affrontarlo in Flash, che lo fa ti dà almeno alcuni livello di controllo sugli eventi di scorrimento.

15
cdeszaq

Usa questo file js. (Ho citato 2 esempi con diversi file js. Spero che il secondo sia quello che ti serve) Puoi semplicemente cambiare la quantità di scorrimento, la velocità ecc. Cambiando i parametri.

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

Ecco un Demo

Puoi anche provare questo . Ecco un demo

7
anu g prem

Ho appena creato una pura funzione Javascript basata su quel codice. Demo della versione solo Javascript: http://jsbin.com/copidifiji

Questo è il codice indipendente da 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