লার্ন কম্পিউটার একাডেমি
English

CSS স্ক্রলবার স্টাইলার

স্ক্রলবারের প্রতিটি অংশ স্টাইল করুন — track, thumb, corner, buttons — আর দেখুন এটি আসল ব্রাউজার ইঞ্জিন দিয়ে রেন্ডার হচ্ছে, কোনো মকআপ নয়। দুটো আলাদা সিস্টেম, দুই ধরনের ব্রাউজার — নিচের honest সাপোর্ট নোটে কোনটি কোথায় ব্যাখ্যা করা আছে।

pseudo-elements পাঠটি পড়ুন

দুটো সিস্টেম, একে অপরের সাথে কথা বলে না

`scrollbar-width` আর `scrollbar-color` হলো স্ট্যান্ডার্ড: Firefox বহু বছর ধরে এগুলো সাপোর্ট করে, আর Chromium-ভিত্তিক ব্রাউজার (Chrome, Edge, Opera) আরও সম্প্রতি যোগ করেছে। Safari কোনোটাই সাপোর্ট করে না। `::-webkit-scrollbar` আর তার অংশগুলো শুধু WebKit/Blink-এর — Chrome, Edge, Opera আর Safari সবাই মানে; Firefox নিচের প্রতিটি রুল সম্পূর্ণ উপেক্ষা করে। সবখানে ইচ্ছাকৃত মনে হতে চাইলে দুটোই দিন, যেমন এই টুল তৈরি করে — যে ব্রাউজারে স্টাইল করেননি সেখানে একটি অ-স্টাইল করা স্ক্রলবার একদম ঠিক আছে।

স্ট্যান্ডার্ড (scrollbar-width / scrollbar-color)

scrollbar-width

::-webkit-scrollbar

ট্র্যাক

থাম্ব

কোণ

বাটন

Line 1 — scroll this box to see the styled scrollbar respond in real time, rendered by the browser itself.

Line 2 — scroll this box to see the styled scrollbar respond in real time, rendered by the browser itself.

Line 3 — scroll this box to see the styled scrollbar respond in real time, rendered by the browser itself.

Line 4 — scroll this box to see the styled scrollbar respond in real time, rendered by the browser itself.

Line 5 — scroll this box to see the styled scrollbar respond in real time, rendered by the browser itself.

Line 6 — scroll this box to see the styled scrollbar respond in real time, rendered by the browser itself.

Line 7 — scroll this box to see the styled scrollbar respond in real time, rendered by the browser itself.

Line 8 — scroll this box to see the styled scrollbar respond in real time, rendered by the browser itself.

Line 9 — scroll this box to see the styled scrollbar respond in real time, rendered by the browser itself.

Line 10 — scroll this box to see the styled scrollbar respond in real time, rendered by the browser itself.

Line 11 — scroll this box to see the styled scrollbar respond in real time, rendered by the browser itself.

Line 12 — scroll this box to see the styled scrollbar respond in real time, rendered by the browser itself.

Line 13 — scroll this box to see the styled scrollbar respond in real time, rendered by the browser itself.

Line 14 — scroll this box to see the styled scrollbar respond in real time, rendered by the browser itself.

Line 15 — scroll this box to see the styled scrollbar respond in real time, rendered by the browser itself.

Line 16 — scroll this box to see the styled scrollbar respond in real time, rendered by the browser itself.

Line 17 — scroll this box to see the styled scrollbar respond in real time, rendered by the browser itself.

Line 18 — scroll this box to see the styled scrollbar respond in real time, rendered by the browser itself.

Line 19 — scroll this box to see the styled scrollbar respond in real time, rendered by the browser itself.

Line 20 — scroll this box to see the styled scrollbar respond in real time, rendered by the browser itself.

Line 21 — scroll this box to see the styled scrollbar respond in real time, rendered by the browser itself.

Line 22 — scroll this box to see the styled scrollbar respond in real time, rendered by the browser itself.

Line 23 — scroll this box to see the styled scrollbar respond in real time, rendered by the browser itself.

Line 24 — scroll this box to see the styled scrollbar respond in real time, rendered by the browser itself.

নিচের বাক্সটি স্ক্রল করুন — এটি একটি আসল, লাইভ স্ক্রলবার, স্ক্রিনশট নয়।

প্রিভিউ

স্ক্রল অক্ষ

প্রিসেট

তৈরি হওয়া CSS

কোনো Tailwind ট্যাব নেই — মূল Tailwind-এ কোনো স্ক্রলবার ইউটিলিটি নেই (যে জনপ্রিয় প্লাগইন এগুলো যোগ করে সেটি এই প্রজেক্টের অংশ নয়), তাই এর জন্য ক্লাস তৈরি করলে এমন কোড হতো যা কাজ করে না।

.scrollable {
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 #f1f5f9;
}

.scrollable::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.scrollable::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 8px;
}

.scrollable::-webkit-scrollbar-thumb {
  background: #94a3b8;
  border-radius: 8px;
  border: 2px solid #f1f5f9;
  background-clip: padding-box;
}

.scrollable::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

.scrollable::-webkit-scrollbar-corner {
  background: #f1f5f9;
}

কোন ফিল্ড কী করে দেখতে তার উপর মাউস রাখুন বা ট্যাপ করুন।

দুই প্রান্তের উপর/নিচ/বাঁ/ডান তীর বাটন। বেশিরভাগ ব্রাউজারে ডিফল্টভাবে লুকানো থাকে — `::-webkit-scrollbar-button` দেখাতে হলে স্পষ্ট মাপ লাগবে, এই টগলটি সেটাই ঠিক করে। বাটনের মাপ পেলেই Chrome নিজে থেকে তার native তীরের আইকন এর উপর এঁকে দেয়; আপনি শুধু আইকনের পেছনের বাক্সটি স্টাইল করছেন।