CSS scroll-behavior প্রোপার্টি আমাদের স্ক্রোলের আচরণ পরিবর্তন করতে দেয়।
উদাহরণ
নিচের উদাহরণগুলো CSS scroll-behavior প্রোপার্টি প্রদর্শন করে।
<!DOCTYPE html> <html> <head> <style> html { line-height: 200px; margin: 30px; text-align: center; vertical-align: middle; } #parent { scroll-behavior: smooth; width: 250px; height: 200px; overflow-y: scroll } .pink { height: 200px; box-shadow: inset 0 0 50px deeppink; } .blue { height: 200px; box-shadow: inset 0 0 50px darkblue; } </style> </head> <body> <div id="parent"> <div class="blue" id="first"><a href=#last>Last</a></div> <div class="pink"></div> <div class="blue"></div> <div class="pink" id="last"><a href=#first>First</a></div> </div> </body> </html>
আউটপুট
এটি নিচের ফলাফল দেবে −
উদাহরণ
<!DOCTYPE html> <html> <head> <style> html { line-height: 150px; margin: 30px; text-align: center; vertical-align: middle; } #parent { scroll-behavior: auto; width: 150px; height: 150px; overflow: hidden; border: 22px groove tomato; border-radius: 50%; } .green { height: 150px; box-shadow: inset 0 0 50px darkgreen; } .blue { height: 150px; box-shadow: inset 0 0 50px darkblue; } </style> </head> <body> <div id="parent"> <div class="blue" id="first"><a href=#last>Last</a></div> <div class="green"></div> <div class="blue"></div> <div class="green" id="last"><a href=#first>First</a></div> </div> </body> </html>
আউটপুট
এটি নিচের ফলাফল দেবে −
