Deshabilitar barra de desplazamiento horizontal debido a un DIV con posición: absoluta que está fuera de la página

Tengo un elemento absolutamente posicionado que está "fuera" de la página, pero quiero que los navegadores (estoy usando Firefox 3) no se muestren horizontales barras de desplazamiento. 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).Deshabilitar barra de desplazamiento horizontal debido a un DIV con posición: absoluta que está fuera de la página

<!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>

Fuente

2011-05-24 Tom

No. No sin javascripts hacky. – jantimon

Si ha encontrado su respuesta, ¿podría marcarla con un cheque? – Vap0r

@ Vap0r Lo siento ... estaba en el hilo equivocado ... jaja ... tenía tantas preguntas abiertas que pensé que esto era mío! (Sí, soy un idiota! :)) – TimFoolery

Sí, es posible, en su etiqueta html, tipo style="overflow-x: hidden". Que va a hacer el truco ...

Fuente

2011-05-24 14:34:27 Vap0r

+23

Específicamente dijo que no quiere desactivar el desplazamiento, simplemente no quiere que ese elemento en particular desconecte la barra de desplazamiento. Así que, lamentablemente, eso no funciona. –

No estoy seguro de si esto podría ayudar, pero puede intentar cambiar el estilo de los divs mencionados a este lugar:

<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 que se fija en su lugar, "bloquea" los divs especificados en su lugar mientras que 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.

Fuente

2011-06-12 18:37:12 vynx

añadir esto a tu CSS:

div { 
overflow-x:hidden; 
overflow-y:hidden; 
}

El desbordamiento-x y estilos -y no son reconocidos por el 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

Fuente

2011-06-12 19:03:25

Lo que tiene que hacer es agregar un contenedor fuera de sus divs.

Aquí es el CSS: Debo llamar 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 que ayude :)

actualización

Creado Un lápiz para, verlo here

Fuente

2011-11-24 04:12:22 edwardmagbago

una solución tan simple. THX! –

esta es la respuesta correcta, buen hombre de trabajo – axelhzf

Esto, de hecho, se puede hacer utilizando CSS recto sin tener ninguna restricción en el ancho de página, etc. Se puede hacer por:

Cree un div con un desbordamiento oculto que se encuentra absolutamente en la esquina superior izquierda de la página. Haga su ancho y alto 100%
Cree otro div que sea el mismo, pero sin desbordamiento oculto
Agregue una clase para divs que envuelva el contenido de los creados, haciendo que su posición sea relativa y dándole el ancho que desee quiere que el contenido de la página principal tenga
Agregue contenido de esa clase en cada uno de los divs que ha creado.

El contenido en su primer div se mantendrá alineado 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 que guarda la imagen en una posición fija con respecto al resto del contenido, sin necesidad de utilizar 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>

Fuente

2012-04-19 15:54:14

Buen trabajo, esto funciona –

Esto de hecho está funcionando precioso, gracias por la solución. – klaar

yo era capaz de resolver este problema cambiar el atributo de posición del elemento a fijo:

posición: fijo;

No más desplazamientos horizontales causados por este elemento, pero aún desplazamientos horizontales causados por otros elementos.

Fuente

2015-04-22 10:53:23

ponga el siguiente estilo

html {overflow-x:hidden;}

he comprobado en IE 8, FF y Chrome.

Fuente

2015-09-11 09:56:32 sudip

Deshabilitar barra de desplazamiento horizontal debido a un DIV con posición: absoluta que está fuera de la página

Respuesta

Cuestiones relacionadas