html - quitar - DESACTIVAR el desplazamiento horizontal

quitar scroll horizontal html

Question

Ok, por alguna razón, mi página web se desplaza de izquierda a derecha y muestra un montón de espacio feo.

He buscado resultados pero simplemente hicieron que la barra de desplazamiento OCULTÓ

Eso es lo que quiero, quiero DESHABILITAR físicamente la función de desplazamiento horizontal. ¡No quiero que el usuario pueda desplazarse de izquierda a derecha en mi página solo arriba y abajo!

Lo he intentado: overflow-x:hidden en css en mi etiqueta html pero solo ha ocultado la barra de desplazamiento y no ha desactivado el scroll.

¡Por favor, ayúdame!

Aquí hay un enlace a la página: http://www.green-panda.com/usd309bands/ (Enlace roto)

Esto podría darte una mejor idea de lo que estoy hablando:

Aquí es cuando se carga la primera página:

Y esto es después de que me desplazo hacia la derecha:

Answer 1

Entonces, para arreglar esto correctamente, hice lo que otros hicieron aquí y usé css para ocultar la barra de herramientas horizontal:

.name {
  max-width: 100%;
  overflow-x: hidden;
}

Luego, en js, creé un detector de eventos para buscar el desplazamiento y contrarresté el desplazamiento horizontal realizado por los usuarios.

var scrollEventHandler = function()
{
  window.scroll(0, window.pageYOffset)
}

window.addEventListener("scroll", scrollEventHandler, false);

Vi a alguien hacer algo similar, pero aparentemente eso no funcionó. Sin embargo, esto funciona perfectamente bien para mí.

Answer 2

Prueba agregar esto a tu CSS

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

Answer 3

Pruebe esto para deshabilitar el desplazamiento en ancho solo para el cuerpo. El documento completo es body body{overflow-x: hidden;}

Answer 4

Puede anular el evento de desplazamiento del cuerpo con JavaScript y restablecer el desplazamiento horizontal a 0.

function bindEvent(e, eventName, callback) {
    if(e.addEventListener) // new browsers
        e.addEventListener(eventName, callback, false);
    else if(e.attachEvent) // IE
        e.attachEvent(''on''+ eventName, callback);
};

bindEvent(document.body, ''scroll'', function(e) {
    document.body.scrollLeft = 0;
});

No aconsejo hacer esto porque limita la funcionalidad para usuarios con pantallas pequeñas.

Answer 5

Sé que es demasiado tarde , pero hay un enfoque en javascript que puede ayudarte a detectar que el elemento html de witch está causando el desbordamiento horizontal -> aparece la barra de desplazamiento

Aquí hay un enlace a la publicación sobre CSS Tricks

var docWidth = document.documentElement.offsetWidth;
[].forEach.call(
  document.querySelectorAll(''*''),
  function(el) {
    if (el.offsetWidth > docWidth) {
      console.log(el);
    }
  }
);

Podría devolver algo como esto:

<div class="div-with-extra-width">...</div>

entonces simplemente eliminas el ancho extra del div o configuras su max-width:100%

¡Espero que esto ayude!

Me arregló el problema:]

Answer 6

este es el niño desagradable de tu código :)

.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
width: 1170px;
}

reemplazarlo con

.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
width: 100%;
}

Answer 7

koala_dev respondió que esto funcionará:

html, body {
   max-width: 100%;
   overflow-x: hidden;
}

Y MarkWPiper comenta que ": - / Se produjo un desplazamiento táctil / de impulso para dejar de funcionar en el iPhone".

La solución para mantener el toque / momento en iPhone es agregar esta línea:

    height:auto!important;