Asghar Mashhadi
Asghar Mashhadi
خواندن ۲ دقیقه·۴ سال پیش

سفارش سازی اسکرول بار


سلام و خسته نباشید

در این پست قصد داریم تا با هم یک اسکرول بار با استفاده از css3 شخصی سازی کنیم و در ادامه سعی بر این شده که با توضیح کامل به شما این امکان را فراهم ساختیم که بر اساس علایق خود بتوانید اسکرول بار مناسب به ظاهر سایت خود طراحی کنید.

خب برای داشتن نوار اسکرول زیر اول باید عرضی براش مشخص کنیم، من رنگ خاکستری روشن ( f4f3f3 # ) روشنی هم بهش دادم.

::-webkit-scrollbar {
width:50px;
background-color:#f4f3f3;
}

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

::-webkit-scrollbar-track {
          box-shadow: inset 0px -1px 13px #fcfcfc;
          border-radius: 10px;
      }

در اخر نوبت قسمت متحرک نوار اسکرول 

::-webkit-scrollbar-thumb {
            background: #76818f;
            border-radius: 10px;
        }

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

نمونه هایی از اسکرول بار

https://codepen.io/GhostRider/pen/GHaFw#code-area


خب در ادامه قصد داریم یک اسکرول بار حرفه ای طراحی کنیم که قابلیت مخفی شدن را داشته باشد.

برای اینکه باید از یک کتابخانه‌ CSS ،JavaScript استفاده می کنیم. ( دانلود )

بعد از دانلود ابتدا فایل CSS ،JavaScript به صفحه اصلی خود اضافه می کنم.

<html >
     <head>
          <link href=&quotstyle/smooth-scrollbar.css&quot rel=&quotstylesheet&quot />
    </head>
    <body data-scrollbar tabindex=&quot1&quot>
                . . .

           <script src=&quotscript/smooth-scrollbar.js&quot>
           
                 Scrollbar.initAll();
          
    </body>
</html >

و کد css :

html {  height: 100%;  overflow: hidden; }
body {  height: 100%;  overflow-x: hidden  overflow-y: scroll;  width: 100%; }


امیدوارم از آموزش لذت برد باشید !

اسکرول بارCUSTOM SCROLL BAR
شاید از این پست‌ها خوشتان بیاید