Mój problem polega na tym, że pionowy pasek przewijania okna przeglądarki, który został usunięty na przykład przez overflow:hidden; spowoduje przeskoczenie strony, kiedy pojawi się ponownie. Używam jQuery usunąć opcję przewijania z gościem, podczas gdy skrypt jest uruchomiony i przewijając stronę do określonego punktu, a następnie zrobić to ponownie ponownie później:Tworzenie paska przewijania
www.nebulafilm.dk/index.html?content
mogę zrobić zastępczy pasek przewijania, gdy nie jest obecny, więc nie będzie skoku wróć?
Czy jest możliwe "wyłączenie" go i "wyszarzenie"?
Nie mogę znaleźć żadnych rozwiązań, wyszukując. Znalazłem coś podobnego tutaj: stackoverflow.com, gdzie pasek przewijania jest zawsze tam. Różnica polega na tym, że pasek przewijania musi pozostać wyłączony, nawet jeśli strona jest dłuższa niż okno. Musi być ponownie "włączony" przez inny skrypt, który kontroluję.
Czy jest to w jakikolwiek sposób możliwe?
Dzięki.
Aktualizacja:
Czas na status.
Miałem problemy z obrazem tła chmury gwiazd, który został ustawiony na tagu body.
Gdy skrypt jQuery (z odpowiedzi na wilki) dodał dopełnienie do znacznika html, a zatem powinien wypchnąć wszystkie elementy na stronie po lewej stronie, obraz tła nadal nie zachowywał się prawidłowo.
Cóż, dowiedziałem się, że element body nie reaguje jak każdy element div. To nie jest tylko "blok" wewnątrz znacznika html, jak każdy inny element blokowy. Ma własne zachowania i najwyraźniej nie można ich oszukać w ten sam sposób. Dlatego obraz tła był niemożliwy do dotknięcia, podczas gdy był on na body.
Ale zajęło mi trochę czasu, aby zrealizować ...
Koniec Rozwiązaniem tego problemu jest tak proste, że przerzucanie głupio mi było niemal ze łzami w oczach, gdy dowiedzieć się, myśląc o nieskończonych (może trochę przesadzam) godzinach badanie body.
Po prostu zapakowałem wszystko w <div id="body"> i nadałem temu obrazowi tła. Nagle wszystko ułożyło się na swoim miejscu.
Od:
<body>
...
</body>
I
body {background-image: url(...);}
Do:
<body>
<div id="body">
...
</div>
</body>
I:
#body {background-image: url(...);}
d trochę mądrzejszy o body.
Brak "skakania". Pyszne.
Efekt jest teraz w pełni uruchomiony i prawie nie zauważysz zmiany za pomocą paska przewijania i każdy detal pasuje. Skrypt Cwolve jest idealne i robi dokładną kalkulację:
function getScrollBarWidth(){
var div = $('<div><div>' + new Array(100).join('content<br />') + '</div></div>'),
div2 = div.find('div'),
body = $(document.body);
div.css({ overflow : 'hidden', width: 100, height: 100, position : 'absolute', left : -1000, top : -1000 });
body.append(div);
var width1 = div2.width();
div.css({ overflow : 'auto' });
var width2 = div2.width();
div.remove();
return width1 - width2;
}
getScrollBarWidth() będzie zawierać dokładnie szerokość paska przewijania, bez względu na przeglądarkę i można go używać do dodawania i usuwania Podkładki jak chcę:
var sWidth = getScrollBarWidth();
$("body").css({'overflow': 'hidden'});
$("html").css({'padding-right': sWidth});
$('html, body').delay(1000).animate({
scrollTop: $(hash).offset().top - 170
}, 2000, 'swing', function(){
$("body").css({'overflow': 'auto'});
$("html").css({'padding-right': 0});
});
Dziękuję bardzo. To było miłe.
Tak, to rozwiązanie, jeśli nie jest możliwa bezpośrednia manipulacja paska przewijania. Ale to zależy od przeglądarki i jest pracochłonną pracą. – Steeven
Jak jest pracochłonne? Dałem ci wersję demonstracyjną, która oblicza szerokość paska przewijania :) Rzeczywista implementacja wymaga dodania utworzonej przeze mnie funkcji i 3 wierszy kodu, które są również w wersji demonstracyjnej (wystarczy zmienić selektory). –
Cóż, musisz znaleźć dokładną szerokość paska przewijania dla każdego rodzaju przeglądarki i zaimplementować rodzaj kontroli przeglądarki. I nadal nie będzie to bezpieczne rozwiązanie. Ale jest to część drogi i możliwe rozwiązanie, więc dziękuję za odpowiedź. – Steeven