web-dev-qa-db-fra.com

Puis-je changer la vitesse de défilement en utilisant css ou jQuery?

Dans l'exemple ci-dessous, je voudrais réduire la vitesse de défilement du contenu de la div, en particulier lorsque vous utilisez la molette de la souris, car une tique de roulette fait défiler approximativement la hauteur de la div.

Est-il possible de contrôler cela avec CSS, et sinon, javascript (peut-être en utilisant 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>

Remarque: Je me rends compte que la vitesse de défilement peut différer entre les os/browers et les paramètres du navigateur. Mais je pense que dans la majorité des cas, la vitesse de défilement (lors de l'utilisation de la molette de la souris) est trop rapide, donc je voudrais la ralentir.

jquerycssscroll
39
Benjamin Crouzier

La vitesse de défilement PEUT être modifiée, ajustée, inversée, tout cela - via javascript (ou une bibliothèque js telle que jQuery).

POURQUOI voudriez-vous faire cela? La parallaxe n'est qu'une des raisons. Je ne sais pas pourquoi quelqu'un s'opposerait à cela - les mêmes arguments négatifs peuvent être avancés contre le masquage des DIV, le glissement des éléments vers le haut/vers le bas, etc. Les sites Web sont toujours une combinaison de fonctionnalités techniques et de conception UX - un bon concepteur peut utiliser presque toutes les capacités techniques pour améliorer l'UX. C'est ce qui le rend bon.

Toni Almeida of Portugal a créé une brillante démo, reproduite ci-dessous:

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;

La source:

Comment changer la vitesse de défilement par défaut, la quantité de défilement, l'inertie de défilement d'une page Web

74
cssyphus

Non. La vitesse de défilement est déterminée par le navigateur (et généralement directement par les paramètres de l'ordinateur/de l'appareil). CSS et Javascript n'ont pas (ou ne devraient pas) affecter les paramètres système.

Cela étant dit, il existe probablement plusieurs façons d'essayer de simuler une vitesse de défilement différente en déplaçant votre propre contenu de manière à contrecarrer le défilement. Cependant, je pense que le faire est une idée [~ # ~] horrible [~ # ~] en termes de convivialité, l'accessibilité et le respect de vos utilisateurs, mais je commencerais par trouver les événements déclenchés par vos navigateurs cibles qui indiquent le défilement.

Une fois que vous pouvez capturer l'événement de défilement (en supposant que vous le puissiez), vous pourrez alors ajuster votre contenu de manière dynamique afin que la partie souhaitée soit visible.

Une autre approche serait de traiter cela dans Flash, ce qui vous donne au moins certains niveau de contrôle sur les événements de défilement.

15
cdeszaq

Utilisez simplement ce fichier js. (J'ai mentionné 2 exemples avec différents fichiers js. J'espère que le second est ce dont vous avez besoin) Vous pouvez simplement changer la quantité de défilement, la vitesse, etc. en changeant les paramètres.

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

Voici une démo

Vous pouvez également essayer this . Voici une démo

7
anu g prem

Je viens de créer une fonction Javascript pure basée sur ce code. Démo de la version Javascript uniquement: http://jsbin.com/copidifiji

C'est le code indépendant 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);
}
4
user3768564