html - sirve - overflow-x: oculto aún puede desplazarse
overflow-x not working (10)
¿Qué hay de establecer el ancho en el cuerpo del contenido y deformar el #container alrededor de #menu_bar y #content_body ?
body
div#container
div#menu_bar (absolute positioned)
div#links
div#full_bar
div#content_body (relative positioned + padding [#menu_bar height])
...
El problema es:
Tengo un menú de barra de ancho completo, que se crea creando un gran margen a la derecha y a la izquierda. Este margen debe ser recortado por overflow-x: hidden , y es ... sin barras de desplazamiento, todo (visualmente) está bien ...
Pero, si arrastra la página (usando Mac Lion) o se desplaza hacia la derecha, la página muestra una barra enorme, que debería haber sido recortada por overflow-x:hidden .
CSS
html {
margin:0;
padding:0;
overflow-x:hidden;
}
body {
margin: 0 auto;
width: 950px;
}
.full, .f_right {
margin-right: -3000px !important;
padding-right: 3000px !important;
}
.full, .f_left {
margin-left: -3000px !important;
padding-left: 3000px !important;
}
Aquí hay un enlace: http://jsfiddle.net/NicosKaralis/PcLed/1/
Tienes que abrir en borrador para ver ... el jsfiddle css de alguna manera lo hace funcionar.
@Krazer
tengo y estructura así:
body
div#container
div#menu_bar
div#links
div#full_bar
div#content_body
...
el #container es un div centrado y tiene un ancho fijo de 950px, el #full_bar es una barra que se extiende en toda la ventana, de un lado al otro
si pongo el ancho al 100% en #full_bar, obtendrá solo el ancho interior y no el ancho de la ventana
Considere usar max-width para html.
manténganme informado si no funciona.
De la demostración de Weaver''s Offcanvas http://jasonweaver.name/lab/offcanvas/
Ajustar el contenido con:
width: 100%;
overflow: hidden;
Esto limita solo el ancho y ha funcionado en ocasiones similares, también ha impedido el desplazamiento durante el arrastre.
El desbordamiento en las etiquetas <body> y <html> funcionó para mí.
Encontré la solución aquí https://.com/a/9399429/622041
Tendrás que poner una #wrapper alrededor de tu contenido. overflow:hidden en el body no funcionará.
#wrapper {position: absolute; width: 100%; overflow-x: hidden}
Y aquí el HTML:
<html>
<head>
<title></title>
</head>
<body>
<div id="wrapper">
<div class="yourContent"> ... </div>
</div>
</body>
</html>
Hay otra forma de solucionar este problema con una línea de código:
body {
/* All your regular code including overflow-x: hidden; */
position:relative;
}
Esto solucionó mis problemas en webkit (Mac)
Referencia: http://www.tonylea.com/2010/safari-overflow-hidden-problem/
No creo que haya ninguna forma de evitar el desplazamiento de un elemento sin usar JavaScript. Con JS, sin embargo, es bastante fácil configurar scrollLeft en 0 onscroll.
Pruebe el elemento html de posición fija, pero esto deshabilita el desplazamiento en ambas direcciones.
html {
position: fixed;
}
Tenía exactamente el mismo problema. Lo resolví poniendo overflow-x: hidden; en el body y html .
html {
margin: 0 auto;
padding: 0;
overflow-x: hidden;
}
body {
margin: 0 auto;
overflow-x: hidden;
width: 950px;
}
.full {
background: red;
color: white;
}
.full,
.f_right {
margin-right: -3000px !important;
padding-right: 3000px !important;
}
.full,
.f_left {
margin-left: -3000px !important;
padding-left: 3000px !important;
}
<div>
<div class="full">
abc
</div>
</div>
html, body { overflow-x: hidden; width: 100%; }
Resolvió el problema para mí, excepto IE - aún puedes arrastrar el sitio a la derecha si haces un esfuerzo para hacerlo.
Usando overflow: hidden; elimina la barra de desplazamiento vertical, por lo que esta no es una solución.
No pude encontrar una mejor solución usando JavaScript.