ژوپین
  1. خانه
  2. بلاگ
  3. آموزش
  4. فرانت اند(اhtml-css-javascript)
  5. چگونه اسکرول بار در سایت را شخصی سازی کنیم

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

آموزشفرانت اند(اhtml-css-javascript)

نکات مهم این مطلب

شخصی سازی و تغییر رنگ و بکگراند و ضخامت و دیگر مشخصات اسکرول بار وب سایت با css

تغییر رنگ اسکرول وب سایت

تغییر رنگ زمینه اسکرول بار

تغییر ظاهر اسکرول بار سایت با css

کم کردن یا زیاد کردن ضخامت اسکرول بار به کمک css

شخصی سازی و تغییر رنگ و بکگراند و ضخامت و دیگر مشخصات scrollbar وب سایت با css

در صفحه وب سایت و یا هر باکس یا 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; /*رنگ زمینه و رنگ دسته یا هندل*/


}
چگونه اسکرول بار در سایت را شخصی سازی کنیم
نمایش 95
لایک 1
برچسب ها :
اسکرول اسکرول بار آموزش css آموزش html

مطالب مشابه

نظرات



ارسال نظر

جهت قرار دادن کد در متن کامنت ، متن مورد نظر را انتخاب کنید و دکمه بالا را بزنید

گفتگو با پشتیبان