Jak określić wysokość poziomego paska przewijania lub szerokość pionowego w JavaScript?
javascript
scrollbar
glmxndr
źródło
źródło
Odpowiedzi:
Z bloga Alexandre Gomes nie próbowałem tego. Daj mi znać, jeśli to zadziała.
źródło
Korzystając z jQuery, możesz skrócić odpowiedź Matthew Vinesa do:
źródło
To jest tylko skrypt, który znalazłem, który działa w przeglądarkach webkit ... :)
Zminimalizowana wersja:
I musisz to wywołać, gdy dokument będzie gotowy ... tak
Testowane 2012-03-28 na Windows 7 w najnowszych wersjach FF, Chrome, IE i Safari iw 100% sprawne.
źródło: http://benalman.com/projects/jquery-misc-plugins/#scrollbarwidth
źródło
width
będzie zawsze === undefined pierwszym razem, gdy funkcja jest wywoływana. Przy kolejnych wywołaniach funkcjawidth
jest już ustawiona, to sprawdzenie po prostu zapobiega niepotrzebnemu ponownemu wykonywaniu obliczeń.width
, ale za każdym razem ponownie go obliczy. Działa, ale jest strasznie nieefektywny. Zrób światu przysługę i zamiast tego użyj poprawnej wersji wtyczki Almana.jeśli szukasz prostej operacji, po prostu wymieszaj zwykłe dom js i jquery,
zwraca rozmiar paska przewijania bieżącej strony. (jeśli jest widoczny lub zwróci 0)
źródło
źródło
Dla mnie najbardziej przydatnym sposobem był
z waniliowym JavaScriptem.
źródło
document.documentElement.clientWidth
.documentElement
jaśniej i wyraźniej wyraża zamiar uzyskania<html>
elementu.Znalazłem proste rozwiązanie, które działa w przypadku elementów wewnątrz strony, zamiast samej strony:
$('#element')[0].offsetHeight - $('#element')[0].clientHeight
Zwraca wysokość paska przewijania osi X.
źródło
Z bloga Davida Walsha :
Daje mi 17 na mojej stronie internetowej, 14 tutaj na Stackoverflow.
źródło
Jeśli masz już element z paskiem przewijania, użyj:
Jeśli nie ma paska przewijania horzints, funkcja powróci do 0
źródło
Możesz określić
window
pasek przewijania za pomocądocument
jak poniżej za pomocą jquery + javascript:źródło
Sposób
Antiscroll.js
w jego kodzie to:Kod pochodzi stąd: https://github.com/LearnBoost/antiscroll/blob/master/antiscroll.js#L447
źródło
Przetestowano w Chrome, FF, IE8, IE11.
źródło
To powinno załatwić sprawę, prawda?
źródło
Utwórz pusty
div
i upewnij się, że jest obecny na wszystkich stronach (np. Umieszczając go wheader
szablonie).Daj mu taką stylizację:
Następnie po prostu sprawdź rozmiar za
#scrollbar-helper
pomocą Javascript:Nie musisz niczego obliczać, ponieważ
div
zawsze będzie to miećwidth
andheight
ofscrollbar
.Jedynym minusem jest to, że
div
w twoich szablonach będzie pusty .. Ale z drugiej strony, twoje pliki Javascript będą czystsze, ponieważ zajmuje to tylko 1 lub 2 linie kodu.źródło
źródło
W większości przeglądarek szerokość paska przewijania wynosi 15 pikseli
źródło
Z jQuery (testowane tylko w Firefoksie):
Ale tak naprawdę bardziej podoba mi się odpowiedź @ Steve.
źródło
To świetna odpowiedź: https://stackoverflow.com/a/986977/5914609
Jednak w moim przypadku to nie zadziałało. I spędziłem godziny na poszukiwaniu rozwiązania.
Wreszcie wróciłem do powyższego kodu i dodałem! Ważne do każdego stylu. I zadziałało.
Nie mogę dodać komentarzy pod oryginalną odpowiedzią. Oto poprawka:
źródło
Ta życiowa decyzja da ci możliwość znalezienia szerokości scrollY przeglądarki (waniliowy JavaScript). Korzystając z tego przykładu, możesz uzyskać szerokość scrollY dowolnego elementu, w tym elementów, które nie powinny mieć scrollu zgodnie z twoją obecną koncepcją projektową:
źródło
Oto bardziej zwięzłe i łatwiejsze do odczytania rozwiązanie oparte na różnicy szerokości przesunięcia:
Zobacz JSFiddle .
źródło
Już zakodowane w mojej bibliotece, więc oto jest:
Powinienem wspomnieć, że
$(window).width()
zamiast niego można również użyć jQuerywindow.document.documentElement.clientWidth
.To nie działa, jeśli otworzysz narzędzia programistyczne w przeglądarce Firefox po prawej stronie, ale pokonuje to, jeśli okno deweloperów zostanie otwarte u dołu!
window.screen
jest obsługiwany przez quirksmode.org !Baw się dobrze!
źródło
Wydaje się, że działa, ale może istnieje prostsze rozwiązanie, które działa we wszystkich przeglądarkach?
źródło