คำถาม: ใน H5 เรามีข้อกำหนดดังกล่าว เช่น เมื่อมีรายการ จะต้องโหลดเพิ่มเติมเมื่อเลื่อนลงไปด้านล่าง
วิธีแก้ไข: คุณสามารถใช้เหตุการณ์การเลื่อนของหน้าต่างเพื่อประมวลผลได้
การวิเคราะห์: หากการเลื่อนมีไว้สำหรับทั้งหน้าจอ (ไม่ใช่สำหรับบล็อกอินเทอร์เฟซบางบล็อก) ค่านี้ควรจะเป็นจริง: ความสูงของหน้าจอ + ระยะการเลื่อนสูงสุด = ความสูงของเนื้อหา
การใช้รหัส:
<html> <head> <meta charset=UTF-8> <title>ฟังเพื่อเลื่อนไปด้านล่าง เลื่อนไปด้านล่าง</title> <style> .div2{width:100px;height:100px;border:1px solid red }*{ระยะขอบ :0}.button1:active{ พื้นหลัง:สีแดง}body{height:375px;width:667px;border:1px solid สีแดง}.div1{ความสูง:600px;ความกว้าง:100%;พื้นหลัง:สีแดง}.div2{ความสูง:600px;ความกว้าง:100%;พื้นหลัง:สีเขียว}.div3{ความสูง:600px;ความกว้าง:100%;พื้นหลัง:สีน้ำเงิน} .div4{ความสูง:600px;ความกว้าง:100%;พื้นหลัง:สีเหลือง} </สไตล์> </head> <body> <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(){ //รับองค์ประกอบหลักของคอนเทนเนอร์ var div0 = document.getElementsByClassName('div0') [ 0]; // ส่วนสูง ความสูงของแอตทริบิวต์ที่คำนวณได้ var height = parseInt((window.getComputedStyle(div0, null).height).replace('px', '')); console.log(height, ความสูงที่คำนวณได้ของ div0) window.onscroll = function( ){/*scrollTop คือระยะห่างระหว่างด้านบนของแถบเลื่อนและมุมขวาบนของอินเทอร์เฟซ ที่นี่ใช้วิธีเขียนความเข้ากันได้*/let scrollTop = document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop; //+-5 คือเพื่อให้แน่ใจว่ามีความยืดหยุ่นในระดับหนึ่ง ไม่จำเป็นต้องเท่ากันทุกประการ ถ้า(height-5<=scrollTop+ clientHeight&&scrollTop+clientHeight< =height+5){ console.log('การฟังสำเร็จ', 'มาถึงด้านล่างสุด') } } } </สคริปต์></html> คำอธิบายที่เกี่ยวข้องของโค้ด: หลายครั้งเมื่อมีการโหลดรายการ เราไม่สามารถกำหนดความสูงของคอนเทนเนอร์หลักในการโหลดองค์ประกอบย่อยได้ ในขณะนี้ เมื่อตั้งค่าสไตล์เป็นอัตโนมัติ element.style.height ก็จะเท่ากับ auto ขอแนะนำให้ใช้ clientHeight หรือใช้การคำนวณ Style getComputedStyle คำนวณความสูง
สรุป
ข้างต้นคือสิ่งที่บรรณาธิการแนะนำให้คุณแก้ปัญหาการเลื่อนไปที่เหตุการณ์ด้านล่างใน HTML5 ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใดๆ โปรดฝากข้อความถึงฉัน แล้วบรรณาธิการจะตอบกลับคุณ เวลา. ฉันอยากจะขอบคุณทุกคนที่ให้การสนับสนุนเว็บไซต์ศิลปะการต่อสู้ VeVb!
หากคุณคิดว่าบทความนี้มีประโยชน์สำหรับคุณ คุณสามารถพิมพ์ซ้ำได้ โปรดระบุแหล่งที่มา ขอขอบคุณ!