Saya tidak tahu apakah Anda telah menemukan persyaratan seperti itu: tambahkan elemen anak baru ke elemen dom , dan kemudian mensyaratkan bahwa jika elemen baru yang baru ditambahkan melebihi ruang lingkup wadah, kita perlu secara otomatis menggulir ke posisi elemen anak yang baru ditambahkan, seperti yang ditunjukkan pada gambar berikut:
Kemudian, saat mempelajari beberapa poin pengetahuan yang terkait dengan pengguliran elemen dom , kita dapat menyadari efek dari gambar di atas dan beberapa fungsi terkait gulir lainnya.
Properti dan metode DOM yang perlu dipahami Scrolltop, ClientHeight dan ScrollHeight
Atribut scrollTop adalah perbedaan antara nilai atas konten elemen kontainer dan nilai top dari nilai atas di viewport viewport teratas, yaitu, bagian dari wadah yang meluncur ke atas di luar viewport kontainer. Status pengguliran dapat dikontrol dengan memodifikasi properti ini.
clientHeight adalah atribut dom yang menggambarkan ketinggian wadah.
scrollHeight adalah atribut dom yang menjelaskan ketinggian konten wadah.
Hubungan antara ketiga atribut ditunjukkan pada gambar di bawah ini:
getBoundingClientRect ()
Metode ini digunakan untuk mendapatkan beberapa sifat geometris yang diperlukan untuk tata letak elemen, seperti left , right , top , bottom , height , width , dll.
Srollby (x, y)
Metode scrollTo dari wadah dom dapat digunakan untuk secara langsung mengontrol jarak yang ditentukan dari pengguliran scrollbar. Metode ini lebih nyaman ketika Anda perlu menggulir ke elemen yang ditentukan.
srollto (x, y)
Metode scrollTo dari wadah dom dapat digunakan untuk secara langsung mengontrol scrollbar untuk menggulir ke posisi yang ditentukan. Metode ini lebih nyaman saat mengendalikan bilah gulir untuk menggulir ke atas atau bawah.
Menerapkan persiapan kontrol bergulir
Mari kita siapkan html dulu
<! Doctype html> <html> <head> <title> Penjelasan terperinci tentang pengaturan scrollbar </iteme> <tyle> #scroll_container {height: 500px; Lebar: 500px; overflow-y: gulir; padding: 50px; Ukuran kotak: kotak perbatasan; } .scroll_item {height: 200px; Lebar: 500px; margin-top: 20px; Latar Belakang-Color: Aquamarine; Tampilan: Flex; Align-items: Center; Justify-Content: Center; } </style> </head> <body> <div id=scroll_container> <div id=scroll_container> <div id=item1 class=scroll_item> <span>1</span> </div> <div id=item2 class=scroll_item> <span>2</span> </div> <div id=item3 class=scroll_item> <span>3</span> </div> <div id = item4 class = scroll_item> <span> 4 </span> </div> <div id = item5 class = scroll_item> <span> 5 </span> </div> </div> <tombol OnClick = addItem ()> Tambahkan elemen </button> </Div> </Body> <script> let container = document.getelbyDy </button> </Div> </body> <script> let container = document.getelement </butk Biarkan indeks = 5; // tambahkan addItem fungsi elemen () {index+= 1; Biarkan item = `<div id = $ {'item'+index} class = scroll_item> <span> $ {index} </span> </div>`; container.innerhtml+= item; setTimeOut (() => {scrollToIndex ();})} </script> </html>Kode di atas berisi area yang dapat digulir, dan dapat menambahkan elemen ke area gulir, atau menggulir ke posisi elemen yang ditentukan. Efek umum adalah sebagai berikut.
Implementasi Dasar
Arti scrollTop telah dijelaskan sebelumnya. Kami dapat mengontrol pengguliran dengan memodifikasi nilai scrollTop dari scrolltop elemen kontainer. Semakin besar nilai scrollTop , semakin besar jarak gulir scrollbar relatif terhadap keadaan asli (ketika scrollTop adalah 0).
Setelah memahami arti scrollTop , kita dapat menggunakan scrollTop untuk mengimplementasikan kontrol scrollbar. Kemudian kami pertama -tama menerapkan gulungan ke bawah dan menambahkan metode scrollToBottom() ke kode di atas:
fungsi scrolltobottom () {let y = container.scrollheight-container.clientHeight; container.scrolltop = y;} Jika Anda ingin menggulir ke atas, kami hanya perlu mengatur scrollTop ke 0:
function scrolltotop () {container.scrolltop = 0;} Menggabungkan metode getBoundingClientRect() , kami juga dapat dengan mudah menerapkan pengguliran ke elemen yang ditentukan, di mana getBoundingClientRect().top mewakili jarak dari bagian atas elemen anak ke bagian atas viewport elemen induk:
function scrollToElement (el) {container.scrolltop+= el.getBoundingClientRect (). Top;} Tambahkan animasiGulir ke bawah
Namun, pengguliran kode di atas terlalu kaku. Kami dapat menambahkan efek animasi ke dalamnya, yang dapat diimplementasikan dengan bantuan setInterval() . Menganalisis proses penerapan efek animasi. Implementasi animasi tidak lebih dari menyelesaikan perubahan variabel dalam periode waktu tertentu. Oleh karena itu, pertama -tama kita perlu mengetahui offset dua variabel, variabel ( scrollTop ) dan waktu yang diperlukan untuk perubahan. Offset adalah nilai akhir dari scrollTop dikurangi nilai asli, dan durasi perubahan umumnya diatur ke parameter yang dapat dimodifikasi. Setelah memahami proses di atas, mari kita pertama -tama menggulir ke bawah sebagai contoh:
// Pertama tulis fungsi fungsi scrolltobottom scrolltobottom (el) {if (! El) {el = container; } // Nilai Asli Biarkan starttop = el.scrolltop; // nilai akhir let endtop = el.scrollheight-el.clientHeight; // Hasilkan fungsi kontrol animasi Biarkan scrollanimationfn = doanimation (starttop, endtop, 300, el); // Jalankan animasi, jalankan Let Interval = setInterval (() => {scrollanimationfn (interval)}, 10)}/** * @description: Fungsi pabrik yang menghasilkan fungsi kontrol animasi (menggunakan variabel variabel variabel variabel dober null */function doanimation (startValue, endvalue, durasi, el) {// gunakan penutupan untuk menyimpan variabel dy dan langkah (jarak setiap gulir animasi) biarkan dy = 0; Biarkan langkah = (endvalue-startValue)/(durasi/10); // return animation control function function return (interval) {dy+= langkah; if (dy> = endvalue-startValue) {clearInterval (interval); } el.scrolltop+= langkah; }}Ubah fungsi addItem untuk menambahkan gulungan ke animasi bawah:
fungsi addItem () {index+= 1; Biarkan item = `<div id = $ {'item'+index} class = scroll_item> <span> $ {index} </span> </div>`; container.innerhtml+= item; setTimeout (() => {// scrollToIndex (); scrolltobottom (wadah);})}Kemudian tambahkan gulungan ke tombol bawah untuk HTML:
<Tombol OnClick = scrolltobottom ()> gulir ke bagian bawah </button>
Mengikuti metode di atas, Anda juga dapat mengimplementasikan animasi yang umum digunakan untuk menggulir ke atas:
// menulis fungsi fungsi scrolltotop scrolltotop (el) {if (! El) {el = container; } // Nilai Asli Biarkan starttop = el.scrolltop; // Nilai akhir Let endtop = 0; // Hasilkan fungsi kontrol animasi Biarkan scrollanimationfn = doanimation (starttop, endtop, 300, el); // Jalankan animasi, jalankan Let Interval = setInterval (() => {scrollanimationfn (interval)}, 10)} Untuk beradaptasi dengan gulir ke bawah, kita perlu memodifikasi waktu berhenti animasi. Fungsi doAnimation() yang dimodifikasi adalah sebagai berikut:
fungsi doanimation (startValue, endvalue, durasi, el) {// Gunakan penutupan untuk menyimpan variabel dy dan langkah (jarak setiap gulir animasi) biarkan dy = 0; Biarkan langkah = (endvalue-startValue)/(durasi/10); fungsi pengembalian (interval) {dy+= langkah; // Di sini diubah untuk menggunakan nilai absolut untuk menilai jika (math.abs (dy)> = math.abs (endvalue-startValue)) {clearInterval (interval); } el.scrolltop+= langkah; }} Akhirnya, kami menambahkan gulungan ke tombol bawah html :
<tombol OnClick = scrolltotop ()> gulir ke atas </button>
Efeknya adalah sebagai berikut:
Pertama tambahkan tombol dan kotak input yang diperlukan untuk elemen HTML:
<input type = nomor placeholder = Harap masukkan elemen yang akan digulir ke indeks gaya = lebar: 200px;/> <tombol onclick = scrollToElement ()> gulir ke elemen yang ditentukan </attond>
Tambahkan fungsi eksekusi animasi yang menggulir elemen yang ditentukan:
fungsi scrolltoElement (containerel, el) {if (! containerel) {// elemen induk containerel = container; } if (! el) {// Dapatkan elemen yang akan digulir ke membiarkan input = document.getElementsbyTagname ('input') [0]; Biarkan id = 'item'+input.value; if (! input.Value) {id = 'item'+index; } el = document.geteLementById (id); } biarkan starttop = containerel.scrolltop; Biarkan endtop = starttop+el.getBoundingClientRect (). Top; Biarkan scrollanimationfn = doanimation (starttop, endtop, 300, containerel); Biarkan interval = setInterval (() => {scrollanimationfn (interval)}, 10)}Efeknya adalah sebagai berikut:
Metode penggunaan scrollTo(x,y) pada dasarnya sama dengan metode penggunaan atribut scrollTop . Metode scrollTo() dari elemen induk dapat mengontrol scrollbar ke posisi yang ditentukan, yang sebenarnya setara dengan mengatur nilai scrollTop . Izinkan saya memberi Anda contoh:
// Di sini kita mengambil gulungan sumbu y sebagai elemen contoh.
Oleh karena itu, menggunakan metode scrollTo() untuk mengontrol scrollbar pada dasarnya sama dengan menggunakan scrolltop. Kita hanya perlu memodifikasi fungsi doAnimation() , dan kode adalah sebagai berikut:
fungsi doanimation (startValue, endvalue, durasi, el) {// Gunakan penutupan untuk menyimpan variabel dy dan langkah (jarak setiap gulir animasi) biarkan dy = 0; Biarkan langkah = (endvalue-startValue)/(durasi/10); fungsi pengembalian (interval) {dy+= langkah; if (math.abs (dy)> = math.abs (endvalue-startValue)) {clearinterval (interval); } //el.scrolltop+=step;///ini baris kode dimodifikasi ke el.scrollto berikut (0, el.scrolltop+langkah); }} Efek eksekusi konsisten dengan implementasi menggunakan scrollTop .
Implementasi Dasar
Kami juga dapat menggunakan scrollBy(x,y) untuk mengontrol scrollbar. Seperti disebutkan di atas, metode scrollBy() adalah untuk mengontrol jarak yang ditentukan scrollbar (perhatikan bahwa itu bukan posisi). Gunakan scrollby () untuk dengan mudah mengimplementasikan persyaratan menggulir ke elemen yang ditentukan. Kodenya adalah sebagai berikut:
fungsi scrolltoElement (containerel, el) {// karena getboundingclientrect (). Top adalah jarak dari bagian atas elemen anak ke bagian atas elemen induk, sehingga nilai ini adalah offset elemen anak relatif terhadap elemen induk. Kami meneruskan nilai ini ke dalam scrollby, yaitu gulir ke elemen containerel.scrollby (0, el.getboundingclientrect (). Top);}Gulir ke bawah:
fungsi scrolltobottom (containerel) {let dy = containerel.scrollheight-containerel.clientHeight; containerel.scrollby (0, dy);}Gulir ke atas
function scrolltotop (containerel) {let dy =-(containerel.scrollheight-containerel.clientHeight); containerel.scrollby (0, dy);}Tambahkan animasi
Di sini kami memodifikasi fungsi yang dihasilkan oleh animasi, karena parameter scrollBy() di sini adalah offset dari variabel, jadi kami membuat modifikasi berikut:
fungsi scrolltobottom (containerel) {if (! containerel) {containerel = container; } // dy adalah offset let dy = containerel.scrollheight-containerel.clientHeight; Biarkan scrollanimationfn = doanimation (dy, 300, containerel); Biarkan interval = setInterVal (() => {scrollanimationfn (interval)}, 10)} function scrollTotop (containerel) {if (! containerel) {containerel = container; } // dy adalah offset let dy =-(containerel.scrollheight-containerel.clientHeight); Biarkan scrollanimationfn = doanimation (dy, 300, containerel); Biarkan interval = setInterval (() => {scrollanimationfn (interval)}, 10)} fungsi scrolltoElement (containerel, el) {if (! containerel) {containerel = container; } if (! el) {let input = document.geteLementsbyTagname ('input') [0]; Biarkan id = 'item'+input.value; if (! input.Value) {id = 'item'+index; } el = document.geteLementById (id); } // dy adalah offset let dy = el.getBoundingClientRect (). Top; Biarkan scrollanimationfn = doanimation (dy, 300, containerel); let interval=setInterval(()=>{ scrollAnimationFn(interval) },10) } /** * @description: * @param {type} * @return: */ function doAnimation(dy,duration,el){ //Use closure to save variables such as exe_dy and step (distance of each animation scrolling) let exe_dy=0;//The offset that has been dieksekusi Let Step = dy/(durasi/10); return function (interval) {exe_dy+= langkah; if (math.abs (exe_dy)> = math.abs (dy)) {clearinterval (interval); } el.scrollby (0, langkah); }} Efek eksekusi konsisten dengan implementasi menggunakan scrollTop .
Di atas: point_up_2: adalah ringkasan terperinci Anda sendiri dan penjelasan tentang kontrol batang gulir dom, serta beberapa metode penggunaan dasar.
Ini adalah artikel tentang penjelasan terperinci dari ringkasan kontrol gulir gulir elemen DOM di HTML. Untuk konten gulir gulir elemen DOM yang lebih relevan, silakan cari artikel sebelumnya dari wulin.com atau terus menelusuri artikel terkait di bawah ini. Saya harap semua orang akan mendukung wulin.com di masa depan!