ince scroll bar yapmak html, css, js

Merhabalar, bu yazıda sizlere bir projede kullandığım ince güzel görünümlü scroll bar yapmayı göstereceğim. Normal scroll çirkin kaba durduğundan websitesine uygun olmadı o yüzden bu scrollu kullandım.  Ben tabloda kullandım siz istediğiniz yerde kullanırsınız. Basit olarak anlatıyorum.

  1. adım head kodları arasına aşağıdaki kütüphaneden  perfect-scroll.css, jquery ve perfec-scrollbarın js dosyalarını indirip projenize ekleyin. Hepsini head arasına ekleyin.   https://github.com/utatti/perfect-scrollbar     örnek görünüm şöyle olacak
    <link rel="stylesheet" type="text/css" href="css/perfect-scrollbar.css" />
     <script src="js/jquery-2.2.0.js"></script>
     <script src="js/perfect-scrollbar.jquery.js"></script>

    2. adım  scroll yapacağınız dive scroll-pane classını ekleyin

    <div class="row scroll-pane"> scroll olacak veriler  </div>

    3.adım js ile çalıştır

    <script type="text/javascript">
    $('.scroll-pane').perfectScrollbar();
    </script>

    4.adım  css işlemleri. Yükseklik belirtmek. Kaç px den sonra scroll olacağını belirtin.

     <style>
        .scroll-pane {
      
      height: 425px;
      margin: 50px auto 0 auto;
      position: relative;
      overflow: auto;
       border: 1px solid #CCC;
    }
         .ps-scrollbar-y{
            
         }
    
        </style>

    daha fazla kişiselleştirmek için kendi hazır ayarları var buradan merak edenler bakabilir https://github.com/utatti/perfect-scrollbar

Bir cevap yazın