Réponses:
Placez overflow: hidden;
sur la balise de corps comme ceci:
<style type="text/css">
body {
overflow: hidden;
}
</style>
Le code ci-dessus masque à la fois la barre de défilement horizontale et verticale.
Si vous souhaitez masquer uniquement la barre de défilement verticale , utilisez overflow-y
:
<style type="text/css">
body {
overflow-y: hidden;
}
</style>
Et si vous souhaitez masquer uniquement la barre de défilement horizontale , utilisez overflow-x
:
<style type="text/css">
body {
overflow-x: hidden;
}
</style>
Remarque: Cela désactivera également la fonction de défilement. Reportez-vous aux réponses ci-dessous si vous souhaitez simplement masquer la barre de défilement, mais pas la fonction de défilement.
hidden
défilement, cela fonctionne avec une molette de défilement de la souris. Dans Firefox, le défilement ne fonctionnera pas avec une molette de défilement de souris, il m'a fallu un certain temps pour comprendre cela.
overflow: hidden
défilement est désactivé. Si quelqu'un veut masquer la barre de défilement, il considère sans doute que le contrôle est inutile car il n'y a pas de contenu à faire défiler en premier lieu . Ou peut-être qu'ils ne veulent tout simplement pas autoriser le défilement .
WebKit prend en charge les pseudo-éléments de la barre de défilement qui peuvent être masqués avec des règles CSS standard:
#element::-webkit-scrollbar {
display: none;
}
Si vous souhaitez que toutes les barres de défilement soient masquées, utilisez
::-webkit-scrollbar {
display: none;
}
Je ne suis pas sûr de la restauration - cela a fonctionné, mais il pourrait y avoir une bonne façon de le faire:
::-webkit-scrollbar {
display: block;
}
Vous pouvez bien sûr toujours utiliser width: 0
, qui peut ensuite être facilement restauré avec width: auto
, mais je ne suis pas un fan d'abus width
pour les ajustements de visibilité.
Firefox 64 prend désormais en charge la propriété expérimentale de largeur de barre de défilement par défaut (63 nécessite la définition d'un indicateur de configuration). Pour masquer la barre de défilement dans Firefox 64:
#element {
scrollbar-width: none;
}
Pour voir si votre navigateur actuel prend en charge le pseudo-élément ou scrollbar-width
, essayez cet extrait:
(Notez que ce n'est pas vraiment une bonne réponse à la question, car cela masque également les barres horizontales, mais c'est ce que je cherchais lorsque Google m'a pointé ici, alors j'ai pensé que je le publierais de toute façon.)
Lorsque vous posez la question "Les barres de défilement d'un navigateur peuvent-elles être supprimées d'une certaine manière, plutôt que simplement cachées ou camouflées", tout le monde répondra "Pas possible" car il n'est pas possible de supprimer les barres de défilement de tous les navigateurs dans un manière compatible et cross-compatible, et puis il y a tout l'argument de l'utilisabilité.
Cependant, il est possible d'empêcher le navigateur d'avoir jamais besoin de générer et d'afficher des barres de défilement si vous ne permettez pas à votre page Web de déborder.
Cela signifie simplement que nous devons remplacer de manière proactive le même comportement que le navigateur ferait généralement pour nous et dire merci au navigateur, mais non merci. Plutôt que d'essayer de supprimer les barres de défilement (que nous savons tous que ce n'est pas possible), nous pouvons éviter le défilement (parfaitement faisable) et faire défiler les éléments que nous créons et avoir plus de contrôle sur.
Créez un div avec débordement caché. Détectez quand l'utilisateur essaie de faire défiler, mais n'y parvient pas car nous avons désactivé la capacité des navigateurs à faire défiler avec débordement: caché .. et à la place déplacer le contenu en utilisant JavaScript lorsque cela se produit. Ainsi, nous créons notre propre défilement sans le défilement par défaut du navigateur ou utilisez un plugin comme iScroll .
Pour être rigoureux; toutes les façons spécifiques au vendeur de manipuler les barres de défilement:
* Ces propriétés n'ont jamais fait partie de la spécification CSS, ni approuvées ni préfixées par le fournisseur, mais elles fonctionnent dans Internet Explorer et Konqueror. Ceux-ci peuvent également être définis localement dans la feuille de style utilisateur pour chaque application. Dans Internet Explorer, vous le trouvez sous l'onglet "Accessibilité", dans Konqueror sous l'onglet "Feuilles de style".
body, html { /* These are defaults and can be replaced by hexadecimal color values */
scrollbar-base-color: aqua;
scrollbar-face-color: ThreeDFace;
scrollbar-highlight-color: ThreeDHighlight;
scrollbar-3dlight-color: ThreeDLightShadow;
scrollbar-shadow-color: ThreeDDarkShadow;
scrollbar-darkshadow-color: ThreeDDarkShadow;
scrollbar-track-color: Scrollbar;
scrollbar-arrow-color: ButtonText;
}
À partir d'Internet Explorer 8, ces propriétés ont été préfixées par Microsoft, mais elles n'ont toujours pas été approuvées par le W3C .
-ms-scrollbar-base-color
-ms-scrollbar-face-color
-ms-scrollbar-highlight-color
-ms-scrollbar-3dlight-color
-ms-scrollbar-shadow-color
-ms-scrollbar-darkshadow-color
-ms-scrollbar-base-color
-ms-scrollbar-track-color
Internet Explorer rend scroll
disponible qui définit s'il faut ou non désactiver ou activer les barres de défilement; il peut également être utilisé pour obtenir la valeur de la position des barres de défilement.
Avec Microsoft Internet Explorer 6 et versions ultérieures, lorsque vous utilisez la !DOCTYPE
déclaration pour spécifier le mode conforme aux normes, cet attribut s'applique à l'élément HTML. Lorsque le mode conforme aux normes n'est pas spécifié, comme avec les versions antérieures d'Internet Explorer, cet attribut s'applique à l' BODY
élément, PAS à l' HTML
élément.
Il convient également de noter que lorsque vous travaillez avec .NET, la classe ScrollBar System.Windows.Controls.Primitives
dans le cadre de présentation est responsable du rendu des barres de défilement.
http://msdn.microsoft.com/en-us/library/ie/ms534393(v=vs.85).aspx
Les extensions WebKit liées à la personnalisation de la barre de défilement sont:
::-webkit-scrollbar {} /* 1 */
::-webkit-scrollbar-button {} /* 2 */
::-webkit-scrollbar-track {} /* 3 */
::-webkit-scrollbar-track-piece {} /* 4 */
::-webkit-scrollbar-thumb {} /* 5 */
::-webkit-scrollbar-corner {} /* 6 */
::-webkit-resizer {} /* 7 */
Ceux-ci peuvent chacun être combinés avec des pseudo-sélecteurs supplémentaires:
:horizontal
- La pseudo-classe horizontale s'applique à toutes les pièces de la barre de défilement qui ont une orientation horizontale.:vertical
- La pseudo-classe verticale s'applique à toutes les pièces de la barre de défilement qui ont une orientation verticale.:decrement
- La pseudo-classe de décrémentation s'applique aux boutons et aux morceaux de piste. Il indique si le bouton ou le morceau de piste décrémentera ou non la position de la vue lorsqu'il est utilisé (par exemple, vers le haut sur une barre de défilement verticale, à gauche sur une barre de défilement horizontale).:increment
- La pseudo-classe d'incrémentation s'applique aux boutons et aux morceaux de piste. Il indique si un bouton ou un morceau de piste incrémentera la position de la vue lorsqu'il est utilisé (par exemple, vers le bas sur une barre de défilement verticale, à droite sur une barre de défilement horizontale).:start
- La pseudo-classe de départ s'applique aux boutons et aux morceaux de piste. Il indique si l'objet est placé avant le pouce.:end
- La pseudo-classe de fin s'applique aux boutons et aux morceaux de piste. Il indique si l'objet est placé après le pouce.:double-button
- La pseudo-classe à double bouton s'applique aux boutons et aux morceaux de piste. Il est utilisé pour détecter si un bouton fait partie d'une paire de boutons qui sont ensemble à la même extrémité d'une barre de défilement. Pour les morceaux de piste, il indique si la pièce de piste vient en appui sur une paire de boutons.:single-button
- La pseudo-classe à un seul bouton s'applique aux boutons et aux morceaux de piste. Il est utilisé pour détecter si un bouton est seul à la fin d'une barre de défilement. Pour les morceaux de piste, il indique si la pièce de piste est contiguë à un bouton singleton.:no-button
- S'applique aux morceaux de piste et indique si le morceau de piste va ou non au bord de la barre de défilement, c'est-à-dire qu'il n'y a pas de bouton à cette extrémité de la piste.:corner-present
- S'applique à toutes les pièces de la barre de défilement et indique si un coin de la barre de défilement est présent ou non.:window-inactive
- S'applique à toutes les pièces de la barre de défilement et indique si la fenêtre contenant la barre de défilement est active ou non. (Dans les nightlies récents, cette pseudo-classe s'applique désormais aussi à :: selection. Nous prévoyons de l'étendre pour qu'elle fonctionne avec n'importe quel contenu et de la proposer comme nouvelle pseudo-classe standard.)Exemples de ces combinaisons
::-webkit-scrollbar-track-piece:start { /* Select the top half (or left half) or scrollbar track individually */ }
::-webkit-scrollbar-thumb:window-inactive { /* Select the thumb when the browser window isn't in focus */ }
::-webkit-scrollbar-button:horizontal:decrement:hover { /* Select the down or left scroll button when it's being hovered by the mouse */ }
addWindowScrollHandler public static HandlerRegistration addWindowScrollHandler (gestionnaire Window.ScrollHandler)
Ajoute un gestionnaire Window.ScrollEvent Paramètres: gestionnaire - le gestionnaire Renvoie: renvoie l'enregistrement du gestionnaire [ source ] ( http://www.gwtproject.org/javadoc/latest/com/google/gwt/user/client/Window.html# addWindowScrollHandler (com.google.gwt.user.client.Window.ScrollHandler) )
Mozilla a quelques extensions pour manipuler les barres de défilement, mais il est recommandé de ne pas les utiliser.
-moz-scrollbars-none
Ils recommandent d'utiliser le débordement: caché à la place de cela.-moz-scrollbars-horizontal
Similaire à overflow-x-moz-scrollbars-vertical
Similaire à overflow-y-moz-hidden-unscrollable
Fonctionne uniquement en interne dans les paramètres de profil d'un utilisateur. Désactive le défilement des éléments racine XML et désactive l'utilisation des touches fléchées et de la molette de la souris pour faire défiler les pages Web.
Pour autant que je sache, ce n'est pas vraiment utile, mais il convient de noter que l'attribut qui contrôle si les barres de défilement sont affichées dans Firefox est ( lien de référence ):
Comme cela a été mentionné précédemment dans certaines autres réponses, voici une illustration suffisamment explicite.
Juste parce que je suis curieux, je voulais en savoir plus sur l'origine des barres de défilement, et ce sont les meilleures références que j'ai trouvées.
Dans un brouillon de spécification HTML5, l' seamless
attribut a été défini pour empêcher les barres de défilement d'apparaître dans les iFrames afin qu'elles puissent être mélangées avec le contenu environnant sur une page . Bien que cet élément n'apparaisse pas dans la dernière révision.
L' scrollbar
objet BarProp est un enfant de l' window
objet et représente l'élément d'interface utilisateur qui contient un mécanisme de défilement ou un concept d'interface similaire. window.scrollbars.visible
reviendra true
si les barres de défilement sont visibles.
interface Window {
// The current browsing context
readonly attribute WindowProxy window;
readonly attribute WindowProxy self;
attribute DOMString name;
[PutForwards=href] readonly attribute Location location;
readonly attribute History history;
readonly attribute UndoManager undoManager;
Selection getSelection();
[Replaceable] readonly attribute BarProp locationbar;
[Replaceable] readonly attribute BarProp menubar;
[Replaceable] readonly attribute BarProp personalbar;
[Replaceable] readonly attribute BarProp scrollbars;
[Replaceable] readonly attribute BarProp statusbar;
[Replaceable] readonly attribute BarProp toolbar;
void close();
void focus();
void blur();
// Truncated
L'API Historique comprend également des fonctionnalités de restauration du défilement sur la navigation de page pour conserver la position de défilement lors du chargement de la page.
window.history.scrollRestoration
peut être utilisé pour vérifier l'état de la restauration du défilement ou changer son état (en ajoutant ="auto"/"manual"
. Auto est la valeur par défaut. Le changer en manuel signifie que vous, en tant que développeur, deviendrez propriétaire de toutes les modifications de défilement qui peuvent être nécessaires lorsqu'un utilisateur parcourt l'historique de l'application. Si vous en avez besoin, vous pouvez garder une trace de la position du défilement lorsque vous poussez des entrées d'historique avec history.pushState ().
Vous pouvez accomplir cela avec un wrapper div
dont le débordement est masqué et l' div
ensemble interne défini sur auto
.
Pour supprimer la div
barre de défilement de l'intérieur , vous pouvez la retirer de la div
fenêtre extérieure en appliquant une marge négative à l'intérieur div
. Ensuite, appliquez un rembourrage égal à la div intérieure afin que le contenu reste visible.
<div class="hide-scroll">
<div class="viewport">
...
</div>
</div>
.hide-scroll {
overflow: hidden;
}
.viewport {
overflow: auto;
/* Make sure the inner div is not larger than the container
* so that we have room to scroll.
*/
max-height: 100%;
/* Pick an arbitrary margin/padding that should be bigger
* than the max width of all the scroll bars across
* the devices you are targeting.
* padding = -margin
*/
margin-right: -100px;
padding-right: 100px;
}
height: inherited
dans le .viewport
CSS.
100%
est plus polyvalent et fait le travail.
-100px
et 100px
??
Cela fonctionne pour moi avec des propriétés CSS simples:
.container {
-ms-overflow-style: none; // Internet Explorer 10+
scrollbar-width: none; // Firefox
}
.container::-webkit-scrollbar {
display: none; // Safari and Chrome
}
Pour les anciennes versions de Firefox, utilisez: overflow: -moz-scrollbars-none;
overflow: -moz-scrollbars-none;
vous supprimez avec succès la barre de défilement, mais vous supprimez également la possibilité de faire défiler. Vous pourriez tout aussi bien vous mettre overflow: hidden
à la .container
.
-moz-scrollbars-none
: "Il s'agit d'une API obsolète et il n'est plus garanti de fonctionner."
Voici ma solution, qui couvre théoriquement tous les navigateurs modernes:
html {
scrollbar-width: none; /* For Firefox */
-ms-overflow-style: none; /* For Internet Explorer and Edge */
}
html::-webkit-scrollbar {
width: 0px; /* For Chrome, Safari, and Opera */
}
html
peut être remplacé par tout élément dont vous souhaitez masquer la barre de défilement.
Remarque : J'ai survolé les 19 autres réponses pour voir si le code que je poste a déjà été couvert, et il semble qu'aucune réponse unique ne résume la situation telle qu'elle est en 2019, bien que beaucoup d'entre elles soient très détaillées. Toutes mes excuses si cela a été dit par quelqu'un d'autre et je l'ai manqué.
Je pense que j'ai trouvé une solution de contournement pour vous les gars si vous êtes toujours intéressé. C'est ma première semaine, mais ça a marché pour moi ...
<div class="contentScroller">
<div class="content">
</div>
</div>
.contentScroller {overflow-y: auto; visibility: hidden;}
.content {visibility: visible;}
Si vous cherchez une solution pour masquer une barre de défilement pour les appareils mobiles, suivez la réponse de Peter !
Voici un jsfiddle , qui utilise la solution ci-dessous pour masquer une barre de défilement horizontale.
.scroll-wrapper{
overflow-x: scroll;
}
.scroll-wrapper::-webkit-scrollbar {
display: none;
}
Il a été testé sur une tablette Samsung avec Android 4.0.4 (Ice Cream Sandwich, à la fois dans le navigateur natif et Chrome) et sur un iPad avec iOS 6 (à la fois dans Safari et Chrome).
Utilisez la :overflow
propriété CSS
.noscroll {
width: 150px;
height: 150px;
overflow: auto; /* Or hidden, or visible */
}
Voici quelques exemples supplémentaires:
Comme les autres personnes l'ont déjà dit, utilisez CSS overflow
.
Mais si vous voulez toujours que l'utilisateur puisse faire défiler ce contenu (sans que la barre de défilement soit visible), vous devez utiliser JavaScript.
Voir ma réponse ici pour une solution: Masquer la barre de défilement tout en pouvant faire défiler avec la souris / le clavier
Approche multi-navigateur pour masquer la barre de défilement.
Il a été testé sur Edge, Chrome, Firefox et Safari
Cachez la barre de défilement tout en continuant à faire défiler avec la molette de la souris!
/* Make parent invisible */
#parent {
visibility: hidden;
overflow: scroll;
}
/* Safari and Chrome specific style. Don't need to make parent invisible, because we can style WebKit scrollbars */
#parent:not(*:root) {
visibility: visible;
}
/* Make Safari and Chrome scrollbar invisible */
#parent::-webkit-scrollbar {
visibility: hidden;
}
/* Make the child visible */
#child {
visibility: visible;
}
Si vous souhaitez que le défilement fonctionne, avant de masquer les barres de défilement, pensez à les styliser. Les versions modernes d'OS X et d'OS mobiles ont des barres de défilement qui, bien que peu pratiques à saisir avec une souris, sont assez belles et neutres.
Pour masquer les barres de défilement, une technique de John Kurlak fonctionne bien, sauf pour laisser les utilisateurs de Firefox qui n'ont pas de pavés tactiles sans moyen de faire défiler, sauf s'ils ont une souris avec une molette, ce qu'ils font probablement, mais même dans ce cas, ils ne peuvent généralement que faire défiler verticalement .
La technique de John utilise trois éléments:
Il doit être possible de définir la taille des éléments externes et de contenu de la même manière, ce qui élimine l'utilisation de pourcentages, mais je ne peux penser à rien d'autre qui ne fonctionnera pas avec le bon ajustement.
Ma plus grande préoccupation est de savoir si toutes les versions des navigateurs définissent des barres de défilement pour rendre visible le contenu débordé visible. J'ai testé dans les navigateurs actuels, mais pas dans les plus anciens.
Pardonnez mon SASS ; P
%size {
// set width and height
}
.outer {
// mask scrollbars of child
overflow: hidden;
// set mask size
@extend %size;
// has absolutely positioned child
position: relative;
}
.middle {
// always have scrollbars.
// don't use auto, it leaves vertical scrollbar showing
overflow: scroll;
// without absolute, the vertical scrollbar shows
position: absolute;
}
// prevent text selection from revealing scrollbar, which it only does on
// some webkit based browsers.
.middle::-webkit-scrollbar {
display: none;
}
.content {
// push scrollbars behind mask
@extend %size;
}
OS X est 10.6.8. Windows est Windows 7.
@mixin{}
, vous feriez %size{}
alors dans les sélecteurs css, appelez @extend %size;
. Les mixins sont généralement utilisés lorsque vous extrayez des variables pour retourner un résultat. Les espaces réservés (alias @extend) sont destinés au code simple répété comme celui-ci - où aucune "fonction" n'est nécessaire.
J'ai juste pensé que je ferais remarquer à quiconque lisant cette question que le réglage overflow: hidden
(ou le débordement-y) sur l' body
élément ne masquait pas les barres de défilement pour moi.
J'ai dû utiliser l' html
élément.
J'ai écrit une version WebKit avec quelques options comme masquer automatiquement , petite version , faire défiler uniquement-y ou seulement-x :
._scrollable{
@size: 15px;
@little_version_ratio: 2;
@scrollbar-bg-color: rgba(0,0,0,0.15);
@scrollbar-handler-color: rgba(0,0,0,0.15);
@scrollbar-handler-color-hover: rgba(0,0,0,0.3);
@scrollbar-coner-color: rgba(0,0,0,0);
overflow-y: scroll;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
width: 100%;
height: 100%;
&::-webkit-scrollbar {
background: none;
width: @size;
height: @size;
}
&::-webkit-scrollbar-track {
background-color:@scrollbar-bg-color;
border-radius: @size;
}
&::-webkit-scrollbar-thumb {
border-radius: @size;
background-color:@scrollbar-handler-color;
&:hover{
background-color:@scrollbar-handler-color-hover;
}
}
&::-webkit-scrollbar-corner {
background-color: @scrollbar-coner-color;
}
&.little{
&::-webkit-scrollbar {
background: none;
width: @size / @little_version_ratio;
height: @size / @little_version_ratio;
}
&::-webkit-scrollbar-track {
border-radius: @size / @little_version_ratio;
}
&::-webkit-scrollbar-thumb {
border-radius: @size / @little_version_ratio;
}
}
&.autoHideScrollbar{
overflow-x: hidden;
overflow-y: hidden;
&:hover{
overflow-y: scroll;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
&.only-y{
overflow-y: scroll !important;
overflow-x: hidden !important;
}
&.only-x{
overflow-x: scroll !important;
overflow-y: hidden !important;
}
}
}
&.only-y:not(.autoHideScrollbar){
overflow-y: scroll !important;
overflow-x: hidden !important;
}
&.only-x:not(.autoHideScrollbar){
overflow-x: scroll !important;
overflow-y: hidden !important;
}
}
Copiez ce code CSS dans le code client pour masquer la barre de défilement:
<style>
::-webkit-scrollbar {
display: none;
}
#element::-webkit-scrollbar {
display: none;
}
</style>
Mon HTML est comme ceci:
<div class="container">
<div class="content">
</div>
</div>
Ajoutez ceci à l' div
endroit où vous souhaitez masquer la barre de défilement:
.content {
position: absolute;
right: -100px;
overflow-y: auto;
overflow-x: hidden;
height: 75%; /* This can be any value of your choice */
}
Et ajoutez ceci au conteneur
.container {
overflow-x: hidden;
max-height: 100%;
max-width: 100%;
}
Pour désactiver la barre de défilement verticale, ajoutez simplement overflow-y:hidden;
.
En savoir plus: débordement .
Ma réponse défilera même lorsque overflow:hidden;
, à l'aide de jQuery:
Par exemple, faites défiler horizontalement avec la molette de la souris:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>
<script type="text/javascript">
$(function() {
$("YourSelector").mousewheel(function(event, delta) {
this.scrollLeft -= (delta * 30);
event.preventDefault();
});
});
</script>
Je pense que vous pouvez le manipuler avec l' overflow
attribut CSS, mais ils ont une prise en charge limitée du navigateur. Une source a déclaré qu'il s'agissait d'Internet Explorer 5 (et versions ultérieures), Firefox 1.5 (et versions ultérieures) et Safari 3 (et versions ultérieures) - peut-être assez pour vos besoins.
Scrolling, Scrolling, Scrolling a une bonne discussion.
J'ai tout essayé et ce qui fonctionnait le mieux pour ma solution était de toujours afficher la barre de défilement verticale, puis d'ajouter une marge négative pour la masquer.
body {
overflow-y: scroll;
margin-right: -20px;
}