Czasami chcemy automatycznie przewijać do dołu strony za pomocą JavaScript.

W tym artykule przyjrzymy się, jak automatycznie przewijać do dołu strony za pomocą JavaScript.

Metoda window.scrollTo

Możemy użyć tej window.scrollTometody do przewinięcia na dół strony.

Na przykład możemy napisać następujący kod HTML:

<div>
</div>

const div = document.querySelector('div')
for (let i = 0; i < 100; i++) {
  const p = document.createElement('p')
  p.textContent = 'hello'
  div.appendChild(p)
}
window.scrollTo(0, document.body.scrollHeight);

Następnie tworzymy kilka elementów p za pomocą createElementi dołączamy je do elementu div za pomocą appendChild.

Następnie wywołujemy window.scrollTowspółrzędne x i y, do których odpowiednio się przewijamy.

document.body.scrollHeight to wysokość elementu body, więc przewijamy na dół.

Jeśli nasz kontener przewijania nie jest elementem body, możemy również pobrać go scrollHeightz dowolnego elementu.

Na przykład możemy napisać:

const div = document.querySelector('div')

for (let i = 0; i < 100; i++) {
  const p = document.createElement('p')
  p.textContent = 'hello'
  div.appendChild(p)
}
window.scrollTo(0, div.scrollHeight);

I otrzymujemy ten sam efekt przewijania, co poprzednio.

Metoda scrollIntoView

Możemy użyć tej scrollIntoViewmetody, aby przewinąć ekran do elementu, na którym jest wywołana.

Na przykład możemy napisać:

const div = document.querySelector('div')
for (let i = 0; i < 100; i++) {
  const p = document.createElement('p')
  p.textContent = 'hello'
  p.id = `el-${i}`
  div.appendChild(p)
}
document.querySelector('#el-99')
  .scrollIntoView(false);

Argument wskazuje, czy chcemy przewinąć do góry elementu, czy nie.

Ponieważ jest to false, nie przewijamy do góry elementu.

Możemy również zmienić zachowanie przewijania, pisząc:

const div = document.querySelector('div')
for (let i = 0; i < 100; i++) {
  const p = document.createElement('p')
  p.textContent = 'hello'
  p.id = `el-${i}`
  div.appendChild(p)
}
document.querySelector('#el-99')
  .scrollIntoView({
    behavior: 'smooth'
  });

W rezultacie otrzymujemy płynne przewijanie.

Wniosek

Możemy użyć JavaScript, aby automatycznie przewinąć do dołu strony.

Możemy przewinąć bezpośrednio do dołu kontenera przewijania lub możemy przewinąć do elementu na dole strony.

Więcej treści na plainenglish.io