ওয়েব ডিজাইনে স্ক্রলবার (Scrollbar) হল একটি গুরুত্বপূর্ণ উপাদান যা ব্যবহারকারীদের সহজে কন্টেন্ট ব্রাউজ করতে সাহায্য করে। CSS ব্যবহার করে স্ক্রলবার কাস্টমাইজ করলে ওয়েবসাইটের ডিজাইন আরও আকর্ষণীয় ও ইউনিক দেখায়। আপনি যদি আপনার ওয়েবসাইটে কাস্টম স্ক্রলবার তৈরি করতে চান, তাহলে এই গাইডটি আপনার জন্য।
CSS ব্যবহার করে কাস্টম স্ক্রলবার তৈরি করার চূড়ান্ত কোড
এই CSS কোডটি আপনার ওয়েবসাইটে যুক্ত করলেই সম্পূর্ণ কাস্টম স্ক্রলবার কাজ করবে।
/* পুরো স্ক্রলবারের স্টাইল */
::-webkit-scrollbar {
width: 10px;
}
/* স্ক্রলবারের ব্যাকগ্রাউন্ড */
::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
/* স্ক্রলবারের থাম্ব (যেখানে স্ক্রল করা হয়) */
::-webkit-scrollbar-thumb {
background: linear-gradient(45deg, #ff5733, #ffbd69);
border-radius: 10px;
}
/* হোভার করলে থাম্বের রঙ পরিবর্তন হবে */
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(45deg, #ff5733, #ff914d);
}
/* Firefox-এর জন্য স্ক্রলবার স্টাইল */
html {
scrollbar-width: thin;
scrollbar-color: #ff5733 #f1f1f1;
}
✅ এই CSS কোডটি Chrome, Edge, Safari এবং Firefox-এ কাজ করবে।
📌 Tip: আপনি চাইলে background এর রং পরিবর্তন করে আপনার ওয়েবসাইটের ব্র্যান্ডিং অনুযায়ী কাস্টমাইজ করতে পারেন।
ডার্ক মোডের জন্য স্ক্রলবার ডিজাইন
যদি আপনার ওয়েবসাইট ডার্ক মোড সমর্থন করে, তাহলে নিচের CSS ব্যবহার করুন।
/* ডার্ক মোড স্ক্রলবার */
body.dark-mode ::-webkit-scrollbar {
width: 10px;
}
body.dark-mode ::-webkit-scrollbar-track {
background: #222;
}
body.dark-mode ::-webkit-scrollbar-thumb {
background: linear-gradient(45deg, #555, #777);
border-radius: 10px;
}
body.dark-mode ::-webkit-scrollbar-thumb:hover {
background: linear-gradient(45deg, #777, #999);
}
/* Firefox-এর জন্য */
body.dark-mode {
scrollbar-width: thin;
scrollbar-color: #777 #222;
}
✅ এই CSS ব্যবহার করলে আপনার ওয়েবসাইটে ডার্ক মোড চালু হলে স্বয়ংক্রিয়ভাবে স্ক্রলবার পরিবর্তন হবে।
📌 Tip: JavaScript দিয়ে ডার্ক মোড সক্রিয় হলে body.dark-mode ক্লাস যোগ করুন।
সম্পূর্ণ লুকানো স্ক্রলবার (Hidden Scrollbar)
কখনো কখনো ওয়েবসাইটে স্ক্রলবার লুকিয়ে রাখতে হয়। নিচের CSS ব্যবহার করলে স্ক্রলবার সম্পূর্ণ লুকানো যাবে।
/* সম্পূর্ণ লুকানো স্ক্রলবার */
::-webkit-scrollbar {
display: none;
}
html {
scrollbar-width: none;
}
✅ এই CSS ব্যবহার করলে স্ক্রলবার দেখা যাবে না, তবে ব্যবহারকারীরা স্ক্রল করতে পারবে।
📌 Tip: যদি স্ক্রলবার লুকিয়ে রাখেন, তবে ইউজারদের জন্য স্ক্রলিং নির্দেশিকা যোগ করুন।
শেষ কথা: কেন কাস্টম স্ক্রলবার গুরুত্বপূর্ণ?
🚀 সংক্ষেপে:
- CSS ব্যবহার করে সহজেই কাস্টম স্ক্রলবার ডিজাইন করা যায়।
- ডার্ক মোড ও লাইট মোডের জন্য আলাদা স্ক্রলবার তৈরি করা সম্ভব।
- Firefox এবং Chrome-এর জন্য একাধিক স্টাইলিং অপশন রয়েছে।
- JavaScript ব্যবহার করে ডায়নামিক থিমিং চালু করা যায়।
🔹 আপনার ওয়েবসাইটে স্ক্রলবার কাস্টমাইজ করতে চাচ্ছেন? নিচে কমেন্ট করুন!
