¿Es posible evitar solo el desplazamiento horizontal cuando overflow-x está oculto?

Tengo una página web que tiene contenido que se extiende más allá del borde derecho de la ventana del navegador. Configuré overflow-x: hidden en <body> para desactivar la barra de desplazamiento inferior, pero aún puedo desplazarme horizontalmente con el panel táctil, que no es lo que quiero.¿Es posible evitar solo el desplazamiento horizontal cuando overflow-x está oculto?

¿Hay alguna manera de evitar que el navegador se desplace horizontalmente?

Como nota al margen: Safari 4.0.4 solo se desplaza horizontalmente a veces, y el desplazamiento se siente "pegajoso" y "nervioso", mientras que Firefox siempre se desplaza suavemente horizontalmente.

Fuente

2010-04-15 Andrew LeClair

usted podría tratar de establecer en el CSS:

html{ 
    overflow-x: hidden; 
}

lugar de uso del selector body. Lo intenté y funciona en Firefox.

Fuente

2010-04-15 20:12:17

También probé esto en FF, y parece tener exactamente el mismo problema. La mejor solución sería, como señaló @Chaulky, simplemente configurar la pantalla a "ninguno". Si quieres que aparezca esto, haz algo de js/jquery para moverlo de nuevo. – Automatico

Si todo lo demás falla, puede usar Javascript para forzar constantemente al navegador a desplazarse hacia la izquierda usando window.scrollTo (xpos, ypos). Para xpos, querrás usar 0 e ypos para obtener la posición de desplazamiento actual del usuario, suponiendo que deseas permitir el desplazamiento vertical.

Puede poner su llamada de función en el controlador de eventos window.onscroll, o en un intervalo de javascript que se ejecuta cada 100 ms o menos. Depende de usted. Si necesita ejemplos de código solo pregunte.

Fuente

2010-04-16 17:13:50 InvisibleBacon

Para evitar el desplazamiento, se podría usar una combinación de 'overflow: hidden',' window.onscroll', y 'window.scrollTo' para ocultar las barras de desplazamiento, y dirigir al usuario a 0,0 (la parte superior izquierda de la pantalla) en desplazamiento, manteniendo efectivamente la página web en su posición actual (o ypos como la posición de desplazamiento actual del usuario para retener el desplazamiento vertical como se sugirió @InvisibleBacon) – Seagrass

Esto sería mejor entender si tuviera un ejemplo.

¿es esta una URL larga o algo sin espacios en blanco? ¿Tiene white-space:nowrap; establecido en el elemento?

Si usted tiene un recipiente con un tamaño definido (uno que se ajuste en la vista), el texto debe adherirse correctamente, (a menos que sea una larga línea sin espacios)

Fuente

2010-04-17 05:17:49

creo que la verdadera pregunta es, ¿por qué ¿Tiene su contenido desbordando del tamaño previsto de la página? ¿Este contenido no quieres que los usuarios realmente vean? En ese caso, colóquelo en un div en alguna parte y configúrelo para ninguno. Eso evitaría por completo el problema del desbordamiento.

Si hay una razón legítima por la que desea que se desborde el contenedor, establezca explícitamente el tamaño del contenedor y luego el overflow-x en hidden. No lo he probado, pero eso debería evitar el comportamiento actual. Si no, intente usar un div, en lugar de la etiqueta corporal. Los navegadores pueden estar actuando de forma extraña porque está trabajando en la etiqueta del cuerpo en sí.

Fuente

2010-04-17 16:09:44 Chaulky

Ingresé a Chrome y abrí las herramientas de desarrollador en un escritorio. Elimine la propiedad overflow-x. Luego proceda a eliminar cada elemento principal en su página. Cuando ve que la barra de desplazamiento horizontal desaparece, sabe que ha encontrado su problema. Entonces sumérgete en ese elemento. Mi apuesta es que tienes un ancho del 100% y un margen puesto sobre él. Elimine el margen si ese es el caso.

Fuente

2013-05-10 16:16:56

Discusión antigua, pero podría ser útil para las personas que buscan la respuesta correcta.

Establezca "overflow: hidden" en el div principal del elemento que es más ancho que la ventana del navegador (no html o body como lo haría normalmente), que detendrá el desplazamiento con de pad o las flechas.

Fuente

2013-06-01 23:26:04 Clauce

¿Es posible evitar solo el desplazamiento horizontal cuando overflow-x está oculto?

Respuesta

Cuestiones relacionadas