html - Deshabilitar barra de desplazamiento horizontal debido a un DIV con posición: absoluto que está fuera de la página
css xhtml (7)
Tengo un elemento absolutamente posicionado que está "fuera" de la página, pero quiero que los navegadores (estoy usando Firefox 3) no muestren las barras de desplazamiento horizontales. Parece que mostrar un div que está posicionado a la izquierda (por ejemplo, tener "left: -20px") está bien, y no se muestra la barra de desplazamiento. Sin embargo, lo mismo a la derecha ("derecha: -20px") siempre muestra la barra de desplazamiento. ¿Es posible ocultar la barra de desplazamiento, pero para mantener el desplazamiento estándar posible? Quiero decir que solo quiero deshabilitar el desplazamiento debido a este elemento de posición absoluta, pero seguir desplazándome debido a otros elementos (sé que puedo deshabilitar las barras de desplazamiento por completo, eso no es lo que quiero).
<!DOCTYPE html>
<html>
<body>
<div id="el1" style="position: absolute; top: 0; background-color: yellow; left: -20px;">
element
</div>
<div id="el2" style="position: absolute; top: 0; background-color: yellow; right: -20px;">
element
</div>
<h1>Hello</h1>
<p>world</p>
</body>
</html>
Agregue esto a su CSS:
div {
overflow-x:hidden;
overflow-y:hidden;
}
Los estilos overflow-x y -y no son reconocidos por IE. Entonces, si solo te preocupa Firefox 3, funcionará bien. De lo contrario, puede usar algunos javascript:
document.documentElement.style.overflow = ''hidden''; // firefox, chrome
document.body.scroll = "no"; // ie only
De hecho, esto se puede hacer usando CSS recto sin restricciones en el ancho de la página, etc. Se puede hacer de la siguiente manera:
- Cree un div con un desbordamiento oculto que esté absolutamente posicionado en la esquina superior izquierda de la página. Haga su ancho y alto 100%
- Crea otro div que sea igual, pero sin desbordamiento oculto
- Agregue una clase para los divs que rodean el contenido de los creados, haciendo que su posición sea relativa y dándole el ancho que desee que tenga el contenido de la página principal.
- Agregue el contenido de esa clase en cada uno de los divs que ha creado.
El contenido en su primer div permanecerá alineado correctamente con el contenido de su segundo div, pero cualquiera de sus contenidos que vaya más allá del perímetro de la ventana se truncará.
Aquí hay un ejemplo de trabajo que mantiene la imagen en una posición fija en relación con el resto del contenido, sin usar ningún JavaScript:
#widthfitter {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
#contentWrapper {
width: 100%;
position: absolute;
text-align: center;
top: 0;
left: 0;
}
.content {
width: 600px;
position: relative;
text-align: left;
margin: auto;
}
<div id="widthfitter">
<div class="content">
<img src="https://i.stack.imgur.com/U5V5x.png" style="position:absolute; top: 240px; left: 360px" />
</div>
</div>
<div id="contentWrapper">
<div class="content">
Tested successfully on:
<ul>
<li>IE 8.0.6001.18702IS</li>
<li>Google Chrome 17.0.963.46 beta</li>
<li>Opera 10.10</li>
<li>Konqueror 4.7.4</li>
<li>Safari 5.1.5</li>
<li>Firefox 10.0</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi.
</p>
</div>
</div>
Lo que tienes que hacer es agregar un contenedor fuera de tus divs.
Aquí está el CSS: llamo a mi clase ''main_body_container''
.main_body_container {
min-width: 1005px; /* your desired width */
max-width: 100%;
position: relative;
overflow-x: hidden;
overflow-y: hidden;
}
Espero eso ayude :)
Actualizar
Creó una Pluma para ella, míralo here
No estoy muy seguro de si esto podría ayudar, pero puede intentar cambiar el estilo de los divs mencionados a este:
<div id="el1" style="position:fixed; left:-20px; top:0; background-color:yellow; z-index:-1">element</div>
<div id="el2" style="position:fixed; left:20px; top:0; background-color:yellow; z-index:-1">element</div>
Al establecer la posición como fija en su lugar, "bloquea" los divs especificados en su lugar mientras el resto del contenido aún se puede desplazar. Por supuesto, esto es asumiendo que es en la instancia que el resto del contenido está apilado por el índice z para estar encima de los divs definidos.
Espero que esto ayude.
Pon el siguiente estilo
html {overflow-x:hidden;}
Lo probé en IE 8, FF y Chrome.
Pude resolver este problema cambiando el atributo de posición del elemento a fijo:
posición: fija;
No más desplazamientos horizontales causados por este elemento, pero aún desplazamientos horizontales causados por otros elementos.
Sí, es posible, en su etiqueta html, escriba style="overflow-x: hidden" . Eso hará el truco ...