2012-03-10 9 views
9

Może to łatwa naprawa, ale przez długi czas doprowadzało mnie to do szału, więc w końcu zdecydowałem się sprawdzić, czy istnieje rozwiązanie.Jak skompensować pionowy pasek przewijania, gdy jeszcze go nie ma?

Po prostu umieszczam większość moich stron internetowych w szerokim widoku portów.

Przykład, port widoku może mieć 1028 pikseli i chcę, aby szerokość mojej strony wynosiła tylko 960 pikseli.

Więc mój css wygląda następująco:

#pageWrapper { /* page width is 960 pixels */ 
    margin:0 auto; 
    width:960px; 
} 

Nie ma problemu z tym.

Problem pojawia się, gdy rozpoczynam dynamiczną stronę, która jest krótsza niż wysokość, a następnie moja strona rozwija się (za pośrednictwem jQuery slideOut itp.) Poniżej dolnej części ekranu i powoduje pojawienie się pionowego paska przewijania.

Kończy się to migotaniem strony podczas slajdu, a następnie migoce w prawo podczas slajdu.

Czy jest jakaś droga przez css, aby wymusić prawy margines 20px i nadal korzystać z margin:0 auto;?

Dzięki.

+0

Możesz spróbować użyć 'overflow-y: scroll' na swoim elemencie' html' lub 'body', ale nie jestem pewien, czy to zadziała. W tym samym czasie powinieneś być w stanie zrobić to za pomocą 3 linii javascript/jquery, a następnie dołączyć tę funkcję do zdarzenia 'onresize'. –

+0

Innym sposobem jest po prostu wymuszenie istnienia paska przewijania. Istnieje opcja css, która to robi, ale nie pamiętam, co to jest. –

+0

@ErickPetru Nie, to nie to. –

Odpowiedz

7

Gdy zawartość strony nie pasuje już pionowo, przeglądarka dodaje pasek przewijania po prawej stronie okna. Zmienia to dostępną szerokość w oknie przeglądarki, więc każda treść, która jest wyśrodkowana lub umieszczona względem prawej strony okna, przesunie się nieco w lewo. Jest to bardzo częste.

Istnieje wiele sposobów, aby to kontrolować, ale najczęściej jest tak, abyś zawsze miał pasek przewijania lub nigdy nie miał paska przewijania kontrolując właściwość overflow-y w oknie.

Ustawienie overflow-y: scroll spowoduje wymuszenie wyświetlania pasków przewijania.

Ustawienie overflow-y: hidden spowoduje wymuszenie tego, aby nigdy nie było pasków przewijania.

+0

Ok, dzięki @jacktheripper. –

1

UWAGA: uniemożliwia użytkownikowi przewijanie w dół w dowolny sposób, skutecznie uniemożliwiając dostęp do zawartości poniżej dolnej rzutni.

Powiązane problemy