آموزش شخصی سازی نوار پیمایش

بریم برای شخصی سازی نوار پیمایش؛ دو نوع دارد:

• با افزونه
• با کد ساده CSS

روش اول: شخصی سازی اسکرول بار با کد ساده

ابتدا به شخصی سازی آن با یک کد خیلی ساده میپردازیم

کد شخصی سازی نوار‌پیمایش

<style>
::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar {
  width: 10px;
}	
 
::-webkit-scrollbar-track { 
    border:1px solid #fff;
}
 
::-webkit-scrollbar-thumb {
  background: #7555CF; 
    border:1px solid #fff;
    height:100px;
    
}
</style>

هر کد چکار می‌کند

کد width: 10px

این کد به نویگیشن‌بار عرض می‌دهد. اگر نیازی به نوار پیمایش ندارید آن را 0px قرار دهید.

کد border:1px solid #fff

این کد به اسکرول‌بار شما یک حاشیه 1px می‌دهد. اگر نیاز ندارید آن را حذف کنید

کد background: #7555CF

این کد به نویگیشن‌بار شما یک رنگ میدهد. می‌توانید آن را به رنگ دلخواه تغیر دهید. ( توجه: باید کد رنگی را وارد کنید)