حادثة onscroll

أحداث DOM كائن Event

تعريف والاستخدام

تحدث حادثة onscroll عند تمرير علامة التدول في العنصر.

إشارة:استخدم CSS overflow تعريف خصائص النمط لإنشاء علامة التدول للعنصر.

مثال

مثال 1

ت�行 JavaScript عند تمرير <div> العنصر:

<div onscroll="myFunction()">

جرب بنفسك

مثال 2

تبديل بين أسماء الصفحات بين المواقع المختلفة للتدول - عند تمرير المستخدم من أعلى الصفحة إلى الأسفل 50 بكسل، سيتم إضافة اسم الصفحة "test" إلى العنصر (وسيتم حذفه عند التمرير مرة أخرى إلى الأعلى).

window.onscroll = function() {myFunction()};
function myFunction() {
  إذا (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {}}
    document.getElementById("myP").className = "test";
  } آخره
    document.getElementById("myP").className = "";
  }
}

جرب بنفسك

مثال 3

عندما يمر المستخدم من أعلى الصفحة إلى الأسفل بـ 350 بكسل، يدخل العنصر (يضيف الصنف slideUp):

window.onscroll = function() {myFunction()};
function myFunction() {
  إذا (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
    document.getElementById("myImg").className = "slideUp";
  }
}

جرب بنفسك

النحو

في HTML:

<element onscroll="myScript">

جرب بنفسك

في JavaScript:

object.onscroll = function(){myScript};

جرب بنفسك

في JavaScript، باستخدام طريقة addEventListener():

object.addEventListener("scroll", myScript);

جرب بنفسك

ملاحظة:Internet Explorer 8 أو الأحدث غير مدعوم طريقة addEventListener()。

تفاصيل تقنية

التمدد: غير مدعوم
قابل للإلغاء: غير مدعوم
نوع الحدث: إذا تم إنشاؤه من واجهة المستخدمUiEvent، وإلا Event。
الوسمات الداعمة لـ HTML: <address>, <blockquote>, <body>, <caption>, <center>, <dd>, <dir>, <div>, <dl>, <dt>, <fieldset>, <form>, <h1> إلى <h6>, <html>, <li>, <menu>, <object>, <ol>, <p>, <pre>, <select>, <tbody>, <textarea>, <tfoot>, <thead>, <ul>
إصدار DOM: أحداث المستوى 2

دعم المتصفحات

الأحداث Chrome IE Firefox Safari Opera
onscroll الدعم الدعم الدعم الدعم الدعم
أحداث DOM كائن Event