Comment la barre de défilement peut-elle être masquée? Je veux faire ça parce que la barre de défilement n'est pas sympa.Comment masquer la barre de défilement à l'aide de JavaScript
overflow:hidden n'est pas utile, car mon élément div a beaucoup d'autres éléments. Le réglage overflow ne résout pas mon problème.
Vous pouvez cacher la barre de défilement avec ce ...
document.body.style.overflow = 'hidden';
... et réafficher avec ceci:
document.body.style.overflow = 'visible';
Cependant, vous devez vous demander si cela est vraiment ce que vous vouloir. Les barres de défilement apparaissent pour que les gens puissent voir les choses qui sont en dehors de leurs petits écrans.
Ceci est utile si vous avez un élément dans la page qui contient ses propres barres de défilement (pensez à une grille avec beaucoup de colonnes) et que vous ne voulez pas afficher les barres de défilement pour le contenu de l'autre élément (qui est overflow: hidden) – tster
qui supprime cette capacité de défilement de la souris, je voulais que la barre de défilement disparaisse tout en étant capable de défiler avec la souris. –
Comme indiqué ci-dessus, si vous utilisez un navigateur Webkit, vous pouvez le masquer avec html :: - webkit-scrollbar, html :: - mozilla-scrollbar { affichage: aucun; } – Sprottenwels
Vous devez utiliser la propriété CSS overflow, qui «gère» ce qui doit se produire lorsque le contenu d'un certain élément dépasse ses limites. Le réglage à hidden masque les barres de défilement.
overflow: hidden;
ou
someElement.style.overflow = 'hidden';
Mes yeux mal quand je lis votre question. Cependant, il est impossible de masquer la barre de défilement du navigateur sans régler "overflow: hidden" (?!). C'est un comportement de navigateur par défaut.
Puisque votre div a de nombreux autres éléments pourquoi ne pas lui définir la largeur et la hauteur appropriées? Sinon, faites-le défiler afin que les utilisateurs puissent lire entièrement votre contenu.
est incorrect. Pour les navigateurs WebKit, il y a même une propriété css html :: - webkit-scrollbar { display: none; } – Sprottenwels
Merci @Sprottenwels! –
Vous avez à remplacer les paramètres CSS comme suit:
<style type="text/css">
#YourSpecialDiv { overflow: hidden !important; }
</style>
Et la div vous devez ajouter la balise id-à-dire
<div id="YourSpecialDiv"...>...</div>
La meilleure façon de le faire serait une sorte de pseudo élément css sélecteur. Mais je ne pense que webkit (Chrome/Safari) has one for the scrollbar, donc ce n'est pas très cross-navigateur.
Une alternative aki est de l'envelopper dans un div qui se cache la barre de défilement, en réglant la width plus petite que la div contenue par la taille de la barre de défilement
DEMO (peut prendre un certain temps pour obtenir le css parfait, mais Le problème ici est que les tailles des barres de défilement diffèrent d'un navigateur à l'autre, vous devrez donc faire en sorte que la plus grande des barres de défilement soit plus petite. Et pour ne pas couper du contenu dans les navigateurs avec les barres de défilement plus petites, il serait préférable d'ajouter un remplissage de la plus grande différence de taille pour les barres de défilement.
ceci est une réponse seulement CSS, je suis d'accord avec @ Aki143S, en ce que [en utilisant javascript] (http://stackoverflow.com/questions/3293650/hide-scrollbar-while-still-able-to-scroll-with-mouse -keyboard) est une solution beaucoup plus agréable, robuste et indépendante du navigateur – Hashbrown
Je ne pense pas qu'il existe réellement un moyen de masquer correctement les barres de défilement. Qu'est-ce que overflow:hidden, overflow-x:hidden et overflow-y:hidden est réellement 'si elle va hors 100vw/100vh/100vw un 100vh puis ne l'affiche pas'. Le débordement n'affiche que ce qui est en dehors de la vue actuelle (tbh initiale).
Il cache scrollbar parce que tout ce qui est dans le code HTML qui devrait être à l'extérieur ne sera pas sur la page lors de la visualisation (rien défilement donc pas besoin scrollbar).
Le seul cache disponible est (ici pour cacher la barre de défilement axe Y):
[container]{
overflow:scroll;
overflow-x:hidden;
}
[container]::-webkit-scrollbar{
width:0;
background-color:transparent;
}
Ce qui est une véritable peau de scrollbar, et fonctionne malheureusement que sur les navigateurs basés sur Webkit.
Si un jour tous les fournisseurs acceptent cela, alors il sera incroyable et nous allons enfin pouvoir cacher les barres de défilement.
var container = document.querySelectorAll("div.container")[0];
container.addEventListener("wheel", function(event) {
/*Mouse wheel scrolled down*/
if (event.deltaY > 0)
container.scrollTop += 30;
/*Mouse wheel scrolled up*/
else
container.scrollTop -= 30;
}, false);div.container {
height: 15rem;
width: 20rem;
overflow: hidden;
padding: 1rem;
border: 1px solid;
font-family: "Seoge UI", "Calibri", sans-serif;
font-size: 1.25rem;
line-height: 1.5rem;
}<div class="container">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus odio, scelerisque vel sollicitudin sed, ullamcorper sed dolor. Vivamus sed egestas nisl. Ut sollicitudin finibus tortor sit amet posuere. Cras erat massa, auctor non urna quis, interdum sollicitudin sapien. Pellentesque gravida ullamcorper est. Maecenas accumsan lobortis mauris, et auctor urna mattis et. Fusce venenatis, magna blandit faucibus sodales, tortor nunc lacinia ligula, bibendum euismod leo felis placerat velit. Fusce sed arcu vitae metus ultricies tincidunt auctor a diam. Duis at augue efficitur eros rutrum iaculis. Praesent eu maximus orci. Praesent lobortis semper elit vitae convallis. Donec consequat lectus tortor, vel aliquam diam fringilla ut. Sed ac tempus justo. Ut bibendum euismod magna, id egestas lacus pulvinar ut. Sed sit amet felis ornare, gravida leo ac, semper dui.</span> Pellentesque efficitur eget nisl tincidunt gravida. Aenean sed nisl commodo, porta lectus in, tincidunt dui. Vivamus eget nunc ipsum. Praesent sed quam odio. Proin aliquam dapibus dictum. Maecenas tristique lorem id erat venenatis, a varius nibh accumsan.
Nulla tempor sagittis odio, nec ultricies sem posuere ornare. Vestibulum sit amet consequat neque. Cras iaculis eleifend nisi. Sed erat mauris, fringilla nec congue quis, lobortis in justo. Quisque sit amet metus id ligula mattis elementum. Morbi sodales,
dui eget fringilla pretium, sem tellus posuere dolor, id pharetra neque elit ac nisl.<br /> Quisque <br />nibh<br />enim,<br />mattis<br />a<br />aliquam<br />eget,<br />luctus<br />id<br />velit.<br />Pellentesque<br />sodales<br />eros<br />eget<br
/>diam<br />gravida<br />porta.<br />Maecenas<br />leo<br />tortor,<br />malesuada<br />quis<br />euismod<br />sed,<br />dictum<br />ut<br />nulla.<br />Vestibulum<br />in<br />massa<br />a<br />quam<br />vehicula<br />placerat<br />in<br />quis<br
/>libero.<br />Maecenas<br />convallis<br />bibendum<br />faucibus.<br />In<br />porttitor<br />quis<br />justo<br />non<br />tincidunt.<br />Pellentesque<br />at<br />justo<br />tincidunt,<br />auctor<br />tortor<br />at,<br />tempus<br />eros. <br
/>Generated: 5 paragraphs, 414 words and 2814 bytes of Lorem Ipsum
</div>Vous pouvez utiliser ce qui suit sur un élément:
::-webkit-scrollbar {
width: 0px;
}
Cela ne fonctionne que sur les navigateurs WebKit, donc pas IE et Firefox.
peut être cette réponse peut vous aider: http://stackoverflow.com/questions/3293650/hide-scrollbar-while-still-able-to-scroll-with-mouse-keyboard – Aki143S