اسکرولبارها عناصر رابط کاربری هستند که به کاربران اجازه می‌دهند تا در محتواهای بلند که به طور کامل در داخل ناحیه قابل مشاهده نمی‌گنجند، حرکت کنند. آن‌ها از نوارهای عمودی یا افقی با یک بند قابل جابجایی تشکیل شده‌اند که به کاربران امکان می‌دهند محتوا را به سمت بالا و پایین یا چپ و راست حرکت دهند.
مهم است که استایل اسکرولبارهای خود را در مرورگرها و دستگاه‌های مختلف تست کنید تا مطمئن شوید که به عنوان انتظار کار می‌کند. نحوه استایل دهی به اسکرولبارها:
۱. یک عنصر نگهدارنده مانند div ایجاد کنید تا محتوا و اسکرولبار را در خود نگه دارد.
۲. ارتفاع عنصر نگهدارنده را به یک مقدار ثابت تنظیم کنید.
۳. ویژگی overflow: auto را به عنصر نگهدارنده اضافه کنید تا اسکرولبار را فعال کنید.
۴. از عنصر مجازی :-webkit-scrollbar برای استایل دهی به اسکرولبار استفاده کنید.
۵. اسکرولبارها را با استفاده از ویژگی‌های CSS (عرض، ارتفاع، رنگ پس زمینه، حاشیه، شعاع حاشیه) سفارشی‌سازی کنید.
مثال ساده
این مثال نحوه ایجاد یک اسکرولبار ابتدایی با استفاده از عنصر مجازی CSS -webkit-scrollbar را نشان می‌دهد:
<html>
<head>
<style>
div {
width: 370px;
height: 120px;
scrollbar-color: #8b8484 #ddd;
scroll-margin-block-end: 20px;
background-color: #F1EFB0;
overflow: auto;
}
div::-webkit-scrollbar {
width: 15px;
}
div::-webkit-scrollbar-track {
background: #f1f1f1;
}
div::-webkit-scrollbar-thumb {
background: #888;
}
div::-webkit-scrollbar-thumb:hover {
background: #555;
}
h3 {
color: #DC4299;
}
</style>
</head>
<body>
<div>
<h3>Scrollbars using -webkit-scrollbar</h3>
This block includes a large amount of content to demonstrate how scrollbars work when there is an overflow within an element box.
They consist of vertical or horizontal bars with a draggable thumb, enabling users to move the content up and down or left to right.
</div>
</body>
</html>
این کد CSS و HTML یک عنصر div با یک اسکرولبار عمودی نمایش می‌دهد. عنصر div دارای یک ارتفاع و عرض ثابت است. ویژگی overflow: auto آن را از اسکرولبار فعال می‌کند. با استفاده از عنصر مجازی -webkit-scrollbar و قوانین CSS مربوط به آن، اسکرولبار طراحی شده است.
این مثال نشان می‌دهد که چگونه می‌توان از عنصر مجازی -webkit-scrollbar در CSS برای سفارشی‌سازی ظاهر اسکرولبارها با اضافه کردن رنگ، عرض، حاشیه و شعاع حاشیه استفاده کرد:
<html>
<head>
<style>
div {
width: 370px;
height: 120px;
background-color: #F1EFB0;
overflow: auto;
}
div::-webkit-scrollbar {
width: 15px;
}
div::-webkit-scrollbar-track {
background: #90e9e4;
}
div::-webkit-scrollbar-thumb {
background: #e77f7f;
border-radius: 10px;
border: 3px solid yellow;
}
div::-webkit-scrollbar-thumb:hover {
background: #da3e3e;
}
.heading{
color: #DC4299;
text-align: center;
}
</style>
</head>
<body>
<div>
<h3 class="heading">Scrollbars using -webkit-scrollbar</h3>
This block includes a large amount of content to demonstrate how scrollbars work when there is an overflow within an element box.
They consist of vertical or horizontal bars with a draggable thumb, enabling users to move the content up and down or left to right.
</div>
</body>
</html>
در این کد، اسکرولبار دارای ظاهری سفارشی شده است. رنگ پیش‌زمینه، رنگ زمینه، عرض، و شعاع حاشیه اسکرولبار تنظیم شده‌اند تا با استفاده از ویژگی‌های CSS مربوط به عنصر مجازی -webkit-scrollbar تعیین شوند.
ویژگی‌های مرتبط
در زیر لیستی از ویژگی‌های CSS مرتبط با اسکرولبار آورده شده است:
overflow-block: تعیین می‌کند که محتوای یک عنصر چگونه عمل می‌کند زمانی که برای جا نشدن درون ظرفش، بیش از حد عریض است.overflow-inline: تعیین می‌کند که محتوا چگونه نمایش داده می‌شود زمانی که از لبه‌های چپ و راست عنصر بیرون می‌رود.overflow-x: نمایش محتوای بیش از حد در جهت افقی.overflow-y: نمایش محتوای بیش از حد در جهت عمودی.overflow: نمایش محتوای بیش از حد در جهت عمودی.overflow-clip-margin: تعیین می‌کند که چه مقداری از محتوای یک عنصر می‌تواند قبل از بریده شدن از جعبه خود، بیرون برود.scrollbar-color: تنظیم رنگ اسکرولبار.scrollbar-width: تنظیم عرض اسکرولبار.scrollbar-gutter: برای اختصاص فضا برای اسکرولبار.scroll-behavior: برای اطمینان از حرکت اسموت هنگامی که کاربر بر روی یک پیوند کلیک می‌کند یا از یک صفحه می‌پردازد.scroll-margin: تعریف حاشیه یک عنصر در داخل منطقه اسنپ.scroll-padding: تعریف حاشیه یک عنصر در داخل منطقه اسنپ.scroll-snap-align: مشخص می‌کند چگونه یک عنصر باید در داخل ظرفیت اسکرول خود قرار بگیرد.scroll-snap-stop: برای متوقف کردن ظرفیت اسکرول در نقاط اسنپ.scroll-snap-type: مشخص می‌کند چگونه ظرفیت اسکرول به مواقع اسنپ می‌پیوندد.:-webkit-scrollbar: برای استایل دهی به اسکرولبار به روش‌های مختلف.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام