چگونه اسکرول بار وب سایت را سفارشی سازی کنیم؟ در این آموزش از طریق سی اس اس می خواهیم سفارشی را بررسی نمایم.
چگونه اسکرول بار وب سایت را سفارشی سازی کنیم؟ در این آموزش از طریق سی اس اس می خواهیم سفارشی سازی اسکرول بار با webkit را بررسی نمایم.
شما می توانید از طریق کدهای CSS اسکرول بار یا نوار لغزنده وبسایت را سفارشی سازی نماید و هر قسمت را به دلخواه خود تغییر دهید. این قابلیت در طراحی وب سایت جلوه خاصی به ظاهر وبسایت می بخشد. در زیر بخش های مختلف اسکرول بار را شرح می دهیم.
در قسمت زیر بخش های مختلف از یک اسکرول بار را مشاهده می کنید که در کنار هر یک شماره ای وجو دارد.
::-webkit-scrollbar { /* 1 */ }
::-webkit-scrollbar-button { /* 2 */ }
::-webkit-scrollbar-track { /* 3 */ }
::-webkit-scrollbar-track-piece { /* 4 */ }
::-webkit-scrollbar-thumb { /* 5 */ }
::-webkit-scrollbar-corner { /* 6 */ }
::-webkit-resizer { /* 7 */ }
شماره ها برای قسمت های مختلف از اسکرول بار است که در تصویر زیر مشاهده می نماید.
برای مثال اگر بخواهید رنگ اسکرول را تغییر دهید از کد گزینه 5 استفاده می نماید و خصوصیت پس زمینه را مطابق با کد زیر به آن اضافه می نماید.
::webkit-scrollbar-thumb {
background: #000
}
تمامی کلاس های سلکتور اسکرول بار را در جدول زیر مشاهده نماید.
:horizontal :vertical :decrement :increment :start :end :double-button :single-button :no-button :corner-present :window-inactive
برای اعمال تغییرات بیشتر بر روی اسکرول بار می توانید مانند مثال زیر از کلاس سلکتور استفاده نماید.
::-webkit-scrollbar-track-piece:start {
/* Select the top half (or left half) or scrollbar track individually */
}
::-webkit-scrollbar-thumb:window-inactive {
/* Select the thumb when the browser window isn't in focus */
}
::-webkit-scrollbar-button:horizontal:decrement:hover {
/* Select the down or left scroll button when it's being hovered by the mouse */
}
برای تغییر خصوصیات هر بخش از اسکرول بار مطابق با تصاویر و کدهای فوق می توانید آنها را تغییر دهید.
منبع » آکادمی ایتروز
معرفی ابزار اضافه کردن خط فاصله به صورت آنلاین و رفتن به خط بعدی با توجه به کاراکتر مشخص شده می تواند نقطه, حروف باشد.
اگر می خواهید به تازگی زبان برنامه نویسی را شروع نماید سه تا از بهترین ها را به شما معرفی خواهیم کرد.
در چهار سال آینده، تأثیر ترامپ بر روابط بین المللی و رمز ارزها می‌تواند به شکل قابل توجهی تغییر کند.
تنها با یک کلیک بدانید آی پی شما چیست. برای اطلاع از اینکه چگونه می توان آی پی کامپیوتر, لپ تاپ یا گوشی را پیدا کنیم همراه ما باشید.
بررسی مهمترین عوامل و ۱۰ اشتباه رایج طراحی سایت که باعث از دست رفتن مشتری می‌شود و روش های رفع آنها.
اره خدمات طراحی سایت در ازبکستان توسط اولین پلتفرم جامع دیجیتال مارکتینگ در ایران متخصص طراحی انواع سایت های سفارشی و حرفه ای.
رشد کسب و کار از طریق فروشگاه آنلاین شامل موارد مختلفی است که آنها را بررسی خواهیم کرد چطور یک فروشگاه اینترنتی باعث رشد کسب و کار می‌شود؟
آموزش مشاهده پیشرفت پروژه های دیجیتال مارکتینگ در ایتروز به بررسی روند پس از سفارش تا پایان آن خواهیم پرداخت.
نظرات (0)