Désactiver les barres de défilement verticales et horizontales des navigateurs

117

Est-il possible de désactiver les barres de défilement verticales et horizontales des navigateurs en utilisant jQuery ou javascript?

javascript jquery Naveen
la source
Je pense que dans certaines situations, spécialement si vous voulez basculer entre défilement et pas de défilement, cette solution est plus préférable: stackoverflow.com/questions/8701754/...
Yousef Salimpour
Vous pouvez trouver une réponse plus complète à cette question ici stackoverflow.com/a/25561646/1922144
davidcondrey

Réponses:

144

Si vous avez besoin de la possibilité de masquer et d'afficher les barres de défilement dynamiquement, vous pouvez utiliser

$("body").css("overflow", "hidden");

et

$("body").css("overflow", "auto");

quelque part dans votre code.

Alexandre Prokofyev
la source
4
Le débordement caché ne fonctionne pas toujours dans IE. Voir la réponse d'AnthonyWJones ci-dessous.
Tiago Almeida
4
oveflow: hiddenn'empêchera rien sur les smartphones.
dvlden
En chrome, cela désactive la barre de défilement sans la cacher (elle est toujours là et change toujours la taille de tout le reste, mais maintenant elle est grisée)
taltamir
121 
function reloadScrollBars() {
    document.documentElement.style.overflow = 'auto';  // firefox, chrome
    document.body.scroll = "yes"; // ie only
}

function unloadScrollBars() {
    document.documentElement.style.overflow = 'hidden';  // firefox, chrome
    document.body.scroll = "no"; // ie only
}
Lyncee
la source
5
Deux votes positifs sont remarquablement peu pour être la seule réponse javascript pure.
Fzs2
2
@HermannIngjaldsson: Voir OP a demandé une solution JavaScript ou jQuery et a accepté une solution jQuery il y a 4 ans, cela n'a que du sens. Je ne dis pas que la réponse n'est pas bonne, je dis simplement l'évidence au sujet des votes inférieurs. +1 de moi quand même.
Non
c'est la seule solution qui a fonctionné pour moi, puisque le débordement caché du corps n'attaque pas tout le document, c'est la bonne solution pour ce problème! merci beaucoup, vous m'avez sauvé beaucoup de temps!
Adnane.T
C'est une solution brillante et mérite un vote favorable. Il résout également le problème avec le CSS fixe, où la page défilera vers le haut.
haipham23
50

Essayez CSS

<body style="overflow: hidden">
Ray Lu
la source
15
Pour la compatibilité du navigateur, j'ajouterais également ce style à la balise HTML: html, body {overflow: hidden;}
Ady
32

Jusqu'à présent, nous avons un débordement: caché sur le corps. Cependant, IE ne respecte pas toujours cela et vous devez également mettre scroll = "no" sur l'élément body et / ou placer overflow: hidden sur l'élément html également.

Vous pouvez aller plus loin lorsque vous avez besoin de `` prendre le contrôle '' du port de vue, vous pouvez le faire: -

<style>
 body {width:100%; height:100%; overflow:hidden; margin:0; }
 html {width:100%; height:100%; overflow:hidden; }
</style>

Un élément à hauteur de 100% dans le corps a la hauteur totale de la fenêtre de la fenêtre, et l'élément positionné de manière absolue en utilisant le bas: nnPX sera défini nn pixels au-dessus du bord inférieur de la fenêtre, etc.

AnthonyWJones
la source
2
n'est-ce pas le ',' devrait être ';', dans le corps css?
paynestrike
12

Essayez CSS.

Si vous souhaitez supprimer Horizontal

overflow-x: hidden;

Et si vous souhaitez supprimer Vertical

overflow-y: hidden;
shafraz
la source
10

Dans les versions modernes d'IE (IE10 et supérieur), les barres de défilement peuvent être masquées à l'aide de la -ms-overflow-stylepropriété .

html {
     -ms-overflow-style: none;
}

Dans Chrome, les barres de défilement peuvent être stylisées:

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

Ceci est très utile si vous souhaitez utiliser le défilement corporel «par défaut» dans une application Web, qui est considérablement plus rapide que overflow-y: scroll.

Lg102
la source
seulement cela a fonctionné pour moi de toutes les réponses :) merci!
Gediminas
9

Si vous avez également besoin de la prise en charge d'Internet Explorer 6, débordez simplement le code HTML

$("html").css("overflow", "hidden");

et

$("html").css("overflow", "auto");
Gawin
la source
5

IE a un bug avec les barres de défilement. Donc, si vous voulez l'un des deux, vous devez inclure les éléments suivants pour masquer la barre de défilement horizontale:

overflow-x: hidden;
overflow-y:scroll;

et pour cacher vertical:

overflow-y: hidden;
overflow-x: scroll;

Zeeshan Ali
la source
4

(Je ne peux pas encore commenter, mais je voulais partager ceci):

Le code de Lyncee a fonctionné pour moi dans le navigateur de bureau. Cependant, sur iPad (Chrome, iOS 9), l'application a planté. Pour le réparer, j'ai changé

document.documentElement.style.overflow = ...

à

document.body.style.overflow = ...

qui a résolu mon problème.

Erasmus Cedernaes
la source
2

Parce que Firefox a une flèche de raccourci clavier, vous voudrez probablement mettre un <div>autour avec un style CSS: overflow:hidden;.

Qvcool
la source
2

En utilisant JQuery, vous pouvez désactiver la barre de défilement avec ce code: 

$('body').on({
    'mousewheel': function(e) {
        if (e.target.id == 'el') return;
        e.preventDefault();
        e.stopPropagation();
     }
});

Vous pouvez également l'activer à nouveau avec ce code:

 $('body').unbind('mousewheel');
gtzinos
la source