کد اسکرول بار جیمیل برای مرورگرهای 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 ( آدرس قدیم سایت بودش ! )
منبع انگلیسی آموزش و کدها
داداش برا فایرفاکس چیزی تو چنته داری ؟
سلام
خسته نباشید
ببخشید در مورد تغییر رنگش هم یه توضیحی می دادید …
سلام توی فایرفاکس نسخه 30 امتحان کردم نشدش…
داداش این کد واسه webkit ایجاد شده …
فایرفاکس از -moz- استفاده میکنه …
این کد روی chrome جواب میده
سلام
با تشکر از آموزش های خوبتون
من یه سئوالی داشتم اگه بخواهیم این کدها رو برایه فایرفاکس هم استفاده کنیم میشه یا نه؟
و اینکه رنگ اسکرول رو تو کدوم قسمت سی اس اس میشه تغییر داد
با تشکر
سلام اقای دکتر واقعا خسته نباشی از مطالبتون استفاده کردیم و خوشحالمون کردین واقعا عالی بودن.
ارش چطور تو وردپردیس فارسی رمزمو عوض کنم خیلی ضروریه ترخدا بگو!
:(
سلام اگر منظورتون وردپرس هستش ، باید تشریف ببرید به قسمت کاربران و شناسنامه شما و رمز عبورتون رو عوض کنید.