javascript - bloquear - ocultar scroll pero que funcione
Deshabilitar navegadores barra de desplazamiento vertical y horizontal (11)
¿Es posible desactivar las barras de desplazamiento verticales y horizontales de los navegadores usando jQuery o javascript?
(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 el iPad (Chrome, iOS 9), se bloqueó la aplicación. Para arreglarlo, cambié
document.documentElement.style.overflow = ...
a
document.body.style.overflow = ...
que resolvió mi problema
Debido a que Firefox tiene un atajo de tecla de flecha, es probable que desee colocar un <div> alrededor con estilo CSS: overflow:hidden; .
En caso de que necesite la posibilidad de ocultar y mostrar las barras de desplazamiento de forma dinámica, puede usar
$("body").css("overflow", "hidden");
y
$("body").css("overflow", "auto");
en algún lugar de tu código.
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");
En las versiones modernas de IE (IE10 y superior), las barras de desplazamiento se pueden ocultar con la -ms-overflow-style .
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 del cuerpo ''predeterminado'' en una aplicación web, que es considerablemente más rápido que overflow-y: scroll .
Hasta ahora tenemos desbordamiento: escondido en el cuerpo. Sin embargo, IE no siempre lo respeta y también debe colocar scroll = "no" en el elemento del cuerpo y / o desbordamiento del lugar: también está oculto en el elemento html.
Puedes llevar esto más allá cuando necesites ''tomar el control'' del puerto de vista, puedes 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 la ventana y el elemento se coloca completamente con la parte inferior: nnPX se establecerá en píxeles sobre el borde inferior de la ventana, etc.
IE tiene algunos errores con las barras de desplazamiento. Entonces, si quiere cualquiera 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;
Prueba CSS
<body style="overflow: hidden">
Prueba CSS.
Si quieres eliminar Horizontal
overflow-x: hidden;
Y si quieres eliminar Vertical
overflow-y: hidden;
Usando JQuery puedes 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 de nuevo con este código:
$(''body'').unbind(''mousewheel'');
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
}