Pertanyaan: Di H5, kami memiliki persyaratan seperti itu: misalnya, ketika ada daftar, lebih banyak lagi yang perlu dimuat saat menggulir ke bawah.
Solusi: Anda dapat menggunakan acara gulir jendela untuk diproses
Analisis: Jika pengguliran dilakukan untuk seluruh layar (bukan untuk blok antarmuka tertentu), maka hal ini harus benar: tinggi layar + jarak pengguliran maksimum = tinggi konten
Implementasi kode:
<html> <head> <meta charset=UTF-8> <title>Dengarkan untuk menggulir ke bawah gulir ke bawah</title> <style> .div2{width:100px;height:100px;border:1px merah solid }*{margin :0}.button1:active{ background:red}body{height:375px;width:667px;border:1px solid merah}.div1{height:600px;width:100%;background:red}.div2{height:600px;width:100%;background:green}.div3{height:600px;width:100%;background:blue} .div4{height:600px;width:100%;background:kuning} </style> </head> <tubuh> <div class=div0> <div class=div1></div> <div class=div2></div> <div class=div3></div> <div class=div4>< /div> <div class=div5></div> </div> </body> <script> window.onload = function(){ //Dapatkan elemen induk container var div0 = document.getElementsByClassName('div0') [ 0]; //tinggi Ketinggian atribut yang dihitung var height = parseInt((window.getComputedStyle(div0, null).height).replace('px', '')); console.log(height, dihitung tinggi div0) window.onscroll = function(){/*scrollTop adalah jarak antara bagian atas bilah gulir dan sudut kanan atas antarmuka. Metode penulisan kompatibilitas digunakan di sini*/let scrollTop = document.documentElement &&. document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop; //+-5 adalah untuk memastikan tingkat fleksibilitas tertentu, tidak harus sama persis, if(height-5<=scrollTop+ clientHeight&&scrollTop+clientHeight< =height+5){ console.log('Mendengarkan berhasil', 'Tiba di bagian bawah') } } } </skrip></html> Penjelasan kode yang relevan: Seringkali ketika daftar dimuat, kita tidak dapat mengatur ketinggian wadah induk yang memuat elemen turunan. Saat ini, ketika gaya disetel ke otomatis, element.style.height juga akan sama dengan otomatis. Disarankan untuk menggunakan clientHeight atau menggunakan perhitungan Style getComputedStyle menghitung tinggi
Meringkaskan
Di atas adalah apa yang editor perkenalkan kepada Anda untuk memecahkan masalah menggulir ke acara paling bawah di HTML5. Saya harap ini dapat membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan pesan kepada saya dan editor akan membalas Anda waktu. Saya juga ingin mengucapkan terima kasih kepada semua orang atas dukungan Anda terhadap situs seni bela diri VeVb!
Jika menurut Anda artikel ini bermanfaat, silakan cetak ulang, harap sebutkan sumbernya, terima kasih!