Masquage de la barre de défilement sur une page HTML


748

CSS peut-il être utilisé pour masquer la barre de défilement? Comment ferais-tu ceci?


4
@UweKeim, il n'y a pas de truc pour IE11
daVe

Réponses:


425

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.


4
Il n'y a pas d'option «aucun» pour la propriété de débordement. Les options disponibles incluent: visible, caché, défilement, auto, hériter.
Sergiy Sokolenko

1273
En fait, ce n'est pas complètement la bonne réponse: débordement: caché ne "cache" pas la barre de défilement. Il arrête également la fonction de défilement sur la page. Ce n'est pas exactement ce que nous demandons.
adriendenat

17
Dans Chrome, lorsque le débordement du corps est défini sur le hiddendé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.
Doug Molineux

13
Je ne vois pas l'intérêt d'affirmer que le overflow: hiddendé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 .
BoltClock

39
Pour moi, l'assertion est parfaitement valable, car la question est de cacher la barre de défilement , pas de désactiver le défilement .
sboisse

977

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 widthpour 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.)


11
Exactement ce que je cherchais depuis que je voulais vraiment cacher les barres de défilement mais que les éléments puissent toujours défiler (par exemple les touches haut / bas)
Mathias

7
cela devrait être la meilleure réponse car les autres solutions ne vous permettent pas de faire défiler
nuway

7
Cela prend-il en charge d'autres navigateurs que le kit Web? Parce que cela ne fonctionne pas dans mozilla.
Rupam Datta

12
Il existe cependant une demande de fonctionnalité sur le tracker Mozilla. Vous pourrez peut-être accélérer la mise en œuvre en votant pour cela là-bas :)
Peter

3
C'EST LA RÉPONSE CORRECTE! Comme d'autres manquent. Le problème n'est pas seulement de masquer la barre de défilement, mais aussi comment le débordement affecte d'autres styles. J'ai rencontré exactement le même problème dans notre application. Nous ne voulons PAS de débordement automatique sur 99% de l'application, mais il y a une section d'aide où vous voulez que l'utilisateur puisse faire défiler vers le bas. Étant donné que le corps a débordé: caché, le seul wan pour gérer cela était une classe ng à la racine, ou grâce à ce gars, en utilisant simplement du CSS.
Leon Gaban

524

Oui, en quelque sorte ..

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:

Internet Explorer 5.5+

* 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

Plus d'informations sur Internet Explorer

Internet Explorer rend scrolldisponible 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 !DOCTYPEdé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.Primitivesdans 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


WebKit

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 */

Entrez la description de l'image ici

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 */ }

Plus de détails sur Chrome

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

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-unscrollableFonctionne 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.

  • Documents de développement de Mozilla sur 'Overflow'

Plus de détails sur Mozilla

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 ):

  • Attribut:        barres de défilement
  • Type:               nsIDOMBarProp
  • Description:   objet qui contrôle si les barres de défilement sont affichées ou non dans la fenêtre. Cet attribut est "remplaçable" en JavaScript. Lecture seulement

Enfin, le rembourrage est comme de la magie.

Comme cela a été mentionné précédemment dans certaines autres réponses, voici une illustration suffisamment explicite.

Entrez la description de l'image ici


Leçon d'histoire

Barres de défilement

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.

Divers

Dans un brouillon de spécification HTML5, l' seamlessattribut 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' scrollbarobjet BarProp est un enfant de l' windowobjet 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.visiblereviendra truesi 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.scrollRestorationpeut ê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 ().

---

Lectures complémentaires:

Exemples


27
Cette réponse s'appliquerait à beaucoup plus de navigateurs (à savoir IE) plutôt qu'à la réponse actuellement mise à jour.
Matt Jensen du

Excellent ajout. En fait, mis en œuvre cette même solution aujourd'hui! Peut être utile de mentionner que l'autre élément doit être débordé: caché;
Matt Jensen,

2
Ceci est la réponse correcte et complète. J'explique que si vous voulez simplement empêcher un utilisateur de faire défiler, vous pouvez utiliser la règle de débordement. Vous pouvez également implémenter votre propre fonction de défilement personnalisée. Si cela ne suffit pas, vous pouvez définir les propriétés de la barre de défilement directement en utilisant des règles différentes pour différents navigateurs.
newshorts

1
Bien qu'il s'agisse d'une réponse incroyablement bien pensée et très détaillée et de nombreuses ressources liées, il existe d'énormes problèmes pour les utilisateurs de technologies d'assistance lorsque vous désactivez le défilement et utilisez javascript pour gérer tout le défilement. Si vous ne définissez pas également le focus sur un élément à chaque fois que vous faites défiler pour l'utilisateur, votre utilisateur AT sera complètement perdu. De plus, votre utilisateur a désormais perdu tout contrôle précis sur ce qu'il voit. UX très pauvre pour prendre en charge le défilement pour votre utilisateur.
ShiningLight

Firefox Quantum 63.0.1 sur MacOS High Sierra, ne masque pas la barre de défilement, même avec la règle «overflow: -moz-scrollbars-none». Quelqu'un connaît une solution à cela? Tous les autres navigateurs semblent fonctionner avec les solutions suggérées.
Simona Adriani

106

Vous pouvez accomplir cela avec un wrapper divdont le débordement est masqué et l' divensemble interne défini sur auto.

Pour supprimer la divbarre de défilement de l'intérieur , vous pouvez la retirer de la divfenê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.

JSFiddle

HTML

<div class="hide-scroll">
    <div class="viewport">
        ...
    </div>
</div>

CSS

.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;
}

8
Cela devrait être la réponse acceptée imo. La seule chose que je devais ajouter était height: inheriteddans le .viewportCSS.
Helzgate

4
Le seul problème avec cette réponse est l'espace "mort" laissé par la barre de défilement déplacée, car nous ne connaissons pas réellement la largeur de la barre de défilement, afin de la soustraire du remplissage.
Frondor

3
De plus, vous n'avez pas besoin d'utiliser des valeurs fixes pour le remplissage et les marges. 100%est plus polyvalent et fait le travail.
Frondor

A travaillé dans IE11, Operah et Chrome, n'a pas encore testé Firefox. C'est une excellente réponse, +1.
presque un débutant

pourquoi -100pxet 100px??
oldboy

61

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;


2
Malheureusement, cela ne fonctionne pas dans FireFox 48.0.2 sur macOS Sierra. Si vous le faites, 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.
Martyn Chamberlin

1
Oh, et de developer.mozilla.org/en-US/docs/Web/CSS/overflow , nous lisons ceci -moz-scrollbars-none: "Il s'agit d'une API obsolète et il n'est plus garanti de fonctionner."
Martyn Chamberlin

1
J'ai mis à jour ma réponse avec le dernier support pour Firefox :)
Hristo Eftimov

56

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é.


3
réponse la plus sous-estimée ici
AGrush

Seule solution qui a corrigé mon cauchemar de défilement: D Merci!
boomdrak

21

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;}

Fonctionne pour moi dans Chrome et Firefox, n'a pas testé IE ou tout autre navigateur. jsfiddle.net/8xtfk729
Ben Davis

1
Sur Chrome (v54 au moins), cela désactive le défilement via la molette de défilement pour une raison quelconque. Faire défiler via les touches fléchées, home / end / pg down / pg up, touch flick et mouse 3 click n drag fonctionne toujours.
House3272

Cette réponse est légitime, elle fonctionne et semble fonctionner sur tous les navigateurs.
Sam

Cela cache tout le div de mon côté
Jonny

16

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).


sa réponse ne fonctionne pas sur Chrome et Safari dans iOS 12.3
oldboy


11

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


1
Ceci est la bonne réponse et devrait être la première. Tout ce qui précède ne répond pas à la question posée. OP ne demande pas que le défilement soit désactivé, zhe veut masquer la barre de défilement.
pixelpax

11

En plus de la réponse de Peter:

#element::-webkit-scrollbar {
    display: none;
}

Cela fonctionnera de la même manière pour Internet Explorer 10:

 #element {
      -ms-overflow-style: none;
 }

10

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!

Codepen

/* 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;
}

1
une explication sur la façon dont cela fonctionne serait appréciée - jouer avec la visibilité parent / enfant pour masquer la barre de défilement est horrible
JackyJohnson

1
@believesInSanta J'ai ajouté des commentaires et codepen pour mieux expliquer. Je ne suis pas d'accord avec votre évaluation selon laquelle jouer avec la visibilité est un moyen horrible de masquer la barre de défilement. Je comprends que c'est un hack, mais la bonne façon d'obtenir cet effet serait que tous les navigateurs prennent en charge une façon de styler la barre de défilement séparément comme Chrome et Safari le permettent.
Blake Plumb

2
Je suis juste tombé amoureux de votre solution. Cela fonctionne parfaitement (utilisé dans les applications conçues pour être utilisées par les navigateurs modernes). Merci beaucoup!
Maxime Lafarie

7

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:

  • Un élément extérieur pour masquer les barres de défilement.
  • Un élément central pour avoir les barres de défilement.
  • Et un élément de contenu pour définir à la fois la taille de l'élément du milieu et lui donner des barres de défilement.

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;
}

Essai

OS X est 10.6.8. Windows est Windows 7.

  • Firefox 32.0 Scrollbars caché. Les touches fléchées ne défilent pas, même après avoir cliqué pour se concentrer, mais la molette de la souris et deux doigts sur le trackpad le font. OS X et Windows.
  • Barres de défilement Chrome 37.0 masquées. Les touches fléchées fonctionnent après avoir cliqué pour se concentrer. La molette de la souris et le trackpad fonctionnent. OS X et Windows.
  • Barres de défilement d'Internet Explorer 11 masquées. Les touches fléchées fonctionnent après avoir cliqué pour se concentrer. La molette de la souris fonctionne. Les fenêtres.
  • Safari 5.1.10 Barres de défilement cachées. Les touches fléchées fonctionnent après avoir cliqué pour se concentrer. La molette de la souris et le trackpad fonctionnent. OS X.
  • Android 4.4.4 et 4.1.2. Barres de défilement cachées. Touchez le défilement fonctionne. Testé dans Chrome 37.0, Firefox 32.0 et HTMLViewer sur 4.4.4 (quel qu'il soit). Dans HTMLViewer, la page a la taille du contenu masqué et peut également défiler! Le défilement interagit de manière acceptable avec le zoom de page.

1
Note sans rapport (en ce qui concerne la question). Dans ce cas, vous devez utiliser @extend contre @include. Donc au lieu de @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.
Mike Barwick

1
J'ai modifié pour utiliser @extend. Le résultat est probablement moins compréhensible pour les personnes qui ne connaissent pas SCSS, mais assez bien.
Seth W. Klein

6

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.


3
Je ne me souviens pas exactement car c'était il y a quelques mois, mais je pense que le réglage du débordement sur le corps fonctionnait dans Chrome, mais pas Firefox (ou vice-versa). Cependant, l'utilisation de la balise HTML a fonctionné sur les deux.
Brad Azevedo du

De mémoire, cela peut être une différence de mode excentrique.
thomasrutter

5

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;
    }
}

http://codepen.io/hicTech/pen/KmKrjb


5

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>

4

Mon HTML est comme ceci:

<div class="container">
  <div class="content">
  </div>
</div>

Ajoutez ceci à l' divendroit 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%;
}


3

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>

2
Le défilement fonctionne, mais est presque toujours une mauvaise expérience utilisateur.
Brandon Anzaldi

1
bien que cela soit possible, avec un bon exemple, il existe d'énormes problèmes pour les utilisateurs de technologies d'assistance lorsque vous désactivez le défilement et utilisez javascript pour gérer le défilement. Si vous ne définissez pas également le focus sur un élément à chaque fois que vous faites défiler pour l'utilisateur, votre utilisateur AT sera complètement perdu. De plus, chaque utilisateur a désormais perdu tout contrôle précis sur ce qu'il voit. UX très pauvre pour prendre en charge le défilement pour votre utilisateur. Outre la molette de la souris, vous devez également gérer les touches haut / bas, les rotors du lecteur d'écran, les clics de souris et les commandes du pavé tactile. Cela devient lourd pour le développeur et horrible pour l'utilisateur.
ShiningLight

2

Je pense que vous pouvez le manipuler avec l' overflowattribut 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.


1
Bon lien. Il est agréable de savoir comment le résultat sur plusieurs navigateurs. Malheureusement, le chiffre pour une capture d'écran des résultats finaux est cassé
Chetabahana

-1

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;
}
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.