چرتک بلاگ

سلام دوستان امیدوارم که حالتون خوب باشه. امروز قراره یاد بگیریم که چطور برای وبلاگ و یا وبسایتمون یا یک قسمتی از صفحه یک اسکرول‌بار سفارشی بسازیم. اگر نمیدونین، اسکرول‌بار همون چیز مستطیل شکل زشت خاکستری رنگ هست که سمت راست صفحه رو گرفته و میشه باهاش توی صفحه بالا و پایین رفت. و امروز قراره خوشگلش کنیم :) اونم نه به کمک جاوا اسکریپت بلکه تنها به کمک CSS. یعنی اگر توی بلاگ بیان وبلاگی دارین می‌تونین بدون خرید امکان جاوا اسکریپت همین حالا اسکرول‌بار وبلاگتون رو تغییر بدین. 

اول از همه به سراغ ابزارهای موجود برای ساخت اسکرول‌بار سفارشی میریم (چون اینو میدونم بعضیا علاقه‌ای به کدنویسی و این چیزا ندارن) بعدش به بررسی کدها می‌پردازیم.

W3 Generator

اولین سایت برای ساخت اسکرول‌بار سفارشی w3 Generator هستش. اگر به سایت برین دو تا تب میبینین که یکیش thumb هست و برای سفارشی سازی دسته اسکرول‌بار هست (همونیکه نسبت به بدنه تیره‌تر هستش) و تب track هستش که برای سفارشی‌سازی بدنه اسکرول‌بار هستش. توی هر تب می‌تونین چیزهای مختلف رو تغییر بدین و همزمان ببینین که نتیجه کار چه شکلی میشه.

توی قسمت thumb، تب dimension برای ضخامت اسکرول‌بار، تب color برای رنگ، hover-color برای زمانیکه موستون رو بر روی اسکرول‌بار می‌برین و border هم برای حاشیه اسکرول بار هستش (برای گرد کردن اسکرول‌بار باید radius رو از این قسمت بیشتر کنین). 

توی قسمت track هم تنها چیزی که جدیده inset-shadow هست که میتونین باهاش داخل اسکرول‌بار سایه بندازین.

امکان جالبی که این سایت داره اینه میتونین از گرادیانت‌ها هم توی اسکرول‌بارتون استفاده کنین. یعنی کافیه مثلا به سربرگ color برین و یک رنگ جدید اضافه کنین تا اسکرول‌بارهای جذاب‌تری بسازین.

قسمت save template برای زمانی هستش که می‌خواین کد اسکرول‌بار رو با فرد دیگه به اشتراک بزارین یا در قالب آدرس ذخیره کنین. 

توی همون صفحه یک قسمت جالب دیگه به اسم Templates هست که قالب‌های آماده برای اسکرول‌بار هستن و میتونین اونا رو انتخاب کنین و به دلخواه از بالا تغییرشون بدین.

در نهایت بعد اینکه اسکرول‌بارتون رو ساختین میتونین به قسمت code بیاین و روی دکمه css بزنین تا کد css رو بگیرین. حالا چطور از این کد استفاده کنیم؟

استفاده از کد در بلاگ بیان

اگر قصد دارین فقط اسکرول‌بار کل صفحه رو تغییر بدین پیشنهاد میدم قبل از هر :: یک body بنویسین که فقط اسکرول‌بار صفحه تغییر داده بشه (و مثلا اسکرول بار قسمت نظرات مثل قبل بمونه) برای اینکه یک قسمت خاص رو هدف قرار بدین کافیه از سلکتورهای css استفاده کنین.

بعدش کافیه به قسمت قالب، ویرایش css قالب فعلی برین و کد رو آخر همه کدها جاگذاری کنین و روی دکمه ذخیره بزنین. کار تمومه!

پشتیبانی از فایرفاکس

نکته‌ای که در مورد این روش هست اینه که این کد فقط روی مرورگرهایی کار میکنه که از webkit استفاده می‌کنن (مرورگرهای کروم، سافاری، اوپرا، سامسونگ و اندروید ویو) و این ترفند روی مرورگرهای فایرفاکس و اینترنت اکسپلورر (لعنت الله علیه!) و نسخه‌های قبل 79 ادج کار نمیکنه. برای فایرفاکس 64 به بعد یک روشی هست که میتونین فقط رنگ اسکرول‌بار رو تغییر بدین. مثلا اگر قصد دارین اسکرول‌بار اصلی صفحه‌تون رو تغییر بدین باید کد زیر رو به فایل css اضافه کنین:

html {
scrollbar-color: rebeccapurple green;
}

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

بررسی بیشتر کد

این کد رو در نظر بگیرین:

body::-webkit-scrollbar{
width: 12px;
}

body::-webkit-scrollbar-thumb{
background: radial-gradient(circle, #05A571 0%,#267F62 100%);
border-radius: 4px;
}

body::-webkit-scrollbar-thumb:hover{
background: radial-gradient(circle, #A3A3A3 0%,#858585 100%);
}

body::-webkit-scrollbar-track{
background: #282726;
border-radius: 0px;
box-shadow: inset 0px 0px 0px 0px #F0F0F0;
} 

اگر به دستورات نگاه کنین متوجه میشین که تماما دستورات css معمولی هستش که تو بقیه جاها استفاده میکنیم و چیز جدیدی وجود نداره. اما باید توجه کنین که نمیشه از هر دستوری استفاده کرد. برای مثال نمیتونین به دسته اسکرول‌بار خصوصیت margin بدین (که از حاشیه‌ها فاصله بگیره. فرقی نمیکنه استفاده از padding توی track هم برای این هدف کار نمیکنه)

اما یک روش جالب برای دور زدن این کار وجود داره. شما میتونین به اسکرول‌بارتون خصوصیت box-sizing: border-box; بدین تا اندازه کلی اسکرول‌بار به همراه حاشیه حساب بشه و اون border که برای دسته اسکرول‌بار تعریف کردین داخلش بیوفته. بعدش کافیه برای خود دسته اسکرول‌بار یک حاشیه نامرئی بسازین و با استفاده از دستور background-clip: content-box;  بگین که تنها بک گراند رو برای قسمتی نشون بده که محتوا داره (قسمتی که حاشیه هست رو نادیده بگیره) و اینطوری میتونین اطراف دسته اسکرول‌بار فاصله بندازین. کد کامل اینطوری میشه:

body::-webkit-scrollbar{
/* add box sizing */ 
box-sizing : border-box ;
width: 12px;
}

body::-webkit-scrollbar-thumb{
background: radial-gradient(circle, #05A571 0%,#267F62 100%);
/* adding invisible border and background clip */
border: 2px solid transparent ;
background-clip:content-box;
border-radius: 4px;
}

body::-webkit-scrollbar-thumb:hover{
background: radial-gradient(circle, #A3A3A3 0%,#858585 100%);
/* adding background clip */
background-clip:content-box;
}

body::-webkit-scrollbar-track{
background: #282726;
border-radius: 0px;
box-shadow: inset 0px 0px 0px 0px #F0F0F0;
}

فقط به ترتیب کدها دقت کنین که background-clip بعد از background باشه و هر جایی که تغییر دادین این خصوصیت رو هم بهش اضافه کنین (من جمله زمانی که ماوس بر روش میره یا همون :hover). برای اطلاعات بیشتر میتونین این مقاله رو بخونین

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

این بود آموزش ساخت اسکرول‌باری سفارشی برای وبلاگ. قرار بود خودم برای ابزارش کدنویسی کنم ولی خدا رو شکر قبلا یکی زحمتش رو کشیده :) تنبل هم خودتونین :)) امیدوارم که براتون مفید بوده باشه و لذت برده باشین.