مرجع مقالات کاربردی حوزه اپلیکیشن

در‌این نوشته‌علمی خواهید آموخت که چطور با طراحی اپلیکیشن در مشهد تایپ کردن سه خط کد CSS می‌توانید اسکرول توشه تارنما خویش را مانند Mac Operating System نمائید.

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

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

/* Customize website's scrollbar like Mac سیستم عامل
.
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

برای استحصال داده ها بیشتر می توانید به‌این پیوند مراجعه‌کنید.