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