Comment puis-je désactiver un navigateur ou un élément scrollbar, tout en permettant de défiler avec des touches wheel ou arrow?
je veux cacher toutes les barres de défilement de mes éléments div et mon entier body , mais encore laisser l'Utilisateur faire défiler avec la roue de la souris ou les touches fléchées. Comment cela peut-il être réalisé avec du JavaScript brut ou du jQuery? Des idées?
7 réponses
comme les réponses précédentes, vous utiliseriez overflow:hidden pour désactiver les barres de défilement sur le corps/div.
alors vous lierez l'événement mousewheel à une fonction qui changerait le scrollTop de la div pour émuler le défilement.
pour les touches fléchées, vous liez l'événement keydown pour reconnaître une touche fléchée, puis changez scrollTop et scrollLeft de la div comme approprié pour émuler le défilement.
(Remarque: vous utilisez keydown au lieu de keypress car IE ne reconnaît pas keypress pour les touches fléchées.)
Edit: Je n'ai pas pu obtenir FF/Chrome pour reconnaître keydown sur un div, mais il fonctionne dans IE8. Selon ce que vous avez besoin de cela pour, vous pouvez définir un keydown sur le document pour faire défiler le div. (Voir la référence du code de clé à titre d'exemple.)
par exemple, défiler avec la roue de la souris (en utilisant jQuery et un la roulette de la souris plugin):
<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>
(c'est une maquette rapide, il faudrait ajuster les chiffres car pour moi, cela se déroule un peu lentement.)
code de référence
plugin mousewheel
keydown, keypress @ quirksmode
mise à jour 19/12/2012:
l'emplacement mis à jour du plugin mousewheel est à: https://github.com/brandonaaron/jquery-mousewheel
Qu'en est-il d'une solution purement CSS? J'ai testé ça et ça marche très bien. Cependant, je recommande Solution 3 car isn't hacky, il est pris en charge par tous les navigateurs avec JS et il est très simple.
Solution 1 (la croix-navigateur, 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 seulement)
il suffit d'ajouter le nobars classe de tout élément que vous souhaitez masquer les barres de défilement.
Firefox overflow: -moz-scrollbars-none est, , selon MDN , obsolète. Il fonctionnait mais Cache maintenant le débordement et désactive le défilement s'il est 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 (la croix-navigateur javascript)
Perfect Scrollbar ne nécessite pas de jQuery (bien qu'il puisse utilisez jQuery si installé) et a un démo disponible ici . Les composants peuvent être stylisés avec css comme dans l'exemple suivant:
.ps-scrollbar-y-rail {
display: none !important;
}
voici un exemple complet incluant la mise en œuvre 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>
je préfère de beaucoup SamGoody de la réponse fournie à une copie de cette question. Il laisse les effets de défilement natifs intacts, au lieu d'essayer de ré-implémenter manuellement pour quelques périphériques d'entrée particuliers:
une meilleure solution est de mettre la div cible à débordement:scroll, et l'envelopper dans un deuxième élément qui est 8px plus étroit, qui est débordement:caché.
Voir la commentaire d'origine pour un étoffé exemple. Vous pouvez utiliser JavaScript pour déterminer la taille réelle des barres de défilement plutôt que de supposer qu'elles sont toujours 8px large comme son exemple le fait.
Vous n'avez pas à utiliser jquery ou js pour faire ça. Son plus performant avec webkit simple.
il suffit d'ajouter le code ci-dessous à votre fichier css.
::-webkit-scrollbar {
display: none;
}
attention ! Cela va désactiver tous la barre de défilement afin de s'assurer de la mettre dans une classe spécifique d'identification ou si vous voulez juste un être caché.
pour obtenir ce travail pour moi, j'ai utilisé ce CSS:
html { overflow-y: hidden; }
mais j'ai eu des problèmes avec $(this).scrollTop() , donc je me suis attaché à mon #id, mais j'ai ajusté le scrollTop de la fenêtre. En outre, ma souris de défilement lisse tirerait beaucoup de 1 ou -1 deltas, donc je l'ai multiplié par 20.
$("#example").bind("mousewheel", function (ev, delta) {
var scrollTop = $(window).scrollTop();
$(window).scrollTop(scrollTop - Math.round(delta * 20));
});
Comme Baldráni dit ci-dessus
::-webkit-scrollbar { display: none; }
::-webkit-scrollbar{ width: 0px; }
(posté pour d'autres personnes qui trébuchent sur ce de google search!)
Eh bien, peut-être pas le plus intuitif à mon avis, Mais je peux imaginer que vous êtes en mesure de faire une expérience décente, donner ceci un essai.
overflow:hidden;
assurez-vous que l'objet parent a un height et width , et affiche block