onscroll ایوینٹ

DOM واقعات Event اشیاء

تعریف اور استعمال

onscroll ایوینٹ عناصر کا اسکرول بار اسکرول کئے جانے پر ہوتا ہے。

پیشکش:پرائیوٹرول اسز استعمال کریں overflow اسلوبیاتی اقدار عناصر میں اسکرول بار بنانے کے لئے استعمال کئے جاتے ہیں。

مثال

مثال 1

div عناصر اسکرول کے دوران جاوا اسکریپٹ چلائیں:

<div onscroll="myFunction()">

آزمایش کنید

مثال 2

مختلف سائنس کار کی کلاس ناموں کے درمیان منتقل کئے جانے - جب یوزر پیج کے اوپر سے نیچے 50 پیکسل تک اسکرول کرتا ہوا تو عناصر میں کلاس نام 'test' شامل کیاجائیگی (دوبارہ اوپر اسکرول کرنے پر اس کا خاتمہ ہوگا)。

وقتی کاربر از بالا به پایین صفحه به ارتفاع 350 پیکسل می‌رود، عنصر به آرامی وارد می‌شود (طبقه slideUp اضافه می‌شود):
window.onscroll = function() {myFunction()};
  اگر (document.body.scrollTop > 50 یا document.documentElement.scrollTop > 50) {
    document.getElementById("myP").className = "test";
  در غیر این صورت {
    }
  document.getElementById("myImg").className = "slideUp";
document.getElementById("myImg").className = "slideUp";

آزمایش کنید

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";
document.getElementById("myImg").className = "slideUp";

آزمایش کنید

}

قوانین دستور زبان

در HTML:< elementmyScriptonscroll="

آزمایش کنید

">

در JavaScript، از روش addEventListener() استفاده کنید:در JavaScript:myScript.onscroll = function(){

آزمایش کنید

};

در JavaScript، از روش addEventListener() استفاده کنید:.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 واقعات

بھرپائی کا ذریعہ

واقعات کروم آئی ای فائرفاکس سافری اپرا
onscroll محدودیت محدودیت محدودیت محدودیت محدودیت
DOM واقعات Event اشیاء