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

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

12345 (No Ratings Yet)
Loading...
1

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

امروز قصد معرفی این دستور برای پلتفرم‌های وب‌کیت با دستور ::-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 */ }

scrollbarparts

: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);
}

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

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

ارسال یک پاسخ

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

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