Deshabilitar las barras de desplazamiento verticales y horizontales de los navegadores

Respuestas:

144

En caso de que necesite la posibilidad de ocultar y mostrar barras de desplazamiento dinámicamente, puede usar

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

y

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

en algún lugar de su código.

Alexander Prokofyev
fuente
4
El desbordamiento oculto no siempre funciona en IE. Vea la respuesta de AnthonyWJones a continuación.
Tiago Almeida
4
oveflow: hiddenno evitará nada en los teléfonos inteligentes.
dvlden
En cromo, esto desactiva la barra de desplazamiento sin ocultarlo (que todavía está ahí y sigue cambiando el tamaño de todo lo demás, pero ahora es de color gris)
taltamir
120 
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
fuente
5
Dos votos a favor es notablemente poco por ser la única respuesta pura de JavaScript.
Fzs2
2
@HermannIngjaldsson: Ver que OP pidió una solución de JavaScript o jQuery y había aceptado una solución de jQuery hace 4 años, solo tiene sentido. No estoy diciendo que la respuesta no sea buena, solo digo lo obvio sobre los votos más bajos. +1 de mí de todos modos.
No.
esta es la única solución que funcionó para mí, ya que el desbordamiento oculto del cuerpo no ataca todo el documento, ¡esta es la solución correcta para este problema! muchas gracias, me ahorraste mucho tiempo!
Adnane.T
Esta es una solución brillante y merece un voto positivo. También resuelve el problema con CSS fijo, donde la página se desplazará hacia arriba.
haipham23
50

Prueba CSS

<body style="overflow: hidden">
Ray Lu
fuente
15
Para compatibilidad con el navegador, agregaría este estilo a la etiqueta HTML también: html, body {overflow: hidden;}
Ady
32

Hasta ahora tenemos desbordamiento: oculto en el cuerpo. Sin embargo, IE no siempre respeta eso y debe poner scroll = "no" en el elemento del cuerpo y / o colocar overflow: hidden en el elemento html también.

Puede llevar esto más lejos cuando necesite 'tomar el control' del puerto de visualización, puede hacer esto: -

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

Un elemento con una altura del 100% en el cuerpo tiene la altura completa de la ventana de visualización, y el elemento se coloca absolutamente usando bottom: nnPX se establecerá nn píxeles por encima del borde inferior de la ventana, etc.

AnthonyWJones
fuente
2
¿No es el ',' debería ser ';', en el cuerpo css?
paynestrike
12

Prueba CSS.

Si desea eliminar Horizontal

overflow-x: hidden;

Y si quieres eliminar Vertical

overflow-y: hidden;
shafraz
fuente
10

En las versiones modernas de IE (IE10 y superior), las barras de desplazamiento se pueden ocultar mediante la -ms-overflow-stylepropiedad .

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

En Chrome, las barras de desplazamiento se pueden diseñar:

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

Esto es muy útil si desea utilizar el desplazamiento corporal "predeterminado" en una aplicación web, que es considerablemente más rápido que overflow-y: scroll.

Lg102
fuente
solo esto me ha funcionado de todas las respuestas :) ¡gracias!
Gediminas
9

En caso de que también necesite soporte para Internet Explorer 6, simplemente desborde el html

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

y

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

IE tiene algún error con las barras de desplazamiento. Entonces, si desea alguno de los dos, debe incluir lo siguiente para ocultar la barra de desplazamiento horizontal:

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

y ocultar vertical:

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

Zeeshan Ali
fuente
4

(No puedo comentar todavía, pero quería compartir esto):

El código de Lyncee funcionó para mí en el navegador de escritorio. Sin embargo, en iPad (Chrome, iOS 9), bloqueó la aplicación. Para arreglarlo, cambié

document.documentElement.style.overflow = ...

a

document.body.style.overflow = ...

que resolvió mi problema.

Erasmus Cedernaes
fuente
2

Debido a que Firefox tiene una flecha atajo clave, es probable que desee poner un <div>torno con estilo CSS: overflow:hidden;.

Qvcool
fuente
2

Usando JQuery puede deshabilitar la barra de desplazamiento con este código: 

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

También puedes habilitarlo nuevamente con este código:

 $('body').unbind('mousewheel');
gtzinos
fuente