web-dev-qa-db-fra.com

Comment masquer la barre de défilement à l'aide de JavaScript

Comment cacher la barre de défilement? Je veux faire cela parce que la barre de défilement n'est pas Nice.

overflow:hidden n'est pas utile, car mon élément div a beaucoup d'autres éléments.

Donc, régler overflow ne résout pas mon problème.

javascriptjquerycss
23
zjm1126

Vous pouvez masquer la barre de défilement avec cette ...

document.body.style.overflow = 'hidden';

... et dévoilez-le avec ceci:

document.body.style.overflow = 'visible';

Cependant, vous devez vous demander si c'est vraiment ce que vous voulez. Des barres de défilement apparaissent pour que les personnes puissent voir des choses en dehors de leurs petits écrans.

24
Whakkee

Vous devez écraser les paramètres CSS comme suit:

<style type="text/css">
    #YourSpecialDiv { overflow: hidden !important; }
</style>

Et le div vous devez ajouter la balise id i.e.

<div id="YourSpecialDiv"...>...</div>
5
HGMamaci

Je ne pense pas qu'il y ait réellement un moyen de simplement cacher les barres de défilement correctement. ____. Ce que overflow:hidden, overflow-x:hidden et overflow-y:hidden font est en fait 's'il disparaît 100vw/100vh/100vh, alors ne l'affichez pas' Le débordement consiste uniquement à ne pas afficher ce qui se trouve en dehors de la vue actuelle (tbh initiale).

Elle masque la barre de défilement, car tout ce qui se trouve dans le code HTML et qui devrait être à l'extérieur ne sera pas affiché lors de la visualisation (rien ne nécessite de défilement, donc pas de barre de défilement).

La seule masquage disponible est (ici pour masquer la barre de défilement de l'axe Y):

[container]{
    overflow:scroll;
    overflow-x:hidden;
}

[container]::-webkit-scrollbar{
    width:0;
    background-color:transparent;
}

Ce qui est une vraie cachette de la barre de défilement, et ne fonctionne malheureusement que sur les navigateurs Webkit.

Si un jour tous les fournisseurs l'acceptent, ce sera incroyable et nous pourrons enfin cacher les barres de défilement.

2
Voltra Neo

Vous pouvez utiliser les éléments suivants sur n’importe quel élément:

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

La source

Cela ne fonctionne que sur les navigateurs Webkit, donc pas de IE et Firefox.

2
Marouane Er-rouhi

Vous devez utiliser la propriété CSS overflow, qui "gère" ce qui devrait se produire lorsque le contenu d'un élément donné dépasse ses limites. La définition de hidden masque les barres de défilement.

overflow: hidden;

ou

someElement.style.overflow = 'hidden';
1
Douwe Maan

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>

0
Usama Ansari

La meilleure façon de faire serait une sorte de sélecteur css de pseudo-élément. Mais je pense que seul le webkit (Chrome/Safari) en a un pour la barre de défilement , donc il n’est pas très multi-navigateur.

Une alternative hacky est de l’envelopper dans un div qui cache la barre de défilement, en définissant la variable 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 vous obtenez le Gist)

Le problème ici est que les tailles des barres de défilement diffèrent d'un navigateur à l'autre. Vous devez donc réduire la largeur de la division externe de la largeur de la barre de défilement. Et pour ne couper aucun contenu dans les navigateurs avec les barres de défilement plus petites, il serait préférable d’ajouter une marge de remplissage de la plus grande différence de taille pour les barres de défilement.

0
Hashbrown