اسکرول افقی با کانتینر دلخواه | بوسیله کد css

				
					selector {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px; /* ایجاد فاصله بین محتوا و نوار اسکرول */
  box-sizing: border-box; /* مدیریت پدینگ در ابعاد کانتینر */
}

selector > * {
  flex: 0 0 auto;
  margin-right: 0px; /* فاصله بین آیتم‌ها */
}

selector::-webkit-scrollbar {
  height: 6px; /* ارتفاع اسکرول‌بار */
}

selector::-webkit-scrollbar-thumb {
  background: linear-gradient(45deg, #B8DCAE, #FFFFFF); /* گرادینت از رنگ‌های مختلف */
  border-radius: 10px;
}

selector::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(45deg, #00606C, #FFFFFF); /* تغییر رنگ گرادینت در حالت هاور */
}

selector::-webkit-scrollbar-track {
  background: transparent; /* شفاف‌سازی ناحیه پشت اسکرول‌بار */
}

/* بهینه‌سازی برای موبایل */
@media (max-width: 768px) {
  selector::-webkit-scrollbar {
    height: 5px; /* کاهش ارتفاع اسکرول‌بار */
  }

  selector::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg, #B8DCAE, #FFFFFF); /* رنگ ملایم‌تر با گرادینت برای موبایل */
  }
}