حدث على التمرير
مثال
نفِّذ JavaScript عندما يتم تمرير عنصر <div>:
<div onscroll="myFunction()">
التعريف والاستخدام
يقع حدث onscroll عندما يتم تمرير شريط التمرير لعنصر ما.
نصيحة: استخدم خاصية CSS overflow style لإنشاء شريط تمرير لعنصر.
دعم المتصفح
| Event | |||||
|---|---|---|---|---|---|
| onscroll | Yes | Yes | Yes | Yes | Yes |
بناء الجملة
في HTML:
<element onscroll="myScript">
في JavaScript:
object.onscroll = function(){myScript};
في JavaScript ، باستخدام طريقة addEventListener ():
object.addEventListener("scroll", myScript);
ملاحظة: طريقة addEventListener () غير مدعومة في Internet Explorer 8 والإصدارات السابقة.
تفاصيل تقنية
| فقاعات: | رقم |
|---|---|
| قابل للإلغاء: | رقم |
| نوع الحدث: | UiEvent إذا تم إنشاؤه من واجهة مستخدم ، حدث خلاف ذلك |
| علامات HTML المدعومة: | <address> ، <blockquote> ، <body> ، <caption> ، <center> ، <dd> ، <dir> ، <div> ، <dl> ، <dt> ، <fieldset> ، <form> ، > إلى <h6> ، <html> ، <li> ، <menu> ، <object> ، <ol> ، <p> ، <pre> ، <select> ، <tbody> ، <textarea> ، <tfoot> ، <رأس> ، <ul> |
| إصدار DOM: | أحداث المستوى 2 |
مزيد من الأمثلة
مثال
التبديل بين أسماء الفئات في مواضع تمرير مختلفة - عندما يقوم المستخدم بالتمرير لأسفل بمقدار 50 بكسل من أعلى الصفحة ، ستتم إضافة اسم الفئة "اختبار" إلى عنصر (وإزالته عند التمرير لأعلى مرة أخرى).
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementById("myP").className = "test";
} else {
document.getElementById("myP").className = "";
}
}
مثال
حرك عنصرًا عندما يقوم المستخدم بالتمرير لأسفل بمقدار 350 بكسل من أعلى الصفحة (أضف فئة slideUp):
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
document.getElementById("myImg").className = "slideUp";
}
}