رویداد onscroll

رویدادهای DOM مجموعه Event

تعریف و استفاده

رویداد onscroll وقتی نوار اسکرول عنصر در حال اسکرول است، رخ می‌دهد.

توجه:از CSS استفاده کنید overflow ویژگی‌های استایل ایجاد یک نوار اسکرول برای عنصر.

مثال

مثال 1

هنگام اسکرول روی عناصر <div>، جاوااسکریپت را اجرا کنید:

<div onscroll="myFunction()">

به طور شخصی امتحان کنید

مثال 2

در بین نام‌های کلاس در موقعیت‌های اسکرول مختلف تغییر دهید - هنگامی که کاربر از بالا به پایین به میزان 50 پیکسل روی صفحه اسکرول می‌کند، نام کلاس "test" به عنصر اضافه می‌شود (و هنگام اسکرول به بالا حذف می‌شود).

window.onscroll = function() {myFunction()};
function myFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    else {
  }
    document.getElementById("myP").className = "";
  }
}

به طور شخصی امتحان کنید

مثال 3

وقتی کاربر از بالا به پایین صفحه به ارتفاع 350 پیکسل رول می‌کند، عنصر به سمت بالا حرکت کند (گونه slideUp را اضافه کنید):

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

به طور شخصی امتحان کنید

زبان نوشتاری

در HTML:

<element onscroll="myScript">

به طور شخصی امتحان کنید

در جاوااسکریپت:

object.onscroll = function(){myScript};

به طور شخصی امتحان کنید

در جاوااسکریپت، از روش addEventListener() استفاده کنید:

object.addEventListener("scroll", myScript);

به طور شخصی امتحان کنید

نکته:اینترنت اکسپلورر 8 یا نسخه‌های قدیمی‌تر آن پشتیبانی نمی‌کند مетод addEventListener()。

جزئیات فنی

بالا آمده: پشتیبانی نمی‌شود
قابل لغو: پشتیبانی نمی‌شود
نوع رویداد: اگر از رابط کاربری کاربر ایجاد شده باشد،UiEvent، در غیر این صورت رویداد。
برچسب‌های 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