شخصی‌سازی اسکرول بار در پلتفرم وب‌کیت
اگر گردشگر خوبی در وب هستید حتما وب‌سایت‌هایی را دیده اید که ظاهر اسکرول بارشان متفاوت است و باعث شده به زیبایی سایت افزوده شود.
امروز قصد معرفی این دستور برای پلتفرم‌های وب‌کیت با دستور ::-webkit-scrollbar را دارم.
در واقع کدهای این کار به شرح زیر می‌باشد.
::-webkit-scrollbar { /* ۱ */ }
::-webkit-scrollbar-button { /* ۲ */ }::-webkit-scrollbar-track { /* ۳ */ }::-webkit-scrollbar-track-piece { /* ۴ */ }::-webkit-scrollbar-thumb { /* ۵ */ }::-webkit-scrollbar-corner { /* ۶ */ }::-webkit-resizer { /* ۷ */ }
:horizontal (1)
:vertical (۲):decrement (۳):increment (۴):start (۵):end (۶):double-button (۷):single-button :no-button :corner-present :window-inactive و اینها سلکتورهایی هستند که امکان شخصی سازی بیشتری را به شما خواهند داد؛
یک مثال ساده از دستورهای بالا:
::-webkit-scrollbar {
width: 12px;}::-webkit-scrollbar-track { -webkit-box-shadow: inset ۰ ۰ 6px rgba(۰,۰,۰,۰.۳); border-radius: 10px;}::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset ۰ ۰ 6px rgba(۰,۰,۰,۰.۵);}
دیدگاه خود را وارد کنید
مطلب آموزشی جالبی بود ولی مزید امتنان خواهد بود اگر توضیحات بیشتری ارائه دهید.