Rumah > hujung hadapan web > tutorial js > Bagaimana untuk Tatal ke Elemen Menggunakan JavaScript?

Bagaimana untuk Tatal ke Elemen Menggunakan JavaScript?

Susan Sarandon
Lepaskan: 2024-10-21 19:17:03
asal
573 orang telah melayarinya

How to Scroll to an Element Using JavaScript?

Bagaimanakah cara saya menatal ke elemen menggunakan JavaScript?

Anda boleh menggunakan kaedah scrollIntoView() untuk menatal ke elemen tertentu pada halaman web. Kaedah ini disokong oleh semua penyemak imbas utama.

Untuk menggunakan kaedah scrollIntoView(), cuma hantar elemen yang anda mahu tatal sebagai hujah kepada kaedah tersebut. Sebagai contoh, kod berikut menatal ke elemen dengan ID "divFirst":

document.getElementById("divFirst").scrollIntoView();
Salin selepas log masuk

Kaedah scrollIntoView() boleh mengambil argumen kedua pilihan yang menentukan cara elemen itu harus ditatal ke paparan. Nilai berikut diterima:

  • "auto": Elemen akan ditatal ke paparan sebanyak mungkin tanpa menatal halaman dari kedudukan semasanya.
  • "licin": Elemen akan ditatal ke paparan dengan lancar, dengan kesan animasi.
  • "jika diperlukan": Elemen hanya akan ditatal ke paparan jika ia belum kelihatan.

Sebagai contoh, kod berikut menatal ke elemen dengan ID "divFirst" dengan lancar:

document.getElementById("divFirst").scrollIntoView({behavior: "smooth"});
Salin selepas log masuk

Anda juga boleh menggunakan kaedah scrollIntoView() untuk menatal ke ofset tertentu dalam elemen. Untuk melakukan ini, hantar objek dengan sifat berikut sebagai hujah kedua kepada kaedah:

  • "block": Offset dari bahagian atas elemen, dalam piksel.
  • "inline": Offset dari kiri elemen, dalam piksel.

Contohnya, kod berikut menatal ke elemen dengan ID "divFirst" dan mengimbanginya sebanyak 100 piksel dari atas dan 50 piksel dari kiri:

document.getElementById("divFirst").scrollIntoView({block: 100, inline: 50});
Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk Tatal ke Elemen Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan