আপনার ওয়েবসাইটে লাগিয়ে নিন আপনার নিজস্ব সিএসএস স্ক্রলবার

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

স্ক্রলবার যোগ করতে নিচের দেয়া  স্টাইলগুলির যেটি পছন্দ হয় সেটির কোড অ্যাড করে ফেলুন আপনার সাইটে।

১. নীল লাইনড স্ক্রলবার

::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
border-radius: 10px;
}
::-webkit-scrollbar

{
width: 10px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
background-color: #3366FF;
border-radius: 10px;
background-image: -webkit-linear-gradient(0deg,
                                         rgba(255, 255, 255, 0.5) 25%,
 transparent 25%,
 transparent 50%,
 rgba(255, 255, 255, 0.5) 50%,
 rgba(255, 255, 255, 0.5) 75%,
 transparent 75%,
 transparent)
}


২. নীল স্ক্রলবার

::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
} ::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
background-color: #0ae;
background-image: -webkit-gradient(linear, 0 0, 0 100%,
                  color-stop(.5, rgba(255, 255, 255, .2)),
  color-stop(.5, transparent), to(transparent));
}
৩. লাল-কালো স্ক্রলবার

 :-webkit-scrollbar-track
{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9); border-radius: 10px; background-color: #444444;
}
::-webkit-scrollbar
{ width: 12px; background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{ border-radius: 10px; background-color: #D62929; background-image: -webkit-linear-gradient(90deg,
 transparent,
 rgba(0, 0, 0, 0.4) 50%,
 transparent,
 transparent)
}


৪.ধুসর-কালো স্ক্রলবার

::-webkit-scrollbar-track
{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5; border-radius: 10px;
}
::-webkit-scrollbar
{ width: 10px; background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{ background-color: #AAA; border-radius: 10px; background-image: -webkit-linear-gradient(90deg,
                                         rgba(0, 0, 0, .2) 25%,
 transparent 25%,
 transparent 50%,
 rgba(0, 0, 0, .2) 50%,
 rgba(0, 0, 0, .2) 75%,
 transparent 75%,
 transparent)
}


৫. কমলা স্ক্রলবার


::-webkit-scrollbar-track
{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5;
}
::-webkit-scrollbar
{ width: 10px; background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{ background-color: #F90; background-image: -webkit-linear-gradient(90deg,
                                         rgba(255, 255, 255, .2) 25%,
 transparent 25%,
 transparent 50%,
 rgba(255, 255, 255, .2) 50%,
 rgba(255, 255, 255, .2) 75%,
 transparent 75%,
 transparent)
}