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 du JavaScript brut ou jQuery? Des idées?
Réponses
Trop de publicités?
Grace
Points
528
Comme les réponses précédentes, vous devez utiliser overflow:hidden pour désactiver les barres de défilement sur le corps/div.
Alors il faudrait lier l' mousewheel événement à une fonction qui permettrait de modifier l' scrollTop de la div pour émuler le défilement.
Pour les touches fléchées, vous lier l' keydown événement à reconnaître les touches fléchées, puis modifiez scrollTop et scrollLeft de la div comme approprié pour émuler le défilement.
(Remarque: vous utilisez keydown au lieu de keypress depuis IE ne reconnaît pas l' keypress pour les touches fléchées.)
Edit: je ne pouvais pas obtenir FF/Chrome reconnaître keydown sur un div, mais il fonctionne dans IE8. Selon ce que vous avez besoin, vous pouvez définir un keydown d'écoute sur l' document pour faire défiler la div. (Vérifier le code de référence à titre d'exemple.)
Par exemple, le défilement avec la molette de la souris (à l'aide de jQuery et une molette 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>
(Ceci est un rapide maquette, vous devez ajuster les chiffres puisque, pour moi, ce défile un peu lentement.)
mot de code de référence
la roulette de la souris plugin
keydown, keypress @ quirksmode
Mise à jour 12/19/2012:
La mise à jour de l'emplacement de la molette de la souris plugin est au: https://github.com/brandonaaron/jquery-mousewheel
PG man
Points
68
Qu'en est-il d'une solution purement CSS? J'ai testé cela et ça fonctionne bien.
<html>
<head>
<style type="text/css">
#div {position: fixed; bottom: 60px; left: 20px; right: -20px; padding-right: 40px; top: 80px; background-color: black; color: white; overflow-y: scroll; overflow-x: hidden;}
</style>
</head>
<body>
<div id="div">
Scrolling div with hidden scrollbars!
On overflow, this div will scroll with the mousewheel but scrollbars won't be visible.
</div>
</body>
</html>
natevw
Points
3543
Je préfère de beaucoup SamGoody de la réponse fournie à une copie de cette question. Il laisse natif des effets de défilement intacte, au lieu d'essayer de nouveau manuellement mettre en place pour un peu particulier, les périphériques d'entrée:
Une meilleure solution est de définir la cible div en overflow:scroll, et l'enrouler à l'intérieur d'un deuxième élément qui est 8px plus étroit, qui overflow:hidden.
Voir le commentaire d'origine pour un étoffé exemple. Vous souhaiterez peut-être utiliser JavaScript pour déterminer la taille réelle des barres de défilement , plutôt que de supposer qu'ils sont toujours 8px large que son exemple ne.
Kevin Hakanson
Points
15498
Pour que cela fonctionne pour moi, j'ai utilisé ce CSS:
html { overflow-y: hidden; }
Mais j'avais des problèmes avec $(this).scrollTop() , je me suis donc 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));
});
Joseph Silvashy
Points
14960
