Jak zaimplementować Auto Scroll w JavaScript
Ten blog wyjaśni metody wdrażania automatycznego przewijania w JavaScript.
Jak zaimplementować Auto Scroll w JavaScript?
Aby zaimplementować Auto Scroll w JavaScript, można zastosować następujące metody:
- "okno.scrollto ()" Metoda
- "okno.scrollby ()" Metoda
- Za pomocą "JQuery"
Następujące podejścia pokażą określoną koncepcję jeden po drugim!
Metoda 1: Zaimplementuj Auto Scroll w JavaScript za pomocą Window.Metoda scrollto ()
„„scrollto ()„Metoda przewija model obiektu dokumentu (DOM) zgodnie z określonymi wartościami współrzędnych. Tę metodę można zaimplementować w celu automatycznego przewijania dowolnego elementu HTML zgodnie z podanymi wartościami współrzędnych.
Składnia
okno.Scrollto (x, y)W podanej składni X i Y odnoszą się do „X" I "Y”Odpowiednio współrzędne.
Sprawdźmy pod względem podanego przykładu, aby zrozumieć określoną koncepcję.
Przykład
W tym przykładzie utworzymy przycisk z „na kliknięcie„Wydarzenie wywołujące funkcję autoScroll ():
Teraz uwzględnij nagłówek w „ Poniższe obrazy zostaną przewidziane automatycznie Następnie dodamy dwa obrazy za pomocą ich ścieżek i ustawym ich wymiary za pomocą właściwości wysokości i szerokości: Na koniec zdefiniuj funkcję o nazwie „Auto Scroll()". W definicji funkcji zastosuj „okno.scrollto ()”Metoda i ustaw współrzędne zgodnie z Twoimi wymaganiami. W naszym przypadku ustawiliśmy „0„Jak X koordynuje i„200„Jak współrzędne Y: Odpowiednie wyjście będzie: W powyższym wyjściu można zaobserwować, że pasek przewijania jest przewijany do określonej lokalizacji zgodnie z wartościami ustalonymi w metodzie scrollto (). Metoda 2: Zaimplementuj Auto Scroll w JavaScript za pomocą Window.Metoda scrollby () „„scrollby ()”Metoda przewija dokument zgodnie z podaną liczbą pikseli w argumencie. Mówiąc dokładniej, wykorzystamy tę metodę do automatycznego przewijania DOM do dołu po kliknięciu przycisku. Składnia W powyższej składni „X" I "y”Odnosi się do wartości pikseli poziomych i pikseli wykorzystywanych do przewijania. Przykład Po pierwsze, utwórz przycisk z „na kliknięcie„Przekierowanie zdarzeń do funkcji„Auto Scroll()”: Następnie uwzględnij następujące nagłówek, jak omówiono w poprzedniej metodzie: Poniższe obrazy zostaną przewidziane automatycznie Podobnie użyj „src”Atrybut, aby dodać ścieżkę obrazów i ustawić ich wymiary: Teraz dołączymy dwa akapity w „ Określone obrazy reprezentują różne scenario Literały szablonów używają znaków backtick (') i są używane głównie do interpolacji ciągów. Tę technikę można wykorzystać do wyświetlania określonej wartości ciągów w stosunku do odpowiedniego szablonu literału używanego do niej. Zostanie umieszczony w oryginalnej definicji funkcji wraz z wartością funkcji wywołania zwrotnego. Na koniec zdefiniuj funkcję o nazwie „Auto Scroll()". Tutaj zastosuj „okno.scrollby ()”Metoda i ustaw liczbę pikseli, aby automatycznie przewija się do wymaganej lokalizacji DOM: W naszym przypadku Auto Scroll przewija w dół do dolnej części strony: W powyższym wyjściu można zauważyć, że DOM jest automatycznie przewijany, aż do dołu przy przycisku kliknij. Metoda 3: Wdrożenie automatycznego przewijania w JavaScript za pomocą JQuery Technikę tę można zaimplementować, aby automatycznie przewijać określony obraz, włączając „JQuery„Biblioteka i jej metody, takie jak ScrollTop () i Height (). Mówiąc dokładniej, użyjemy metody ScrollTop () do ustawienia pionowej pozycji Scroll paska dla wybranych elementów. Składnia Tutaj "selektor”Wskazuje„dokument”W poniższym omówionym przykładzie. Poniższy przykład ilustruje podaną koncepcję. Przykład Najpierw określ źródło „JQuery„Biblioteka w znaczniku skryptu:
okno.Scrollto (0, 200);
okno.Scrollby (0, 500);