Masquer la barre de défilement d'une page HTML
Est-ce que CSS peut être utilisé pour cacher la barre de défilement? Comment ferais-tu ceci?
Définissez overflow: hidden; sur la balise body comme ceci:
<style type="text/css">
body {
overflow: hidden;
}
</style>
Le code ci-dessus masque les barres de défilement horizontale et verticale.
Si vous voulez masquer niquement la barre de défilement verticale, utilisez overflow-y:
<style type="text/css">
body {
overflow-y: hidden;
}
</style>
Et si vous voulez cacher niquement la barre de défilement horizontale, utilisez overflow-x:
<style type="text/css">
body {
overflow-x: hidden;
}
</style>
Remarque: La fonctionnalité de défilement sera également désactivée. Reportez-vous aux réponses ci-dessous si vous souhaitez simplement masquer la barre de défilement, mais pas la fonction de défilement.
WebKit prend en charge les pseudo-éléments de la barre de défilement qui peuvent être masqués avec les règles CSS standard:
#element::-webkit-scrollbar {
display: none;
}
Si vous voulez que toutes les barres de défilement soient masquées, utilisez
::-webkit-scrollbar {
display: none;
}
Je ne suis pas sûr de pouvoir restaurer - 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 fan d’abuser de width pour améliorer la visibilité.
Firefox 64 prend désormais en charge la version expérimentale propriété scrollbar-width par défaut (63 requiert 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:
.content {
/* These rules create an artificially confined space, so we get
a scrollbar that we can hide. They are not directly involved in
hiding the scrollbar. */
border: 1px dashed gray;
padding: .5em;
white-space: pre-wrap;
height: 5em;
overflow-y: scroll;
}
.content {
/* This is the magic bit for Firefox */
scrollbar-width: none;
}
.content::-webkit-scrollbar {
/* This is the magic bit for WebKit */
display: none;
}<div class='content'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu
urna et leo aliquet malesuada ut ac dolor. Fusce non arcu vel ligula
fermentum sodales a quis sapien. Sed imperdiet justo sit amet venenatis
egestas. Integer vitae tempor enim. In dapibus nisl sit amet purus congue
tincidunt. Morbi tincidunt ut eros in rutrum. Sed quam erat, faucibus
vel tempor et, elementum at tortor. Praesent ac libero at arcu eleifend
mollis ut eget sapien. Duis placerat suscipit eros, eu tempor tellus
facilisis a. Vivamus vulputate enim felis, a euismod diam elementum
non. Duis efficitur ac elit non placerat. Integer porta viverra nunc,
sed semper ipsum. Nam laoreet libero lacus.
Sed sit amet tincidunt felis. Sed imperdiet, nunc ut porta elementum,
eros mi egestas nibh, facilisis rutrum sapien dolor quis justo. Quisque
nec magna erat. Phasellus vehicula porttitor nulla et dictum. Sed
tincidunt scelerisque finibus. Maecenas consequat massa aliquam pretium
volutpat. Duis elementum magna vel velit elementum, ut scelerisque
odio faucibus.
</div>(Notez que ce n'est pas vraiment une réponse correcte à la question, car elle cache également les barres horizontales, mais c'est ce que je cherchais lorsque Google m'a pointé ici, alors je me suis dit ' d le poster quand même.)
Oui, en quelque sorte ..
Lorsque vous posez la question "Les barres de défilement d'un navigateur peuvent-elles être supprimées d'une manière ou d'une autre, plutôt que simplement cachées ou camouflées", tout le monde dira "Impossible", car il n'est pas possible de supprimer les barres de défilement de tous les navigateurs d'une manière compatible et compatible, et puis il y a tout l'argument de la facilité d'utilisation.
Toutefois, il est possible d’empêcher le navigateur d’avoir à générer et à afficher des barres de défilement si vous ne permettez pas à votre page Web de déborder.
Cela signifie simplement que nous devons substituer de manière proactive le même comportement que le navigateur ferait normalement pour nous et lui dire merci, mais non merci mon pote. Plutôt que d'essayer de supprimer les barres de défilement (ce que nous savons tous n'est pas possible), nous pouvons éviter de faire défiler (parfaitement réalisable) et de faire défiler les éléments que nous fabriquons et d'avoir davantage de contrôle sur ceux-ci.
Créer une div avec débordement masqué. Détecter lorsque l'utilisateur tente de faire défiler le contenu, mais ne le peut pas car nous avons désactivé la possibilité pour les navigateurs de faire défiler avec débordement: masqué .. et déplace plutôt le contenu à l'aide de JavaScript lorsque cela se produit. En créant ainsi notre propre défilement sans défilement par défaut des navigateurs ou en utilisant un plugin tel que iScroll .
---
Par souci de profondeur; toutes les manières spécifiques du fournisseur 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 de l'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;
}
A partir d'Internet Explorer 8, ces propriétés étaient préfixées par le fournisseur mais n'ont toujours pas été approuvées par 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 de détails sur Internet Explorer
Internet Explorer rend disponible scroll, ce qui permet de désactiver ou non 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 déclaration !DOCTYPE pour spécifier un mode conforme aux normes, cet attribut s'applique à l'élément HTML. Lorsque le mode conforme aux normes n'est pas spécifié, comme dans les versions antérieures d'Internet Explorer, cet attribut s'applique à l'élément BODY, NOT l'élément HTML.
Il est également intéressant de noter que lorsque vous utilisez .NET, la classe ScrollBar dans 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
- MSDN. Propriétés de l'interface utilisateur de base
- W3C. À propos des propriétés de barre de défilement non standard
- MSDN. .NET ScrollBar Class
WebKit
Les extensions WebKit liées à la personnalisation de la barre de défilement sont les suivantes:
::-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 à tous les éléments de la barre de défilement ayant une orientation horizontale.:vertical- La pseudo-classe verticale s'applique à tous les éléments de la barre de défilement ayant 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émente ou non la position de la vue lorsqu’il est utilisé (par exemple, 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 élément de piste augmente ou non 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 de 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 le morceau de piste vient en butée contre une paire de boutons.:single-button- La pseudo-classe à un 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 le morceau de piste touche un bouton singleton.:no-button- S'applique aux morceaux de piste et indique si le morceau de piste va ou non jusqu'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 à tous les éléments 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 à tous les éléments de la barre de défilement et indique si la fenêtre contenant la barre de défilement est actuellement 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'il fonctionne avec n'importe quel contenu et de le 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 statique HandlerRegistration addWindowScrollHandler (gestionnaire Window.ScrollHandler)
Ajoute un gestionnaire Window.ScrollEvent Paramètres: handler - le gestionnaire Retourne: renvoie l'enregistrement du gestionnaire [ source ] ( http://www.gwtproject.org/javadoc/ last/com/google/gwt/user/client/Window.html # addWindowScrollHandler (com.google.gwt.user.client.Window.ScrollHandler) )
Mozilla
Mozilla possède des extensions pour manipuler les barres de défilement, mais il est recommandé de ne pas les utiliser.
-moz-scrollbars-noneIls recommandent d'utiliser overflow: caché à la place de celui-ci.-moz-scrollbars-horizontalSimilaire à overflow-x-moz-scrollbars-verticalSimilaire à overflow-y-moz-hidden-unscrollableNe fonctionne qu'en interne dans les paramètres de profil de l'utilisateur. Désactive le défilement des éléments racine XML et désactive l’utilisation des flèches et de la molette de la souris pour faire défiler les pages Web.
Plus de détails sur Mozilla
Autant que je sache, cela n’est pas vraiment utile, mais il convient de noter que l’attribut qui contrôle l’affichage ou non des barres de défilement dans Firefox est ( lien de référence ):
- Attribut: barres de défilement
- Type: nsIDOMBarProp
- Description: Objet contrôlant si les barres de défilement sont affichées ou non dans la fenêtre. Cet attribut est "remplaçable" en JavaScript. Lecture seulement
Last but not least, le rembourrage est comme par magie.
Comme cela a déjà été mentionné dans d'autres réponses, voici une illustration suffisamment explicite.
Leçon d'histoire
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.
- 10 Inventions sur les barres de défilement et de défilement
- https://tools.ietf.org/id/draft-hellstrom-textpreview-02.txt
- https://tools.ietf.org/id/draft-mrose-blocks-service-01.txt
Divers
Dans un brouillon de spécification HTML5, l'attribut seamless a été défini pour empêcher les barres de défilement d'apparaître dans les iFrames afin qu'elles puissent être fusionnées avec le contenu environnant sur une page . Bien que cet élément n'apparaisse pas dans la dernière révision.
L'objet scrollbar BarProp est un enfant de l'objet window et représente l'élément d'interface utilisateur contenant un mécanisme de défilement ou un concept d'interface similaire. window.scrollbars.visible retournera 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 d'historique inclut également des fonctionnalités de restauration du défilement lors de la navigation d'une page afin de conserver la position du 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 en changer (en ajoutant ="auto"/"manual". Auto est la valeur par défaut. Si vous le changez en mode manuel, cela signifie que vous deviendrez propriétaire des modifications de défilement peut être requis lorsqu'un utilisateur traverse l'historique de l'application Si vous le souhaitez, vous pouvez suivre la position du défilement lorsque vous insérez des entrées d'historique avec history.pushState ().
---
Lectures complémentaires:
- barre de défilement sur Wikipedia
- barre de défilement (Windows)
- La méthode de défilement
- La méthode de défilement - Microsoft Dev Network
- iScroll sur Github (référencé dans la première section ci-dessus)
- Scrolling and Scrollbars un article de Jakob Nielsen sur la convivialité
Exemples
Vous pouvez y parvenir avec un wrapper div dont le débordement est masqué et dont le paramètre div interne est défini sur auto.
Pour supprimer la barre de défilement de div intérieure, vous pouvez la retirer de la fenêtre de visualisation de div extérieure en appliquant une marge négative à la div intérieure. Appliquez ensuite un remplissage égal à la division interne afin que le contenu reste visible.
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;
}
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;
Je pense avoir trouvé une solution pour vous si vous êtes toujours intéressé. C'est ma première semaine, mais ça a fonctionné 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 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 (sandwich à la crème glacée, dans le navigateur natif et sur Chrome) et sur un iPad avec iOS 6 (dans Safari et Chrome).
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.
Note: J'ai feuilleté les 19 autres réponses pour voir si le code que je publie a déjà été couvert et il semble qu'aucune réponse ne résume la situation en 2019, même si beaucoup d'entre eux vont dans d'excellents détails. Toutes mes excuses si cela a été dit par quelqu'un d'autre et ça m'a manqué.
Utilisation la propriété CSS :overflow
.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 souhaitez toujours que l'utilisateur puisse faire défiler ce contenu (sans que la barre de défilement ne soit visible), vous devez utiliser JavaScript.
Voir ma réponse ici pour une solution: Masquer la barre de défilement tout en pouvant défiler avec la souris/le clavier
Absence de navigateur pour masquer la barre de défilement.
Il a été testé sur Edge, Chrome, Firefox et Safari
Masquer la barre de défilement tout en pouvant 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;
}
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;
}
Si vous souhaitez que le défilement fonctionne, avant de masquer les barres de défilement, envisagez de les styler. Les versions modernes d’OS X et des systèmes d’exploitation mobiles ont des barres de défilement qui, bien qu’elles soient impraticables à saisir avec une souris, sont plutôt belles et neutres.
Pour masquer les barres de défilement, technique de John Kurlak fonctionne bien sauf pour les utilisateurs de Firefox qui ne disposent pas de pavés tactiles sans aucun moyen de faire défiler l'écran à moins de disposer d'une souris avec une molette, ce qu'ils font probablement, mais même alors ils ne peuvent généralement que faire défiler verticalement.
La technique de John utilise trois éléments:
- Un élément externe 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 taille de l'élément central et lui donner des barres de défilement.
Il doit être possible de définir la même taille pour les éléments extérieurs et les éléments de contenu, ce qui élimine l'utilisation de pourcentages, mais je ne peux penser à rien d'autre qui ne fonctionne 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 les plus anciens.
Pardon 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 Barres de défilement masquées. Les touches fléchées ne défilent pas, même après avoir cliqué pour faire la mise au point, contrairement à la molette de la souris et à deux doigts sur le pavé tactile. OS X et Windows.
- Chrome 37.0 Barres de défilement masquées. Les touches fléchées fonctionnent après avoir cliqué pour faire la mise au point. La molette de la souris et le trackpad fonctionnent. OS X et Windows.
- Internet Explorer 11 Barres de défilement masquées. Les touches fléchées fonctionnent après avoir cliqué pour faire la mise au point. La molette de la souris fonctionne. Les fenêtres.
- Safari 5.1.10 Barres de défilement masquées. Les touches fléchées fonctionnent après avoir cliqué pour faire la mise au point. 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. Essayé dans Chrome 37.0, Firefox 32.0 et HTMLViewer sur 4.4.4 (peu importe ce que c'est). Dans HTMLViewer, la page a la taille du contenu masqué et peut également faire défiler! Le défilement interagit de manière acceptable avec le zoom de page.
Je pensais simplement que je ferais remarquer à quiconque lirait cette question que le réglage de overflow: hidden (ou overflow-y) sur l'élément body ne me cachait pas les barres de défilement.
Je devais utiliser l'élément html.
J'ai écrit une version de WebKit avec des options comme masquer automatiquement , petite version , faites défiler seulement-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;
}
}
Mon HTML est comme ça:
<div class="container">
<div class="content">
</div>
</div>
Ajoutez ceci à votre div où vous voulez 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%;
}
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>
Pour désactiver la barre de défilement verticale, ajoutez simplement overflow-y:hidden;.
Trouvez plus à ce sujet: débordement .
Ma réponse défilera même lorsque overflow:hidden;, en utilisant 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'attribut CSS overflow CSS, mais la prise en charge de navigateur est limitée. Une source a déclaré qu'il s'agissait d'Internet Explorer 5 (et ultérieur), de Firefox 1.5 (et ultérieur) et de Safari 3 (et ultérieur) - peut-être assez pour vos besoins.
Défilement, défilement, défilement a une bonne discussion.