DESACTIVAR el Desplazamiento horizontal
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 acaban de ocultar la barra de desplazamiento
Eso es ahora lo que quiero, quiero físicamente DESACTIVAR la función de desplazamiento horizontal. Yo no quiero que el usuario pueda desplazarse de izquierda a derecha en mi página de arriba y abajo!
He intentado: overflow-x:hidden en css en mi etiqueta html pero solo hizo que la barra de desplazamiento se ocultara y no deshabilitó desplazar.
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:
Esto es cuando se cargan las primeras páginas:
Y esto es después de que me desplazo a la derecha:
11 answers
Intenta agregar esto a tu CSS
html, body {
max-width: 100%;
overflow-x: hidden;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-07-19 22:53:45
Este es el hijo desagradable de su código:)
.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
width: 1170px;
}
Sustitúyalo por
.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
width: 100%;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-07-19 22:55:44
Así que para arreglar esto correctamente, hice lo que otros aquí hicieron 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í.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-08-29 23:54:40
Pruebe este para desactivar el desplazamiento de ancho solo para el cuerpo
todo el documento solo es cuerpo
body{overflow-x: hidden;}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-07-16 03:48:55
Sé que es demasiado tarde , pero hay un enfoque en javascript que puede ayudarlo a detectar que el elemento html está causando que aparezca el desbordamiento horizontal -> barra de desplazamiento
Aquí hay un enlace al post 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>
Luego simplemente elimina el ancho extra de div o establece que es max-width:100%
Espero que esto ayude!
Solucionó el problema para mí:]
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-10-17 00:28:58
Koala_dev respondió que esto funcionará:
html, body {
max-width: 100%;
overflow-x: hidden;
}
Y MarkWPiper comenta que": - / Causó que el desplazamiento táctil / momentum dejara de funcionar en el iPhone "
La solución para mantener el toque / impulso en el iPhone es agregar esta línea:
height:auto!important;
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-01-18 22:14:15
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 los usuarios con pantallas pequeñas.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-07-19 22:51:39
La respuesta de Koala_dev funcionará, pero en caso de que te estés preguntando 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.
.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-06-19 21:04:27
Tuve que lidiar con eso yo mismo. Después de todo, encontré este método más fácil y útil. Sólo añadir
overflow-x: hidden;
A tu padre externo. En mi caso se ve así:
<body style="overflow-x: hidden;">
Tiene que usar overflow-x porque si usa simplemente use overflow también deshabilita el desplazamiento vertical, a saber, overflow-y
Si el desplazamiento vertical sigue desactivado, puede activarlo explícitamente con:
overflow-y: scroll;
Sé que de alguna manera no es una manera adecuada porque si todo estaba bien configurado uno lo haría no tienes que usar este método rápido y sucio.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-07-08 00:17:42
Si desea desactivar el desplazamiento horizontal sobre todo el ancho de la pantalla, utilice este código.
element {
max-width: 100vw;
overflow-x: hidden;
}Esto funciona mejor que "100%" porque ignora el ancho padre y en su lugar usa la ventana.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-07-24 09:47:27
.name
{
max-width: 100%;
overflow-x: hidden;
}
Aplica el estilo anterior o puede crear una función en JavaScript para resolver ese problema
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-08-07 19:45:23