জেকুয়েরি scroll() মেথড
সিনট্যাক্স ও ব্যাখ্যা
$(selector).scroll(function)
প্যারামিটার ও তাদের ভ্যালু
নিচের টেবিলে scroll() মেথডে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ
| প্যারামিটার | বিবরণ |
|---|---|
| function | ঐচ্ছিক। scroll ইভেন্ট সক্রিয় হলে যে ফাংশনটি রান হবে সেটিকে নির্দেশ করে। |
সংজ্ঞা এবং ব্যবহার
নির্দিষ্ট এলিমেন্টকে যখন স্ক্রল করা হয় তখন scroll ইভেন্ট ঘটে।
স্ক্রল করা যায় এমন সকল এলিমেন্ট এবং উইন্ডো অবজেক্টের জন্য scroll ইভেন্ট কাজ করে।
scroll() মেথড scroll ইভেন্টকে ট্রিগার করে, অথবা scroll ইভেন্ট ঘটলে রান করার জন্য একটি ফাংশন যুক্ত করে।
scroll() মেথড সংক্রান্ত উদাহরণ
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
a = 0;
$(document).ready(function(){
$("div").scroll(function(){
$("span").text( a+= 1);
});
});
</script>
</head>
<body>
<p> ডিভ(div)-এর মধ্যে স্ক্রলড করার চেষ্টা করি</p>
<div style="border:1px solid black;width:200px;height:100px;overflow:scroll;">
কম্পিউটার শিক্ষা বর্তমান সময়ের দাবি। যা ডিজিটালের সিড়ি। তাই দেশকে সত্যিকারেরর ডিজিটাল হিসাবে দেখতে চাইলে সরকারের সহিত আমাদেরকেও সমানভাবে এগিয়ে আসতে হবে, এবং কম্পিউটার শিক্ষা অর্জন করতে হবে।
<br><br>কিন্তু আমরা জেলাশহরে থাকার কারণে এবং রাজধানী ঢাকা আমাদের থেকে অনেক দুরে অথবা অার্থিক কারণে আমরা যেমন ওয়েব ডিজাইন এবং ডেভেলোপমেন্ট/এন্ড্রয়েড/ আই ও এস অ্যাপ্স তৈরির কথা চিন্তাও করতে পারিনা। এসব সমস্যার সমাধান হিসাবে স্যাট -এর জন্ম। স্যাট একাডেমী সম্পূর্ণ বিনামূল্যে ওয়েব ডিজাইন এবং ডেভেলোপমেন্টের উপর প্রশিক্ষণ দিচ্ছে।
</div>
<p>স্ক্রল <span>০</span> বার হয়েছে।</p>
</body>
</html>
ফলাফল
স্ক্রলের বিভিন্ন অবস্থায় class এর মধ্যে টোগল করা
স্ক্রলের বিভিন্ন অবস্থায় কিভাবে class এর মধ্যে টোগল করা যায় তা নিচের উদাহরনে দেখান হলো
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$("p").addClass("test");
} else {
$("p").removeClass("test");
}
});
});
</script>
<style>
.test {
background-color: green;
}
</style>
</head>
<body style="height:1000px;">
<p>পেজটিকে নিচের দিকে স্ক্রল করুন।</p>
<p style="position:fixed;">যখন আপনি উপর থেকে নিচের দিকে 50px স্ক্রল করবেন, তখন প্যারাগ্রাফে "test" ক্লাস যুক্ত হবে (হলুদ ব্যাকগ্রাউন্ড কালার)। ক্লাস রিমুভ করার জন্য পূনরায় উপরের দিকে স্ক্রল করুন।</p>
</body>
</html>
ফলাফল