کد اسکرول بار جیمیل برای مرورگرهای webkit

حتما داخل سایت جیمیل دیدین که از یک اسکرول بار تقریبا خاکستری استفاده می کنه که ظاهر زیبا و ساده ای به سایت داده است.امروز شبیه این کد استایل اسکرول بار جیمیل برای مرورگرهای webkit رو براتون داخل سایت قرار دادیم تا ازش استفاده کنید.در انتهای نوشته هم فایل ضمیمه برای دانلود آماده کردیم.

کد استایل اسکرول بار جیمیل

اسکرول بار (scrollbar) چیست ؟

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

وب کیت (webkit) چیست ؟

طبق تعریف ویکی پدیا ، وب‌کیت (WebKit)‏  یک موتور چیدمان است که امکان نمایش دادن صفحه‌های وب را برای یک مرورگر وب فراهم می‌آورد.به زبون خودمونی وب کیت موتوری هستش که مرورگرها با اون کار می کنند تا صفحات وب سایت ها رو نشون ما بدند.

چه مرورگرهایی webkit هستند ؟

دو مرور گر معروف گوگل کروم و سافاری (safari) از موتور وب کیت استفاده می کنند برای همین کدهای زیر رو اگر در قالبتون قرار بدید فقط در این ۲ مرورگر به صورت پیشفرض اجرا می شوند ولی تداخلی و اشکالی برای مرورگر های دیگه بوجود نمیارد.(در مطالب گذشته سایت ۱۰ نکته و ترفند برای گوگل کروم قرار داده بودیم ) .

کد استایل اسکرول بار جیمیل برای مرورگرهای webkit

کد زیر را باید به فایل شیوه نامه (style.css) قالب خودتون اضافه کنید ، مکانش هم فرق نداره و بهتره به ابتدا یا انتها کدها اضافه کنید.بعضی اوقات ممکن هستش که قالب اصلا فایل استایل نداشته باشه که شیوه نامه ها ما بین دو تگ باز و بسته <head> و <head/> قرار دارند ، شما باید مثل سابق کدها رو به انتها اضافه کنید.

/******   Gmail style scrollbar  www.doctorwp.com  *********/
::-webkit-scrollbar {
 width: 12px
}
::-webkit-scrollbar-thumb {
 border-width: 1px 1px 1px 2px
}
::-webkit-scrollbar-track {
 border-width: 0
}
::-webkit-scrollbar {
 height: 16px;
 overflow: visible;
 width: 16px;
}
::-webkit-scrollbar-button {
 height: 0;
 width: 0;
}
::-webkit-scrollbar-track {
 background-clip: padding-box;
 border: solid transparent;
 border-width: 0 0 0 4px;
}
::-webkit-scrollbar-track:horizontal {
 border-width: 4px 0 0
}
::-webkit-scrollbar-track:hover {
 background-color: rgba(220,172,0,.05);
 box-shadow: inset 1px 0 0 rgba(220,172,0,.1);
}
::-webkit-scrollbar-track:horizontal:hover {
 box-shadow: inset 0 1px 0 rgba(220,172,0,.1)
}
::-webkit-scrollbar-track:active {
 background-color: rgba(220,172,0,.05);
 box-shadow: inset 1px 0 0 rgba(220,172,0,.14),inset -1px 0 0 rgba(220,172,0,.07);
}
::-webkit-scrollbar-track:horizontal:active {
 box-shadow: inset 0 1px 0 rgba(220,172,0,.14),inset 0 -1px 0 rgba(220,172,0,.07)
}
::-webkit-scrollbar-thumb {
 background-color: rgba(220,172,0,.2);
 background-clip: padding-box;
 border: solid transparent;
 border-width: 1px 1px 1px 6px;
 min-height: 28px;
 padding: 100px 0 0;
 box-shadow: inset 1px 1px 0 rgba(220,172,0,.1),inset 0 -1px 0 rgba(220,172,0,.07);
}
::-webkit-scrollbar-thumb:horizontal {
 border-width: 6px 1px 1px;
 padding: 0 0 0 100px;
 box-shadow: inset 1px 1px 0 rgba(220,172,0,.1),inset -1px 0 0 rgba(220,172,0,.07);
}
::-webkit-scrollbar-thumb:hover {
 background-color: rgba(220,172,0,.4);
 box-shadow: inset 1px 1px 1px rgba(220,172,0,.25);
}
::-webkit-scrollbar-thumb:active {
 background-color: rgba(220,172,0,0.5);
 box-shadow: inset 1px 1px 3px rgba(220,172,0,0.35);
}
::-webkit-scrollbar-track {
 border-width: 0 1px 0 6px
}
::-webkit-scrollbar-track:horizontal {
 border-width: 6px 0 1px
}
::-webkit-scrollbar-track:hover {
 background-color: rgba(220,172,0,.035);
 box-shadow: inset 1px 1px 0 rgba(220,172,0,.14),inset -1px -1px 0 rgba(220,172,0,.07);
}
::-webkit-scrollbar-thumb {
 border-width: 0 1px 0 6px
}
::-webkit-scrollbar-thumb:horizontal {
 border-width: 6px 0 1px
}
::-webkit-scrollbar-corner {
 background: transparent
}
body::-webkit-scrollbar-track-piece {
 background-clip: padding-box;
 background-color: #f5f5f5;
 border: solid #fff;
 border-width: 0 0 0 3px;
 box-shadow: inset 1px 0 0 rgba(220,172,0,.14),inset -1px 0 0 rgba(220,172,0,.07);
}
body::-webkit-scrollbar-track-piece:horizontal {
 border-width: 3px 0 0;
 box-shadow: inset 0 1px 0 rgba(220,172,0,.14),inset 0 -1px 0 rgba(220,172,0,.07);
}
body::-webkit-scrollbar-thumb {
 border-width: 1px 1px 1px 5px
}
body::-webkit-scrollbar-thumb:horizontal {
 border-width: 5px 1px 1px
}
body::-webkit-scrollbar-corner {
 background-clip: padding-box;
 background-color: #f5f5f5;
 border: solid #fff;
 border-width: 3px 0 0 3px;
 box-shadow: inset 1px 1px 0 rgba(220,172,0,.14);
}

دمو و دانلود کدهای اسکرول بار جیمیل

مشاهده دمو اسکرول بار

دانلود کدها و فایل ضمیمه

رمز فایل زیپ : www.picor.ir ( آدرس قدیم سایت بودش ! )

 

منبع انگلیسی آموزش و کدها

8 نظرات
  1. علی می گوید

    داداش برا فایرفاکس چیزی تو چنته داری ؟

  2. El می گوید

    سلام
    خسته نباشید
    ببخشید در مورد تغییر رنگش هم یه توضیحی می دادید …

  3. محمد حسین می گوید

    سلام توی فایرفاکس نسخه 30 امتحان کردم نشدش…

    1. mostafaznv می گوید

      داداش این کد واسه webkit ایجاد شده …
      فایرفاکس از -moz- استفاده میکنه …

      این کد روی chrome جواب میده

  4. شروین می گوید

    سلام
    با تشکر از آموزش های خوبتون
    من یه سئوالی داشتم اگه بخواهیم این کدها رو برایه فایرفاکس هم استفاده کنیم میشه یا نه؟
    و اینکه رنگ اسکرول رو تو کدوم قسمت سی اس اس میشه تغییر داد
    با تشکر

  5. الهه می گوید

    سلام اقای دکتر واقعا خسته نباشی از مطالبتون استفاده کردیم و خوشحالمون کردین واقعا عالی بودن.

  6. ناشناس می گوید

    ارش چطور تو وردپردیس فارسی رمزمو عوض کنم خیلی ضروریه ترخدا بگو!
    :(

    1. آرش حیدری می گوید

      سلام اگر منظورتون وردپرس هستش ، باید تشریف ببرید به قسمت کاربران و شناسنامه شما و رمز عبورتون رو عوض کنید.

ارسال یک پاسخ

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