JavaScript: Pozycje suwaków

0:00Teraz rzucimy okiem na to, jak możemy

0:02odczytywać pozycję suwaków. I zauważ, że zrobiłem tutaj taki element, który jest

0:06przewijalny, czyli ma więcej treści niż się mieści, więc możemy przewijać w prawo

0:10i w lewo, a także góra dół. I jeżeli przewiniemy taki suwak to

0:14chcielibyśmy odczytać ile od góry tutaj jest przewinięte

0:17i podobnie jeżeli chodzi o ten suwak.

0:19I zanim to zrobimy powiem Ci kiedy to się

0:20może okazać przydatne. Szczególnie w przypadku elementu body.

0:24Jeżeli trochę body przescrollujemy tak jak

0:26Ci wcześniej pokazałem i za pomocą getBoundingClientRect

0:30np. odczytamy górną krawędź tego elementu, wiemy ile ona jest od góry względem tej

0:35krawędzi, ale jeżeli trochę przescrollujemy to już nie wiemy ile jest względem góry

0:40całego dokumentu, a czasami może to być przydatne. Więc wtedy możemy do tej

0:43wartości dodać sobie jeszcze scrollTop, czyli ile od góry jest przescrollowane body.

0:48Na razie to trochę abstrakcyjny przykład,

0:50ale jeszcze prawdopodobnie w tym kursie z niego skorzystamy.

0:53Niemniej jednak chciałbym, żeby była taka osobna lekcja, do której będziesz mógł

0:56wrócić i zobaczyć w jaki sposób te rzeczy odczytywać.

1:00Więc w przypadku tego boxa właśnie pomarańczowego

1:02będziemy chcieli w konsoli odczytać ile jest przescrollowane od góry i robimy to za

1:06pomocą scrollTop i ile jest przescrollowane od lewej strony.

1:10Robimy to za pomocą właściwości scrollLeft.

1:13Zauważ pokazuje nam od razu 0.

1:15Natomiast jeśli bym trochę przescrollował

1:18i teraz nie odświeżając odwołał się do tego elementu,

1:22pod dolar 0 będziemy mieli do niego referencję i zrobimy to samo,

1:25scrollTop, zauważ 36 scrollLeft 84.

1:30I co ciekawe, ta właściwość nie jest

1:32właściwością tylko do odczytu, ale także możemy ją przypisywać.

1:36Więc jeżeli przypiszemy scroll top np.

1:38na 50 to treść nam się przewinie.

1:40Być może to zauważyłeś.

1:41Podobnie możemy zrobić ze scrollLeft.

1:44Czyli to są wartości, które również można ustawiać.

1:47Na koniec pokażę Ci jeszcze, że możemy sobie przewijać dokument do dowolnego momentu,

1:53tylko żeby nam to zadziałało musimy sobie zrobić body, które będzie znacznie wyższe.

1:58Może sobie tutaj liniowo to przypiszemy, czyli zrobimy tutaj height np. 2000 pikseli.

2:03Wtedy to będzie przewijalne.

2:05Możemy w konsoli odwołać się do window i podobnie oczywiście w naszym kodzie i scrollTo.

2:10Tutaj podajemy x, y, czyli ile chcemy

2:13przesunąć suwak gdyby był oczywiście horyzontalny i wertykalny, więc

2:17horyzontalny chcemy ustawić na 0, a wertykalny np. na 100.

2:21Podajemy tutaj wartości typu number, nie żadne piksele, bo wtedy musielibyśmy podać

2:25string, ale to by nie zadziałało, więc po prostu podajemy number i zauważ, że okno

2:29zostało przescrollowane właśnie do takiego momentu.

2:32Możemy również skorzystać z windows.scrollBy

2:36i znowu mamy tutaj x, y więc nie chcę ruszać suwaka poziomego,

2:41a suwak pionowy chcę przesunąć o -100 pikseli, czyli o tyle przesunąć do góry.

2:46Zauważ, że w ten sposób nam to

2:47przeskoczyło. I to jest właśnie często wykorzystywane

2:50przez biblioteki, które pozwalają płynnie przewijać,

2:52dlatego, że tam w bardzo małych odstępach czasowych jest przewijane np.

2:565 pikseli i znowu 5 pikseli do góry itd.

2:59I to tak wydaje się, że płynnie nam przewija.

3:03Jeżeli zatem kiedykolwiek będziesz potrzebował odczytać, jaka jest pozycja

3:06suwaka, czyli ile jest przescrollowane w danym elemencie, możesz to zrobić za

3:10pomocą właściwości, które Ci pokazałem, czyli scrollTop i scrollLeft.

3:14A tutaj dodam jeszcze to co przed momentem Ci pokazałem czyli scrollTo 0 i np.

3:19200 od góry i zrobimy scrollBy 0 i tutaj -100 również aby zostawić to

3:26w plikach źródłowych dla późniejszego wglądu.