آموزش style دادن به اسکرولبار Webkit

  • نویسنده موضوع erfan
  • تاریخ شروع

erfan

طراح وب
پرسنل مدیریت
تو این تاپیک قصد دارم روش style دادن به نوارپیمایش Webkit رو توضیح بدم با توجه به اینکه scrollbar قسمت های مختلفی داره ما باید selector های مربوطه رو داشته باشیم برای معرفی بهتر selector ها به تصویر زیر دقت کنید...

scrollbarparts.png


قسمت های شماره گذاری شده رو در کد های زیر بیابید...


کد:
::-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 */ }
حالا برای تست کار ما یک style اماده کردیم که به شرح زیر هستند:


کد:
::-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);  }
خروجی Webkit :

simplecustomscrollbar.png


امیدوارم مثل من هم از قابلیت های مفید CSS3 لذت برده باشید :67:

شاد و شنگول و سلامت باشی :|:|

 
بالا