স্ক্রলবারের রঙ বা ঘনত্ব কাস্টমাইজ করা

আপনি স্ট্যান্ডার্ড CSS প্রপার্টি scrollbar-color এবং scrollbar-width ব্যবহার করে স্ক্রলবারের চেহারা কাস্টমাইজ করতে পারেন।

• scrollbar-color: দুটি <color> ভ্যালু গ্রহণ করে। প্রথমটি থাম্বের (যে অংশটি সরানো যায়) ক্ষেত্রে প্রযোজ্য এবং দ্বিতীয়টি ট্র্যাকের (স্থির ব্যাকগ্রাউন্ড) ক্ষেত্রে প্রযোজ্য।
• scrollbar-width: auto (ডিফল্ট), thin (আরও পাতলা ভ্যারিয়েন্ট) বা none (স্ক্রল করার সুবিধা বজায় রেখে স্ক্রলবার সম্পূর্ণভাবে লুকায়) গ্রহণ করে।

scrollbar-color এবং scrollbar-width প্রয়োগ করুন

বাধ্যতামূলক: স্ক্রল করা যায় এমন কন্টেনারে scrollbar-color এবং scrollbar-width ব্যবহার করুন।

scrollbar-color ব্যবহার করার সময়, থাম্ব ও ট্র্যাকের রঙ আলাদা রাখতে CSS ভেরিয়েবল ব্যবহার করুন, যাতে সহজে পড়া ও ম্যানেজ করা যায় (বিশেষত ফলব্যাক ব্যবহার করার সময়)।

.scroller {
  --scrollbar-thumb: var(--color-neutral-70);
  --scrollbar-track: var(--color-neutral-90);

  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

ফলব্যাক স্ট্র্যাটেজি

স্ক্রলবার-কালারের জন্য ফলব্যাক ও ব্রাউজার সহায়তা

এই ফিচারটি প্রোগ্রেসিভ এনহ্যান্সমেন্ট এবং এর জন্য সবসময় ফলব্যাকের প্রয়োজন হয় না।

স্টাইলিং গুরুত্বপূর্ণ হলে এবং ব্যবহারকারীর বেসলাইন টার্গেট "বেসলাইন ব্যাপকভাবে উপলভ্য" বা তার আগের হলে, আপনার ফলব্যাক হিসেবে নন-স্ট্যান্ডার্ড ::-webkit-scrollbar সিউডো-এলিমেন্ট অন্তর্ভুক্ত করা উচিত।

স্ট্যান্ডার্ড প্রপার্টি এবং লিগ্যাসি WebKit সিলেক্টরের মধ্যে দ্বন্দ্ব এড়াতে, লিগ্যাসি ফলব্যাকগুলিকে একটি @supports not (scrollbar-color: auto) ব্লকে মুড়ে দিন। এটি সেইসব ব্রাউজারের ক্ষেত্রে প্রযোজ্য যেগুলি নেটিভভাবে দুটিকেই সাপোর্ট করে।

আপনি রঙ নির্ধারণ করার জন্য কাস্টম প্রপার্টি ব্যবহার করলে, এগুলি অটোমেটিক পুরনো WebKit সিলেক্টরে ক্যাসকেড হয়ে যাবে। আপনাকে এগুলি ডুপ্লিকেট করতে হবে না।

/* Legacy fallback for WebKit/Blink browsers */
@supports not (scrollbar-color: auto) {
  .scroller::-webkit-scrollbar {
    /* Must define base size in WebKit for custom colors to be visual */
    width: 12px;
    height: 12px;
  }

  .scroller::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
  }

  .scroller::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
  }
}