سؤال: في H5، لدينا مثل هذا المطلب: على سبيل المثال، عندما تكون هناك قائمة، يجب تحميل المزيد عند التمرير إلى الأسفل.
الحل: يمكنك استخدام حدث التمرير للنافذة للمعالجة
التحليل: إذا كان التمرير للشاشة بأكملها (وليس لكتلة واجهة معينة)، فيجب أن يكون هذا صحيحًا: ارتفاع الشاشة + الحد الأقصى لمسافة التمرير = ارتفاع المحتوى
تنفيذ الكود:
<html> <head> <meta charset=UTF-8> <title>استمع للتمرير إلى الأسفل ثم انتقل إلى الأسفل</title> <style> .div2{width:100px;height:100px;border:1px أحمر خالص }*{الهامش:0}.button1:active{ الخلفية:أحمر}الجسم{الارتفاع:375px;العرض:667px;الحدود:1px صلب أحمر).div1{الارتفاع:600px;العرض:100%;الخلفية:أحمر).div2{الارتفاع:600px;العرض:100%;الخلفية:أخضر}.div3{الارتفاع:600px;العرض:100%;الخلفية:أزرق} .div4{الارتفاع:600px;العرض:100%;الخلفية:أصفر} </style> </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 هي المسافة بين الجزء العلوي من شريط التمرير والزاوية اليمنى العليا من الواجهة. يتم استخدام طريقة الكتابة المتوافقة هنا*/letscrollTop = document.documentElement &&. document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop; //+-5 لضمان درجة معينة من المرونة، وليس من الضروري أن تكون متساوية تمامًا، if(height-5<=scrollTop+ clientHeight&&scrollTop+clientHeight< =height+5){ console.log('تم الاستماع بنجاح', 'وصل إلى الأسفل') } } } </script></html> شرح ذو صلة بالكود: في كثير من الأحيان عندما يتم تحميل القائمة، لا يمكننا ضبط ارتفاع الحاوية الأصلية التي تقوم بتحميل العناصر الفرعية. في هذا الوقت، عندما يتم تعيين النمط على تلقائي، سيكون element.style.height مساويًا أيضًا يوصى باستخدام clientHeight أو استخدام نمط الحساب getComputedStyle لحساب الارتفاع
تلخيص
ما ورد أعلاه هو ما يقدمه لك المحرر لحل مشكلة التمرير إلى الحدث السفلي في HTML5، وآمل أن يكون مفيدًا لك. إذا كانت لديك أي أسئلة، فيرجى ترك رسالة لي وسيقوم المحرر بالرد عليك وقت. أود أيضًا أن أشكر الجميع على دعمكم لموقع VeVb للفنون القتالية!
إذا كنت تعتقد أن هذه المقالة مفيدة لك، فنحن نرحب بإعادة طبعها، يرجى الإشارة إلى المصدر، شكرًا لك!