কিভাবে তৈরি করা: কাস্টম স্ক্রোল বার্নার

CSS ব্যবহার করে কাস্টম স্ক্রোল বার্নার কিভাবে তৈরি করা যায় শিখুন

কিভাবে কাস্টম স্ক্রোল বার্নার তৈরি করা যায়

Chrome, Edge, Safari এবং Opera অস্বাভাবিক ::-webkit-scrollbar প্রোটোটাইপ, যা আমাদের ব্রাউজার স্ক্রোল বার্নারের দিক পরিবর্তন করতে দেয়

নিচের উদাহরণটি 10px প্রস্থের স্ক্রোল বার্নার তৈরি করেছে, যা গ্রেয়ার রেল/পটি এবং ডার্ক গ্রেয়ার (#888) স্ক্রোল ব্লক সহ রয়েছে:

/* প্রস্থ */
::-webkit-scrollbar {
  width: 10px;
}
/* রেল */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
/* স্ক্রোল ব্লক */
::-webkit-scrollbar-thumb {
  background: #888;
}
/* মাউস হভ ওভার স্ক্রোল ব্লক */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

আপনার নিজেই প্রয়াস করুন

এই উদাহরণটি একটি শুধুমাত্র ছায়া প্রভাব সহ স্ক্রোল বার্নার তৈরি করেছে:

উদাহরণ

/* প্রস্থ */
::-webkit-scrollbar {
  width: 20px;
}
/* রেল */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}
/* স্ক্রোল ব্লক */
::-webkit-scrollbar-thumb {
  background: red;
  border-radius: 10px;
}

আপনার নিজেই প্রয়াস করুন

স্ক্রোল বার্নার সিলেক্টর

webkit ব্রাউজারের জন্য, আপনি নিচের প্রোটোটাইপ ইউনিটগুলি ব্যবহার করে ব্রাউজারের স্ক্রোল বার্নারকে পারস্পরিকভাবে সজ্জিত করতে পারেন: