onscroll ইভেন্ট

পরিভাষা ও ব্যবহার

onscroll ইভেন্ট এলমেন্টের রোল ট্যাব রোল করা হলে ঘটে

টীকা:CSS ব্যবহার করুন overflow শৈলী বৈশিষ্ট্য এলমেন্টের জন্য রোল ট্যাব তৈরি করে

ইনস্ট্যান্স

উদাহরণ ১

এলমেন্ট <div> রোল করার সময় JavaScript চালু করুন:

<div onscroll="myFunction()">

আপনার হাতে পরীক্ষা করুন

উদাহরণ ২

কিছু অন্য রোলিং অবস্থার মধ্যে শ্রেণীর নাম পরিবর্তন করুন - যখন ব্যবহারকারী পৃষ্ঠার শীর্ষ থেকে নিচে ৫০ পিক্সেল রোল করেন, শ্রেণীর নাম "test" এলমেন্টে যুক্ত হবে (আবার উপরে রোল করলে অপসারিত হবে)。

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 = "";
  }
}

আপনার হাতে পরীক্ষা করুন

উদাহরণ 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。অন্যথায় Event
সমর্থিত HTML ট্যাগস: <address>, <blockquote>, <body>, <caption>, <center>, <dd>, <dir>, <div>, <dl>, <dt>, <fieldset>, <form>, <h1> to <h6>, <html>, <li>, <menu>, <object>, <ol>, <p>, <pre>, <select>, <tbody>, <textarea>, <tfoot>, <thead>, <ul>
DOM সংস্করণ: স্তর ২ ইভেন্ট

ব্রাউজার সমর্থন

ইভেন্ট চ্রোম IE ফায়ারফক্স স্যাফারি অপেরা
onscroll সমর্থন সমর্থন সমর্থন সমর্থন সমর্থন