Pasek przewijania zmieniający rozmiar strony

Question

Załóżmy, że mam statyczną stronę internetową i cała strona jest opakowana, powiedzmy wewnątrz o szerokości 700 pikseli, teraz jeśli zawartość strony jest zbyt długa, wtedy (oczywiście) pojawi się pasek przewijania. ALE wygląd paska przewijania przesuwa wszystko na lewo od kilku pikseli (te, które są potrzebne do dopasowania paska przewijania po prawej stronie). Chciałbym usunąć ten "ruchomy" efekt, więc jeśli pasek przewijania jest potrzebny, nie ma to żadnego wpływu na zawartość strony.

Nie wiem, czy wyraziłem się jasno.

Załóżmy, że jest to strona internetowa:

| ......... contentcontent ........ |
| ......... contentcontent ........ |
| ......... contentcontent ........ |
| ......... contentcontent ........ |
| ......... contentcontent ........ |
| ......... contentcontent ........ |
| ......... contentcontent ........ |

i tak to wygląda z paskiem przewijania:

| ..... contentcontent .......... | |
| ..... contentcontent .......... | |
| ..... contentcontent .......... | |
| ..... contentcontent .......... | |
| ...... contentcontent .......... | |
| ..... contentcontent .......... | |
| ..... contentcontent .......... | |

, ale chciałbym mieć coś takiego:

| ......... contentcontent ...... | |
| ......... contentcontent ...... | |
| ......... contentcontent ...... | |
| ......... contentcontent ...... | |
| ......... contentcontent ...... | |
| ......... contentcontent ...... | |
| ......... contentcontent ...... | |

punkty reprezentują białe znaki, treść reprezentuje zawartość strony, a kolumna po prawej stronie przedstawia pasek przewijania.

Answer 1

Możesz ustawić overflow-y: scroll jako regułę dla swojego ciała. To zawsze wyświetli pionowy pasek przewijania, który jest wyłączony, chyba że zawartość jest wystarczająco długa, aby można było przewinąć. W ten sposób zawartość nie przesunie się w lewo, gdy będzie wystarczająco długa, aby można było przewijać i nie trzeba wykonywać skryptów, aby to działało.

Answer 2

Możesz sprawdzić, czy ekran ma pasek przewijania. Jeśli prawdą jest, że możesz pominąć zawartość po prawej stronie, być może ten link pomoże: Detect if a page has a vertical scrollbar?

Answer 3

jeśli nie trzeba wcale przewijania, można użyć tego:

body { 
    overflow-y: hidden; 
} 

UPD. więc jeśli trzeba pasek przewijania, aby przewinąć zawartość, ale chcą to ukryć, można użyć following method (demo on dabblet.com):

CSS:

body { 
    overflow: hidden; 
} 

#fake_body { 
    position: absolute; 
    left: 0; 
    top: 0; 
    right: -32px; 
    bottom: 0; 
    overflow-y: scroll; 
} 

html:

<div id="fake_body"> 
    <ul> 
     <li>content content content #01</li> 
     <li>content content content #02</li> 
     <li>content content content #03</li> 
     … 
     <li>content content content #55</li> 
    </ul> 
</div> 

Answer 4

Miałem ten sam problem i tylko rozwiązanie wykorzystujące JS/jQuery było dla mnie wystarczająco dobre.

Użyłem linku do Detect if a page has a vertical scrollbar? podanego wcześniej i te linki: http://davidwalsh.name/detect-scrollbar-width, http://api.jquery.com/css/#css2, Center a position:fixed element do generowania następującego kodu.

CSS

body { 
    position: absolute; 
    left: 50%; 
    margin-left: -400px; 
    width: 800px; 
    height: 100%; 
} 

.scrollbar-measure { 
    width: 100px; 
    height: 100px; 
    overflow: scroll; 
    position: absolute; 
    top: -9999px; 
} 

JS:

$(document).ready(function() { 
    // Check if body height is higher than window height :) 
    if ($(document).height() > $(window).height()) { 

     // Create the measurement node 
     var scrollDiv = document.createElement("div"); 
     scrollDiv.className = "scrollbar-measure"; 
     document.body.appendChild(scrollDiv); 
     // Get the scroll bar width 
     var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth; 
     // Delete the DIV 
     document.body.removeChild(scrollDiv); 

     // Change margin-left parameter for #container for preventing shift caused by scroll bar 
     var current_margin_left_px = $("#container").offset().left; 
     var current_margin_left = parseInt(current_margin_left_px, 10); 
     var changed_margin_left = current_margin_left + scrollbarWidth/2 + "px"; 
     $("#container").css("margin-left", changed_margin_left); 
    } 
}); 

W przypadku elastycznego szerokość trochę więcej kodu ma być dodany.

Answer 5

overflow-x: hidden; 

w ciele Kod CSS, HELPED Alot!Cholera, zajęło mi 45 minut, aby surfować po uproszczonej odpowiedzi.

Co poszło nie tak? ... Miałem coś z grafiką z obrazkiem. Poprawnie zmieniłem rozmiar wszystkich obrazów; kiedy odświeżyłem stronę, pasek przewijania miał dużo miejsca do zabawy! ... Tak więc wprowadziłem overflow-x do każdego tagu div, (każdy znacznik div przypisany do pojedynczego elementu listy) i nic się nie stało! Rozwiązanie : Kod był poprawny, ale umieszczenie musi znajdować się w samym znaczniku treści. nie poszczególne znaczniki div. Damn ..... thankz

Answer 6

Poniższe nie jest obsługiwane w różnych przeglądarkach, jak na MDN docs, jednak myślę, że może ci się to wydać interesujące.

overflow-y: overlay; 

W przeglądarkach obsługujących nieruchomości, takie jak Google Chrome, to umieścić na górze paska przewijania zawartości zamiast przesuwania zawartości ponad kiedy potrzebny jest pasek przewijania. Możesz wtedy dodać wystarczającą ilość dopełnienia, aby Twoje treści nigdy nie były przez nią zasłonięte.

Wygląda na to, że ta właściwość nie jest popularna, a nawet przeglądarki, które ją obsługują, planują zrzucić wsparcie dla niej. Nie rozumiem, dlaczego, ponieważ na pewno ma swoje zastosowania.