Jak przewijać element za pomocą JavaScript

Teraz utwórz przycisk z „na kliknięcie„Wydarzenie wywołujące funkcję„Scrollelement ():

Element przewijania

Następnie określ źródło obrazu i jego identyfikator, aby zostać przewidzianym:

Na koniec zdefiniuj funkcję o nazwie „Scrollelement ()”, Który przyniesie wymagany element za pomocą„dokument.getElementById ()„Metoda i zastosuj na niej metodę ScrolLintoview (), aby przewijać obraz:

funkcja scrollelement ()
var element = dokument.getElementById („div”);
element.scrollIntoview ();

Kod CSS

W kodzie CSS zastosuj następujące wymiary, aby dostosować rozmiar obrazu, odnosząc się do identyfikatora obrazu „div”:

#DIV
Wysokość: 800px;
szerokość: 1200px;
przepełnienie: auto;

Odpowiednie wyjście będzie:

Metoda 2: Przewiń do elementu w JavaScript za pomocą Window.Metoda scroll ()

„„okno.zwój()”Metoda przewija okno zgodnie z wartościami współrzędnych w dokumencie. Tę metodę można zaimplementować, aby pobrać identyfikator obrazu, ustawić jego współrzędne za pomocą funkcji i przewijać określony obraz.

Składnia

okno.Scroll (X-Coord, Y-Coord)

W powyższej składni „X-Coord„Odnosi się do X współrzędnych i„Koord Y”Wskazuje współrzędne Y.

Poniższy przykład wyjaśnia podaną koncepcję.

Przykład

Powtórz te same kroki, aby dodać nagłówek, utwórz przycisk, zastosuj zdarzenie OnClick i określ źródło obrazu za pomocą jego identyfikatora:

Kliknij przycisk, aby przewijać element.

Element przewijania

Następnie zdefiniuj funkcję o nazwie „Scrollelement ()". Tutaj dostosujemy współrzędne za pomocą „okno.zwój()„Metoda, uzyskując dostęp do funkcji o nazwie„Pozycja()”I zastosowanie go na pobieranym elemencie obrazu:

funkcja scrollelement ()
okno.Zwoju (0, pozycja (dokument.getElementById („div”)));

Następnie zdefiniuj funkcję o nazwie „Pozycja()„Biorąc zmienną obj jako jego argument. Zastosuj także „Occetary„Własność, która będzie dostęp do najbliższego przodka, który nie ma pozycji statycznej i zwróci ją. Następnie zwiększ zainicjowaną bieżącą najwyższą wartość za pomocą „Offsettop„Własność, która zwróci najwyższą pozycję w odniesieniu do rodzica (offsetPecent) i zwróci wartość„Obecny top„Gdy dodany warunek jest oceniany jako prawdziwy:

Pozycja funkcji (OBJ)
var currentTop = 0;
if (obj.offsetParent)
Do
currentTop += obj.Offsettop;
while ((obj = obj.offsetParent));
return [currentTop];

Wreszcie, utworzono utworzony kontener zgodnie z swoimi wymaganiami:

#DIV
Wysokość: 1000px;
szerokość: 1000px;
przepełnienie: auto;

Wyjście

Metoda 3: Przewiń do elementu w JavaScript za pomocą metody scrollto ()

„„scrollto ()”Metoda przewija określony dokument do przypisanych współrzędnych. Tę metodę można podobnie zaimplementować, aby uzyskać element za pomocą jego identyfikatora i wykonując wymaganą funkcjonalność do przewijania konkretnego obrazu na DOM.

Składnia

okno.Scrollto (x, y)

Tutaj, "X" I "y”Wskaż współrzędne x i y.

Spójrz na następujący przykład.

Przykład

Najpierw powtórz kroki omówione powyżej, aby dodać nagłówek, przycisk z zdarzeniem OnClick i obraz w następujący sposób:

Kliknij przycisk, aby przewijać element.

Element przewijania

Następnie zdefiniuj funkcję o nazwie „Scrollelement ()”I ustaw Scroll metodą ingerencyjną pozycję () w metodzie scrollto ():

funkcja scrollelement ()
okno.Scrollto (0, pozycja (dokument.getElementById („div”)));

Wreszcie, zdefiniuj funkcję o nazwie pozycja () i podobnie zastosuj powyższe omówiono kroki do ustawiania współrzędnych określonego obrazu:

Pozycja funkcji (OBJ)
var currentTop = 0;
if (obj.offsetParent)
Do
currentTop += obj.Offsettop;
while ((obj = obj.offsetParent));
return [currentTop];

Wyjście

Omówiliśmy wszystkie wygodne metody przewijania elementu za pomocą JavaScript.

Wniosek

Aby przewijać element w JavaScript, użyj „scrollIntoview ()„Metoda dostępu do elementu i zastosowania określonej funkcjonalności,„okno.zwój()„Metoda pobierania elementu, ustawienia jego współrzędnych za pomocą funkcji i przewijania obrazu lub użycia„scrollto ()„Metoda, aby pobrać element i odpowiednio przewinąć. Ten blog pokazał koncepcję przewijania elementu za pomocą JavaScript.