2012-04-13 12 views
5

Tengo un div con el conjunto position: absolute y es un poco más ancho que la ventana de mi navegador. He ocultado con éxito la barra de desplazamiento horizontal, pero aún puedo desplazarme con un trackpad Macbook.cuerpo: overflow-x - todavía puede desplazarse con el trackpad

¿Hay alguna forma de eludir esto?

<div id="container"> 
    <div id="big-image"></div> 
</div><!-- #container --> 

#container { 
    overflow-x: hidden; 
} 

#big-image { 
    background: transparent url('/path/to/image.png') no-repeat center top; 
    position: absolute; 
    width: 1307px; 
    left: 50%; 
    margin: 0 0 0 -653.5px; 
    z-index: 4; 
} 

Respuesta

7

Si no está limitando la altura de #container, simplemente configure overflow como oculto, ya que overflow-x es extraño porque elimina la barra de desplazamiento, y aún le permite desplazarse.

Ejemplo

body { 
    overflow-x: hidden; 
} 

#container { 
    overflow: hidden; 
    width: 100%; 
} 
+0

Esto funcionó, pero hay un pequeño problema cuando la ventana es lo suficientemente pequeña como para que el área _content_ haga que aparezca la barra de desplazamiento horizontal. Es decir, puedes desplazarte pero la imagen que estaba usando está cortada y es simplemente blanco donde debería ir la imagen ... Aún así, ¡gracias! Por ahora, he trabajado con JS pero ¿se puede hacer con CSS puro? –

+0

No estoy seguro de a qué se refiere por área de contenido: S ¿Quizás también haya ocultado su propiedad de desbordamiento? –

+0

Me acabo de dar cuenta de que nunca respondí su pregunta. No recuerdo en qué estaba trabajando en ese momento, pero creo que puedo explicarlo. Técnicamente, nunca me di cuenta de esto por completo y todavía tengo mi solución JS en el lugar jajaja. –

1

Probablemente se podría utilizar en el position: fixed;#big-image.

+0

usuario tiene que desplazarse _down_, y 'posición: fixed' mantendrá el div plantado en la parte superior, incluso después de desplazarse. pero gracias de cualquier manera. –

+0

Me resulta difícil ayudarte cuando no conozco tus requisitos. –

+0

¡Lo siento, pero aprecio tu intención de ayudar! :) –

Cuestiones relacionadas