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

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
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
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
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
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
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
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
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
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
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
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
source