web-dev-qa-db-fra.com

Comment puis-je désactiver un navigateur ou un élément de barre de défilement tout en permettant le défilement à l'aide des touches de navigation ou des flèches?

Je souhaite masquer les barres de défilement de mes éléments div et de mon ensemble body, tout en laissant l'utilisateur faire défiler à l'aide de la molette de la souris ou des touches fléchées. Comment cela peut-il être réalisé avec JavaScript ou jQuery brut? Des idées?

javascriptjquerycssbrowserscrollbar
51
Shizoman

Comme les réponses précédentes, vous utiliseriez overflow:hidden pour désactiver les barres de défilement du corps/div.

Ensuite, vous lieriez l'événement mousewheel à une fonction qui modifierait le scrollTop de la div pour émuler le défilement.

Pour les touches de direction, vous lieriez l'événement keydown pour reconnaître une touche de direction, puis modifieriez scrollTop et scrollLeft de la div en fonction de l'émulation du défilement. (Remarque: vous utilisez keydown au lieu de keypress car IE ne reconnaît pas keypress pour les touches de direction.)
Edit: Je ne pouvais pas faire en sorte que FF/Chrome reconnaisse keydown sur un div, mais cela fonctionne dans IE8. En fonction de vos besoins, vous pouvez définir un écouteur keydown sur document pour faire défiler le div. (Consultez la référence keyCode à titre d'exemple.)

Par exemple, faites défiler avec la molette de la souris (en utilisant jQuery et un plugin mousewheel):

<div id="example" style="width:300px;height:200px;overflow:hidden">
insert enough text to overflow div here
</div>

<script>
$("#example").bind("mousewheel",function(ev, delta) {
    var scrollTop = $(this).scrollTop();
    $(this).scrollTop(scrollTop-Math.round(delta));
});
</script>

(Ceci est une rapide maquette, il vous faudrait ajuster les chiffres car pour moi, cela défile un peu lentement.)

référence de code clé
plugin mousewheel
touche enfoncée, appuyez sur @ quirksmode

Mise à jour du 19/12/2012:

L'emplacement mis à jour du plugin mousewheel est: https://github.com/brandonaaron/jquery-mousewheel

47
Grace

Qu'en est-il d'une solution purement CSS? J'ai testé cela et ça fonctionne bien. Cependant, je recommanderais la solution 3 car ce n’est pas hacky, elle est supportée par tous les navigateurs avec JS et c’est très simple.

Solution 1 (navigateur croisé mais plus hacky)

#div {
  position: fixed;
  right: -20px;
  left: 20px;
  background-color: black;
  color: white;
  height: 5em;
  overflow-y: scroll;
  overflow-x: hidden;
}
<html>

<body>
  <div id="div">
    Scrolling div with hidden scrollbars!<br/>
    On overflow, this div will scroll with the mousewheel but scrollbars won't be visible.<br/>
    Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>
  </div>
</body>

</html>

Solution 2 (IE et Chrome uniquement)

Ajoutez simplement la classe nobars à tout élément sur lequel vous souhaitez masquer les barres de défilement.

Le Firefox overflow: -moz-scrollbars-none est, selon MDN , obsolète. Il fonctionnait auparavant, mais cache maintenant le débordement et désactive le défilement si utilisé.

.nobars {
    /* Firefox: https://developer.mozilla.org/en/docs/Web/CSS/overflow */
    /* overflow: -moz-scrollbars-none; (no longer works) */
    /* IE: https://msdn.Microsoft.com/en-us/library/hh771902(v=vs.85).aspx */
    -ms-overflow-style: none;
}
.nobars::-webkit-scrollbar {
    /* Chrome: https://css-tricks.com/custom-scrollbars-in-webkit/ */
    display: none;
}

Solution 3 (JavaScript dans plusieurs navigateurs)

Perfect Scrollbar ne nécessite pas jQuery (bien qu'il puisse utiliser jQuery s'il est installé) et dispose d'une démo disponible ici . Les composants peuvent être stylés avec css, comme dans l'exemple suivant:

.ps-scrollbar-y-rail {
  display: none !important;
}

Voici un exemple complet incluant l'implémentation de Perfect Scrollbar:

<link rel="stylesheet" href="css/perfect-scrollbar.min.css">
<style>
  #container {
    position: relative; /* can be absolute or fixed if required */
    height: 200px; /* any value will do */
    overflow: scroll;
  }
  .ps-scrollbar-y-rail {
    display: none !important;
  }
</style>
<script src='js/perfect-scrollbar.min.js'></script>

<div id="container">
  Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>
</div>

<script>
  // on dom ready...
  var container = document.getElementById("container");
  Ps.initialize(container);
  //Ps.update(container);
  //Ps.destroy(container);
</script>
11
Peter Gordon

Je préfère de loin la réponse de SamGoody à un duplicata de cette question. Cela laisse les effets de défilement natifs intacts, au lieu d'essayer de les réimplémenter manuellement pour quelques périphériques d'entrée particuliers:

Une meilleure solution consiste à définir la division cible sur débordement: scroll, et à l’envelopper dans un deuxième élément plus étroit de 8 pixels, qui est overflow: hidden.

Voir le commentaire original pour un exemple complet. Vous voudrez peut-être utiliser JavaScript pour déterminer la taille réelle des barres de défilement plutôt que de supposer qu'elles ont toujours une largeur de 8 pixels comme son exemple le fait.

7
natevw

Vous n'avez pas à utiliser jquery ou js pour le faire. Son plus performant avec webkit simple.

Ajoutez simplement le code ci-dessous à votre fichier css.

::-webkit-scrollbar { 
    display: none; 
}

Attention! Ceci désactivera toute la barre de défilement, alors assurez-vous de la mettre dans une classe ou un identifiant spécifique si vous voulez seulement en cacher un.

7
Baldráni

Pour que cela fonctionne pour moi, j'ai utilisé ce CSS:

html { overflow-y: hidden; }

Mais j'avais des problèmes avec $(this).scrollTop(), alors je me suis lié à mon #id, mais j'ai ajusté le scrollTop de la fenêtre. De plus, ma souris à défilement régulier déclenche beaucoup de deltas de 1 ou -1, je l’ai donc multipliée par 20.

$("#example").bind("mousewheel", function (ev, delta) {
    var scrollTop = $(window).scrollTop();
    $(window).scrollTop(scrollTop - Math.round(delta * 20));
});
4
Kevin Hakanson

Comme Baldráni dit ci-dessus

::-webkit-scrollbar { display: none; }

Ou tu peux faire

::-webkit-scrollbar{ width: 0px; }


(posté pour les autres personnes qui trébuchent à partir de cette recherche google!)

0
DardanM