স্ক্রলবার স্টাইলিং

স্ক্রলবার স্টাইল করতে scrollbar-width এবং scrollbar-color বৈশিষ্ট্য ব্যবহার করুন।

Bramus

ভূমিকা

ক্রোম ভার্সন ২ থেকে ::-webkit-scrollbar-* pseudo-elements ব্যবহার করে স্ক্রলবার স্টাইল করা সম্ভব হয়েছে। এই পদ্ধতিটি ক্রোম এবং সাফারিতে ভালোভাবে কাজ করে, কিন্তু CSS ওয়ার্কিং গ্রুপ দ্বারা কখনও এটিকে মানসম্মত করা হয়নি।

সিএসএস স্ক্রলবার স্টাইলিং মডিউল লেভেল ১ স্পেসিফিকেশনের অংশ হিসেবে scrollbar-width এবং scrollbar-color বৈশিষ্ট্যগুলিকে স্ট্যান্ডার্ডাইজ করা হয়েছে। এই বৈশিষ্ট্যগুলি ক্রোম ১২১-এ সমর্থিত।

স্ক্রলবার ১০১

স্ক্রলবারের অ্যানাটমি

কমপক্ষে একটি স্ক্রলবারে একটি ট্র্যাক এবং একটি থাম্ব থাকে। ট্র্যাক হল সেই জায়গা যেখানে থাম্বটি নড়াচড়া করতে পারে। ট্র্যাকটি সম্পূর্ণ স্ক্রোল দূরত্বকে প্রতিনিধিত্ব করে। থাম্বটি স্ক্রোলযোগ্য অঞ্চলের মধ্যে বর্তমান অবস্থানকে প্রতিনিধিত্ব করে। আপনি যখন স্ক্রোল করেন, তখন এটি ট্র্যাকের মধ্যে চলে যায়। থাম্বটি প্রায়শই টেনে আনা যায়।

স্ক্রলবারগুলিতে কেবল থাম্ব এবং ট্র্যাক ছাড়াও আরও বেশি অংশ থাকতে পারে। উদাহরণস্বরূপ, একটি স্ক্রলবারে স্ক্রল অফসেট বৃদ্ধি বা হ্রাস করার জন্য এক বা একাধিক বোতাম থাকতে পারে। একটি স্ক্রলবার তৈরির অংশগুলি অন্তর্নিহিত অপারেটিং সিস্টেম দ্বারা নির্ধারিত হয়।

ক্লাসিক এবং ওভারলে স্ক্রলবার

স্ক্রলবার কীভাবে স্টাইল করবেন তা দেখার আগে, দুই ধরণের স্ক্রলবারের মধ্যে পার্থক্য বোঝা গুরুত্বপূর্ণ।

ওভারলে স্ক্রলবার

ওভারলে স্ক্রলবার হল ভাসমান স্ক্রলবার যা নীচের কন্টেন্টের উপরে রেন্ডার করা হয়। এগুলি ডিফল্টভাবে প্রদর্শিত হয় না তবে শুধুমাত্র যখন আপনি সক্রিয়ভাবে স্ক্রোল করছেন তখনই প্রদর্শিত হয়। নীচের কন্টেন্টটি দৃশ্যমান রাখার জন্য এগুলি প্রায়শই আধা-স্বচ্ছ থাকে, তবে এটি অপারেটিং সিস্টেমের সিদ্ধান্তের উপর নির্ভর করে। তাদের সাথে ইন্টারঅ্যাক্ট করার সময়, তাদের আকারও পরিবর্তিত হতে পারে।

ক্লাসিক স্ক্রলবার

ক্লাসিক স্ক্রলবার হল স্ক্রলবার যা একটি নির্দিষ্ট স্ক্রলবার গটারে স্থাপন করা হয়। স্ক্রলবার গটার হল ভেতরের সীমানা প্রান্ত এবং বাইরের প্যাডিং প্রান্তের মধ্যবর্তী স্থান। এই স্ক্রলবারগুলি সাধারণত অস্বচ্ছ (স্বচ্ছ নয়) এবং সংলগ্ন বিষয়বস্তু থেকে কিছু স্থান দখল করে।

scrollbar-color এবং scrollbar-width বৈশিষ্ট্য

scrollbar-color দিয়ে স্ক্রলবারগুলিকে রঙ দেওয়া

scrollbar-color প্রোপার্টি আপনাকে স্ক্রলবারের রঙের স্কিম পরিবর্তন করতে দেয়। প্রোপার্টিটি দুটি <color> মান গ্রহণ করে। প্রথম <color> মানটি থাম্বের রঙ নির্ধারণ করে এবং দ্বিতীয়টি ট্র্যাকের জন্য ব্যবহারযোগ্য রঙ নির্ধারণ করে।

.scroller {
  scrollbar-color: hotpink blue;
}

ওভারলে স্ক্রলবার ব্যবহার করার সময়, ট্র্যাকের রঙের ডিফল্টরূপে কোনও প্রভাব পড়ে না। তবে, স্ক্রলবারটি ঘোরানোর পরে, ট্র্যাকটি প্রদর্শিত হবে।

অপারেটিং সিস্টেম দ্বারা প্রদত্ত ডিফল্ট রেন্ডারিং ব্যবহার করতে, এর মান হিসেবে auto ব্যবহার করুন।

scrollbar-width ব্যবহার করে স্ক্রলবারের আকার পরিবর্তন করা

scrollbar-width প্রপার্টি আপনাকে একটি সংকীর্ণ স্ক্রোলবার বেছে নিতে দেয়, এমনকি স্ক্রোলযোগ্যতাকে প্রভাবিত না করেই স্ক্রোলবারটি সম্পূর্ণরূপে লুকিয়ে রাখতে দেয়।

গৃহীত মানগুলি হল auto , thin , এবং none .

• auto : প্ল্যাটফর্ম দ্বারা প্রদত্ত ডিফল্ট স্ক্রলবার প্রস্থ।
• thin : প্ল্যাটফর্ম দ্বারা প্রদত্ত স্ক্রলবারের একটি পাতলা রূপ, অথবা ডিফল্ট প্ল্যাটফর্ম স্ক্রলবারের চেয়ে পাতলা একটি কাস্টম স্ক্রলবার।
• none : কার্যকরভাবে স্ক্রলবার লুকায়। যদিও এলিমেন্টটি এখনও স্ক্রোলযোগ্য।

scrollbar-width এর জন্য 16px এর মতো <length> মান ব্যবহার করা সম্ভব নয়।

.scroller {
  scrollbar-width: thin;
}

ওভারলে স্ক্রলবার ব্যবহার করার সময়, যখন আপনি সক্রিয়ভাবে স্ক্রোলযোগ্য এলাকাটি স্ক্রোল করছেন তখনই থাম্বটি টানা হয়।

পুরোনো ব্রাউজার ভার্সন সাপোর্ট করে

যেসব ব্রাউজার ভার্সন scrollbar-color এবং scrollbar-width সমর্থন করে না, তাদের জন্য নতুন scrollbar-* এবং ::-webkit-scrollbar-* উভয় বৈশিষ্ট্যই ব্যবহার করা সম্ভব।

.scroller {
    --scrollbar-color-thumb: hotpink;
    --scrollbar-color-track: blue;
    --scrollbar-width: thin;
    --scrollbar-width-legacy: 10px;
}

/* Modern browsers with `scrollbar-*` support */
@supports (scrollbar-width: auto) {
    .scroller {
        scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
        scrollbar-width: var(--scrollbar-width);
    }
}

/* Legacy browsers with `::-webkit-scrollbar-*` support */
@supports selector(::-webkit-scrollbar) {
    .scroller::-webkit-scrollbar-thumb {
        background: var(--scrollbar-color-thumb);
    }
    .scroller::-webkit-scrollbar-track {
        background: var(--scrollbar-color-track);
    }
    .scroller::-webkit-scrollbar {
        max-width: var(--scrollbar-width-legacy);
        max-height: var(--scrollbar-width-legacy);
    }
}

মনে রাখবেন যে যখন আপনি ::-webkit-scrollbar এর width বা height সেট করেন, তখন একটি ওভারলে স্ক্রোলবার সর্বদা প্রদর্শিত হয়, যা কার্যকরভাবে এটিকে একটি ক্লাসিক স্ক্রোলবারে পরিণত করে।

বিভ্রম ধরে রাখার জন্য, আপনি কেবল স্ক্রোলারটি ঘোরানোর সময় রঙ পরিবর্তন করতে পারেন।

.scroller::-webkit-scrollbar-thumb {
    background: transparent;
}
.scroller::-webkit-scrollbar-track {
    background: transparent;
}
.scroller:hover::-webkit-scrollbar-thumb {
    background: var(--scrollbar-color-thumb);
}
.scroller:hover::-webkit-scrollbar-track {
    background: var(--scrollbar-color-track);
}

.scroller:hover {
    --fix: ; /* This custom property invalidates styles on hover, thereby enforcing a style recomputation. This is needed to work around a bug in Safari. */
}