آموزش جامع سئو

سئو (بهينه‌سازي موتور جستجو) به معناي فريب و يا دستکاري موتور‌هاي جستجو با روش‌هاي غير اخلاقي نيست. آن‌ها براي کمک کردن به بهبود رويت و ارتباط وب سايت‌ها در نتايج جستجوي طبيعي با هدف رسيدن به رتبه‌بندي بالا، ايجاد شده‌اند.

در این دوره شما از صفر تا سطح پیشرفته سئو را آموزش خواهید دید تا بتوانید در موتورهای جستجو در بهترین جایگاه ها دیده شوید.

ادامه مطلب ...

ساخت اسکرول بار سفارشی در CSS

جمعه 11 مهر 1399

در این مقاله یاد خواهید گرفت که چطور با نوشتن سه خط کد CSS می توانید اسکرول بار وب سایت خود را مانند Mac OS کنید.

ساخت اسکرول بار سفارشی در CSS

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

 

شروع کنید

برای سفارشی سازی (customize) اسکرول بار وبسایت خود، کافیه چند خط کد را به فایل css اضافه کنید. برای سفارشی سازی حتی نیاز به جاوا اسکریپت هم ندارید! 
کد زیر، کد CSS را برای سفارشی کردن اسکرول بار مرورگر وب نشان می دهد.

/* Customize website's scrollbar like Mac OS
.
Not supports in Firefox and IE */

/* total width */
body::-webkit-scrollbar {
    background-color: #fff;
    width: 16px;
}

/* background of the scrollbar except button or resizer */
body::-webkit-scrollbar-track {
    background-color: #fff;
}

/* scrollbar itself */
body::-webkit-scrollbar-thumb {
    background-color: #babac0;
    border-radius: 16px;
    border: 4px solid #fff;
}

 

توجه

سفارشی کردن اسکرول بار مرورگر وب، روش استانداردی برای استایل دهی نیست، بنابراین برای استفاده از pseudo-element های بالا باید از پیشوند، --webkit-- استفاده کنید.
فقط مرورگرهای Webkit (به عنوان مثال Chrome ، Safari) از این ویژگی ها پشتیبانی می کنند.
مرورگرهای دیگری مانند Firefox یا IE از این روش پشتیبانی نمی کنند.

 

Pseudo-Element ها

برای سفارشی کردن اسکرول بار مرورگر وب می توانید از 7 pseudo-element مختلف استفاده کنید.
کد زیر را مشاهده کنید:

::-webkit-scrollbar				{/* 1. entire scrollbar scope */}
::-webkit-scrollbar-button		{/* 2. directional buttons at the top and bottom of the scrollbar */}
::-webkit-scrollbar-track		{/* 3. space below the scrollbar */}
::-webkit-scrollbar-track-piece	{/* 4. not covered area by the scrollbar-thumb */}
::-webkit-scrollbar-thumb		{/* 5. draggable scrollbar itself */}
::-webkit-resizer				{/* 6. the draggable resizing handle that appears at the bottom corner of some elements */}
::-webkit-scrollbar-corner		{/* 7. the bottom corner of the scrollbar, where both horizontal and vertical scrollbars meet */}

 

1. محدوده کل اسکرول بار

2. دکمه های جهت دار در بالا و پایین اسکرول بار

3. مسیر اسکرول بار (فضای زیر اسکرول بار)

4. توسط scrollbar-thumb پوشانده نشده است

5. خود اسکرول بار

6. دسته تغییر اندازه قابل جمع شدن که در گوشه پایین برخی از عناصر ظاهر می شود

7. گوشه پایین نوار پیمایش ، جایی که هر دو نوار پیمایش افقی و عمودی بهم می پیوندند

 

من در این آموزش کوتاه از این خاصیت ها استفاده کردم:

::-webkit-scrollbar
::-webkit-scrollbar-track
::-webkit-scrollbar-thumb

 

برای کسب اطلاعات بیشتر میتوانید به این لینک مراجعه کنید.

فایل های ضمیمه

مهدی نیسی

نویسنده 1 مقاله در برنامه نویسان

کاربرانی که از نویسنده این مقاله تشکر کرده اند

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید

نظرات کاربران