¿Alguien sabe si hay una manera de deshabilitar la barra de desplazamiento horizontal usando JavaScript?

No quiero usar overflow-x: hidden;.

8
Jay 21 sep. 2011 a las 20:09

3 respuestas

La mejor respuesta

Sin utilizar la propiedad CSS overflow-x perfectamente viable, puede cambiar el tamaño del contenido para que no requiera una barra de desplazamiento, a través de JavaScript o mediante el diseño HTML / CSS.

También puedes hacer esto:

window.onscroll = function () {
 window.scrollTo(0,0);
}

... que detectará cualquier desplazamiento y devolverá automáticamente el desplazamiento a la parte superior / izquierda. Vale la pena mencionar que hacer algo como esto seguramente frustrará a sus usuarios.

Lo mejor es crear un entorno donde los elementos de la interfaz de usuario no deseados no estén presentes (a través del CSS, a través del diseño). El enfoque mencionado anteriormente muestra elementos UI innecesarios (barras de desplazamiento) y luego hace que no funcionen de la manera que el usuario espera (desplazar la página). Usted ha "roto un contrato" con el usuario: ¿cómo pueden confiar en que el resto de su sitio web o aplicación hará lo esperado cuando el usuario realice una acción familiar?

10
Chris Baker 21 sep. 2011 a las 16:37

Un truco sucio se superpondría a las barras de desplazamiento: http://jsfiddle.net/dJqgf/.

var overlap = $('<div id=b>');

$("#a").wrap($('<div>'));

$("#a").parent().append(overlap);

Con:

#a {
    width: 100px;
    height: 200px;
    overflow-x: scroll;
}

#b {
    position: relative;
    left: 0;
    bottom: 20px;
    width: 100%;
    height: 20px;
    background-color: white;
}
0
pimvdb 21 sep. 2011 a las 16:28

Una forma de evitar que los elementos se desplacen hacia abajo en jQuery:

$(element).scroll(function () {
    this.scrollTop = 0;
    this.scrollLeft = 0;
});

Bueno, esto en realidad no evita el desplazamiento, pero "retrocede" a la esquina superior izquierda de un elemento, similar a la solución de Chris que se creó para la ventana en lugar de elementos individuales. Elimine las líneas scrollTop o scrollLeft para satisfacer sus necesidades.

2
Lekensteyn 2 dic. 2012 a las 21:37