متفاوت ترین مجله اینترنتی ...

شخصی‌سازی اسکرول بار در پلتفرم وب‌کیت

12345 (بدون نظر)
Loading...
106

اگر گردشگر خوبی در وب هستید حتما وب‌سایت‌هایی را دیده اید که ظاهر اسکرول بارشان متفاوت است و باعث شده به زیبایی سایت افزوده شود.

امروز قصد معرفی این دستور برای پلتفرم‌های وب‌کیت با دستور ::-webkit-scrollbar را دارم.

در واقع کدهای این کار به شرح زیر می‌باشد.

::-webkit-scrollbar { /* ۱ */ }

::-webkit-scrollbar-button { /* ۲ */ }
::-webkit-scrollbar-track { /* ۳ */ }
::-webkit-scrollbar-track-piece { /* ۴ */ }
::-webkit-scrollbar-thumb { /* ۵ */ }
::-webkit-scrollbar-corner { /* ۶ */ }
::-webkit-resizer { /* ۷ */ }

scrollbarparts

:horizontal (1)

:vertical (۲)
:decrement  (۳)
:increment (۴)
:start (۵)
:end (۶)
:double-button (۷)
:single-button 
:no-button 
:corner-present 
:window-inactive 
و اینها سلکتورهایی هستند که امکان شخصی سازی بیشتری را به شما خواهند داد؛
یک مثال ساده از دستورهای بالا:
::-webkit-scrollbar {

 width: ۱۲px;
}
::-webkit-scrollbar-track {
 -webkit-box-shadow: inset ۰ ۰ ۶px rgba(۰,۰,۰,۰.۳);
 border-radius: ۱۰px;
}
::-webkit-scrollbar-thumb {
 border-radius: ۱۰px;
 -webkit-box-shadow: inset ۰ ۰ ۶px rgba(۰,۰,۰,۰.۵);
}

ممکن است به این مطالب نیز علاقمند باشید
۱ دیدگاه
  1. طراحی وب می‌گوید

    مطلب آموزشی جالبی بود ولی مزید امتنان خواهد بود اگر توضیحات بیشتری ارائه دهید.

ارسال یک پاسخ

آدرس ایمیل شما منتشر نخواهد شد.

اگر گردشگر خوبی در وب هستید حتما وب‌سایت‌هایی را دیده اید که ظاهر اسکرول بارشان متفاوت است و باعث شده به زیبایی سایت افزوده شود.