DESACTIVAR el desplazamiento horizontal [cerrado]

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

He buscado por los resultados, sino que acaba de hacer la barra de desplazamiento HIDDEN

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

Lo intenté: overflow-x:hiddenen CSS en mi htmletiqueta, pero solo ocultó la barra de desplazamiento y no desactivó el desplazamiento.

¡Por favor, ayúdame!

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

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

Esto es cuando se cargan las primeras páginas:

Y esto es después de desplazarme hacia la derecha:

Intenta agregar esto a tu CSS

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

este es el hijo 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%;
}

Entonces, para solucionar 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é los intentos de desplazamiento horizontal de 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í.

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

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

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 divdemax-width:100%

¡Espero que esto ayude!

Me solucionó el problema:]

Pruebe este para deshabilitar el desplazamiento de ancho solo para el cuerpo, todo el documento solo es cuerpo body{overflow-x: hidden;}

koala_dev respondió que esto funcionará:

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

Y MarkWPiper comenta que ": - / Causó desplazamiento táctil / impulso para dejar de funcionar en iPhone"

La solución para mantener el contacto / impulso en iPhone es agregar esta línea dentro del bloque css para html, body:

    height:auto!important;

La respuesta de Koala_dev funcionará, pero en caso de que se pregunte, esta es la razón por la que funciona:

.
q.html, body {              <--applying this css block to everything in the
                             html code.

q.max-width: 100%;          <--all items created must not exceed 100% of the 
                             users screen size. (no items can be off the page 
                             requiring scroll)

q.overflow-x: hidden;       <--anything that occurs off the X axis of the 
                             page is hidden, so that you wont see it going 
                             off the page.     

.

Si desea desactivar el desplazamiento horizontal en todo el ancho de la pantalla, use este código.

element {
  max-width: 100vw;
  overflow-x: hidden;
}

Esto funciona mejor que "100%" porque ignora el ancho principal y en su lugar usa la ventana gráfica.

Puede probar todo este método en nuestra página html.

1er camino

body { overflow-x:hidden; }

2da forma Puede usar lo siguiente en su etiqueta de cuerpo CSS:

overflow-y: scroll; overflow-x: hidden;

Eso eliminará tu barra de desplazamiento.

3er camino

body { min-width: 1167px; }

5ta forma

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

6ta forma

element { max-width: 100vw; overflow-x: hidden; }

4ta forma ..

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

Ahora estoy buscando más .. !!!!

Solo tuve que lidiar con eso yo mismo. Después de todo, encontré este método más fácil y útil. Solo agrega

overflow-x: hidden;

A tu padre externo. En mi caso se ve así:

<body style="overflow-x: hidden;">

Tienes que usar overflow-xporque si usas simplemente usas, overflowtambién deshabilitas el desplazamiento vertical, es deciroverflow-y

Si el desplazamiento vertical aún está deshabilitado, puede habilitarlo explícitamente con:

overflow-y: scroll;

Sé que de alguna manera no es una forma adecuada porque si todo se configurara bien, uno no tendría que usar este método rápido y sucio.

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

Aplica el estilo anterior o puede crear una función en javaScript para resolver ese problema

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 recomiendo hacer esto porque limita la funcionalidad para usuarios con pantallas pequeñas.