چگونه اسکرول بار در سایت را شخصی سازی کنیم

در صفحه وب سایت و یا هر باکس یا div یا section اگر محتوای آن بخش از ماکزیمم ارتفاع آن بیشتر شود ، لازم است که به کمک ابزاری ادامه محتوا را ببینیم که به این ابزار اسکرول بار میگویند.

البته برای نمایش اسکرول بار (scrollbar) باید آن بخش یا باکس در css یا استایل دهی مقدار overflow:auto موجود باشد که برای body  و html پیشفرض موجود است.

این اسکرول بار در اکثر مرورگرها ظاهری ضمخت و بدی دارد و نیاز است با توجه به رنگ بندی وب سایت خود ، این اسکرول بارها را استایل دهی کنیم.

متاسفانه مواردی که برای استایل دهی در css مینویسیم برای مرورگر کروم به خوبی کار میکند و برای فایرفاکس باید جداگانه استایل دهی کنیم.

برای کروم:

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

موارد بالا برای اسکرول بارها به صورت سراسری هست یعنی هرجای وب سایت اسکرول باری باشد طبق این مورد استایل دهی میشود.

برای اینکه فقط برای بخش مورد نظر خود استایل دهی کنید لازیم است در ابتدای هر دستور آی دی (#) یا کلاس (.) یا نام تگ مورد نظر خود را بنویسید .

در زیر مثالی زدیم که مشخص میکند فط برای باکس با کلاس mybox فقط اعمال شود.

/* width */
.mybox::-webkit-scrollbar {
  width: 10px;
}

/* Track */
.mybox::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
.mybox::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
.mybox::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

موزیلا فایرفاکس :

برای این مرورگر باید در همان بخش استایل دهی به باکس مورد نظر خود ، موارد اسکرول بار هم قرار دهید.

در مثال زیر برای اسکرول بار اصلی سایت که همان تگ body و html هست و همچنین برای یک div با آی دی mybox انجام داده ایم.

body,html{
 scrollbar-width: thin !important;  /*ضخامت*/
 scrollbar-color: red green;  /*رنگ زمینه و رنگ دسته یا هندل*/


}


/*
مثال برای یک باکس مورد نظر
*/

#mybox{
 scrollbar-width: thin !important;  /*ضخامت*/
 scrollbar-color: red green;  /*رنگ زمینه و رنگ دسته یا هندل*/


}