Deshabilitar desplazamiento horizontal con JavaScript

Question

¿Alguien sabe si hay una forma de desactivar la barra de desplazamiento horizontal mediante JavaScript?

No deseo usar overflow-x: hidden;.

Answer 1

Sin usar la propiedad de CSS overflow-x perfectamente realizable, puede cambiar el tamaño del contenido para que no requiera una barra de desplazamiento, mediante javascript o mediante diseño HTML/CSS.

También puede hacer esto:

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

... que detectará cualquier movimiento en sentido vertical y volver automáticamente el desplazamiento a la parte superior/izquierda. Cabe mencionar que hacer algo como esto seguramente frustrará a sus usuarios.

Lo mejor es crear un entorno donde los elementos de IU no deseados no estén presentes en absoluto (a través del CSS, a través del diseño). El enfoque mencionado anteriormente muestra elementos innecesarios de la interfaz de usuario (barras de desplazamiento) y luego hace que no funcionen de una manera que el usuario espera (desplazarse por la página). Has "roto un contrato" con el usuario. ¿Cómo pueden confiar en que el resto de tu sitio web o aplicación hará las cosas esperadas cuando el usuario realice una acción familiar?

Answer 2

Una manera de evitar que los elementos de desplazamiento hacia abajo en jQuery:

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

Bueno, esto no impide en realidad el movimiento en sentido vertical, pero "se desplaza de vuelta" 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 según sus necesidades.

Answer 3

Un truco sucio sería superponerse 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; 
}