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 | সমর্থন | সমর্থন | সমর্থন | সমর্থন | সমর্থন |