WebKit-ভিত্তিক ব্রাউজার (Chrome, Edge, Safari) এ `::-webkit-scrollbar` পসিডো-এলিমেন্ট ব্যবহার করে স্ক্রোলবার স্টাইল করা যায়।
উদাহরণ: কাস্টম স্ক্রোলবার
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
height: 200vh; /* স্ক্রোলবার তৈরি করতে */
}
::-webkit-scrollbar { width: 20px; }
p { font-size: 40px; }
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey; border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background: rgb(75, 22, 161); border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover { background: #9156ff; }
</style>
</head>
<body>
<h1>কাস্টম স্ক্রোলবার উদাহরণ</h1>
<h2>IE, Edge (পুরানো), Firefox-এ কাজ করবে না</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, rerum. Placeat molestias quisquam doloremque, perferendis aspernatur quod cupiditate cumque porro cum facilis vel dolorem fuga dolore quae deserunt sint inventore distinctio et, modi sunt! Commodi omnis adipisci autem enim, perferendis, modi possimus quos, ducimus error hic natus voluptate. Error, rem!</p>
</body>
</html>
কোড ব্যাখ্যা
- ::-webkit-scrollbar: স্ক্রোলবারের প্রস্থ নির্ধারণ করে।
- ::-webkit-scrollbar-track: ট্র্যাক (পথ) স্টাইল।
- ::-webkit-scrollbar-thumb: ড্র্যাগেবল থাম্ব স্টাইল।
- ::-webkit-scrollbar-thumb:hover: হোভার স্টেট।
ক্রস-ব্রাউজার সমাধান
Firefox-এ `scrollbar-width: thin; scrollbar-color: #4b16a1 #ccc;` ব্যবহার করুন। স্ট্যান্ডার্ডাইজেশন চলছে।
