مثال
تنفيذ جافا سكريبت عندما <div> يتم تمريره عنصر:
<div onscroll="myFunction()"> انها محاولة لنفسك » تعريف والاستخدام
يحدث هذا الحدث onscroll عندما يتم تمريره شريط التمرير للعناصر.
نصيحة: استخدم CSS تجاوز منشأة لخلق شريط التمرير لعنصر.
دعم المتصفح
| هدف | |||||
|---|---|---|---|---|---|
| onscroll | نعم فعلا | نعم فعلا | نعم فعلا | نعم فعلا | نعم فعلا |
بناء الجملة
في HTML:
في جافا سكريبت:
object .onscroll=function(){ انها محاولة لنفسك » في جافا سكريبت، وذلك باستخدام addEventListener() الأسلوب:
object .addEventListener("scroll", myScript );
انها محاولة لنفسك » ملاحظة: addEventListener() لا يتم اعتماد طريقة في Internet Explorer 8 والإصدارات السابقة.
تفاصيل تقنية
| فقاعات: | لا |
|---|---|
| للإلغاء: | لا |
| نوع الحدث: | UIEvent |
| علامات HTML المعتمدة: | <عنوان>، <اقتباس فقرة>، <body>، <شرح>، <مركز>، <DD>، <DIR> <div> <دل>، <دينارا>، <مجموعة حقول>، <شكل>، <h1> إلى <H6>، <HTML>، <لى>، <القائمة>، <كائن>، <رأ>، <p>، <قبل>، <حدد> <TBODY> <textarea> من <TFOOT>، <THEAD>، <ul> |
| صفحة DOM: | مستوى 2 الفعاليات |
مزيد من الأمثلة
مثال
تبديل بين أسماء فئة على مواقع التمرير مختلفة - وعندما تمرير المستخدم بنسبة 50 بكسل من أعلى الصفحة اسم الفئة "test" ستضاف إلى عنصر (and removed when scrolled up again) .
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 بكسل من الجزء العلوي من الصفحة (add the slideUp class) :
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 350 || document.documentElement.scrollTop >
350) {
document.getElementById("myImg").className = "slideUp";
}
انها محاولة لنفسك » <كائن الحدث