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

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

erfan

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



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


کد:
::-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 :



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

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