scroll-behavior প্রপার্টি স্ক্রোল করার আচরণ (behavior) নিয়ন্ত্রণ করতে ব্যবহৃত হয়। এর সম্ভাব্য মানগুলো:
scroll-behavior: auto | smooth | initial | inherit;
উদাহরণ: স্মুথ স্ক্রোল
নিচের উদাহরণে html এলিমেন্টে scroll-behavior: smooth সেট করা হয়েছে, যাতে এঙ্কর লিংকে ক্লিক করলে পৃষ্ঠা মসৃণভাবে স্ক্রোল হয়।
<!DOCTYPE html> <html> <head> <style> html { scroll-behavior: smooth; } #area1 { height: 400px; background-color: red; } #area2 { height: 600px; background-color: orange; } #area3 { height: 550px; background-color: magenta; } </style> </head> <body> <h1>Demo Heading</h1> <div class="main" id="area1"> <h2>Section 1</h2> <a href="#area2">Reach Section 2</a> </div> <div class="main" id="area2"> <h2>Section 2</h2> <a href="#area3">Reach Section 3</a> </div> <div class="main" id="area3"> <h2>Section 3</h2> <a href="#area1">Reach Section 1</a> </div> </body> </html>
আউটপুট
এখন "Reach Section 2"-এ ক্লিক করুন:
এখন "Reach Section 3"-এ ক্লিক করুন Section 3-এ স্মুথ স্ক্রোলের জন্য:
মানগুলো:
- auto: ব্রাউজারের ডিফল্ট আচরণ (তাৎক্ষণিক জাম্প)
- smooth: মসৃণ অ্যানিমেশন সহ স্ক্রোল
- initial/inherit: স্ট্যান্ডার্ড CSS মান
ব্রাউজার সমর্থন: আধুনিক সব ব্রাউজার (Chrome, Firefox, Edge, Safari) এ সমর্থিত। পুরনো Internet Explorer-এ সমর্থিত নয়।
