2012-04-13 24 views
5

Mam zestaw div z zestawem position: absolute i jest odrobinę szerszy niż okno przeglądarki. Udało mi się ukryć poziomy pasek przewijania, ale nadal mogę przewijać za pomocą gładzika Macbook.body: overflow-x - nadal można przewijać za pomocą gładzika

Czy istnieje sposób na obejście tego?

<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; 
} 

Odpowiedz

7

Jeśli nie ograniczasz wysokości #container, po prostu ustaw przepełnienie na ukryte, ponieważ przekroczenie-x jest dziwne, ponieważ usuwa pasek przewijania, ale nadal pozwala przewijać.

Przykład

body { 
    overflow-x: hidden; 
} 

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

To działało, ale pojawia się niewielki problem, gdy okno jest wystarczająco małe, aby obszar_content_ powodował pojawianie się poziomego paska przewijania. Oznacza to, że można przewijać, ale obraz, którego używam, jest odcięty i jest biały, gdzie obraz powinien się pojawić. Mimo to, dziękuję! Na razie pracowałem nad tym z JS, ale czy można to zrobić z czystym CSS? –

+0

Nie jestem pewien, co masz na myśli w obszarze zawartości: S Być może ustawisz również właściwość przepełnienia na ukrytą? –

+0

Właśnie zdałem sobie sprawę, że nigdy nie odpowiedziałem na twoje pytanie. Nie pamiętam, nad czym pracowałem, ale wydaje mi się, że potrafię to wyjaśnić. Technicznie nigdy nie doszedłem do tego całkowicie i wciąż mam moje obejście JS w miejscu lol. –

1

Można chyba użyć position: fixed; na #big-image.

+0

Użytkownik musi jeszcze przejść _down_ i 'pozycji: fixed' zachowa div posadzone na szczycie nawet po przewinięciu. ale i tak dzięki. –

+0

Trudno ci pomóc, gdy nie znam Twoich wymagań. –

+0

Przepraszam, doceniam twoją chęć pomocy! :) –