Customize Scrollbar trình duyệt với CSS WebKit

Customize Scrollbar trình duyệt với CSS WebKit

Tùy chỉnh thanh cuộn trình duyệt đang trở nên phổ biến, và bạn có thể gặp những trang web có thanh cuộn độc đáo. Custom một thanh cuộn trong trang web của bạn có thể tạo sự ấn tượng về thiết kế của trang web bạn đối với người xem. Các bạn có thể dễ dàng tùy chỉnh thanh cuộn scrollbar với code CSS mà mình giới thiệu dưới đây. Bạn cũng có thể xem và tham khảo ngay trang của mình luôn nhé.

Tìm hiểu về webkit-scrollbar

-webkit-scrollbar bao gồm 7 phần tử khác nhau và cùng bao gồm một phần tử giao diện thanh cuộn đầy đủ:
::-webkit-scrollbar hình nền của chính thanh cuộn đó.
::-webkit-scrollbar-button các nút định hướng trên thanh cuộn.
::-webkit-scrollbar-track không gian trống bên dưới thanh tiến trình.
::-webkit-scrollbar-track-piece phần trên cùng của thanh tiến trình không bị che bởi ảnh thumb.
::-webkit-scrollbar-thumb phần tử cuộn có thể kéo để thay đổi kích cỡ.
::-webkit-scrollbar-corner góc dưới cùng của phần tử cuộn, nơi hai thanh cuộn gặp nhau.
::-webkit-resizer chỉnh sửa lại kích thước có thể kéo được xuất hiện phía trên thanh cuộn ở góc dưới cùng của một số phần tử.

Thực hành

Đầu tiên chúng ta tạo file HTML Document (index.html)
  
      <!DOCTYPE html>
  <html>
      <head>
          <meta charset="UTF-8" />
          <title>Customize the Browser's Scrollbar with CSS</title>
          <link type="text/css" rel="stylesheet" href="styles.css">
      </head>
      <body>
          <div class="scrollbar" id="style-1">
              <div class="force-overflow"></div>
          </div> 
      </body>
  </html>
    
  

Bạn cần include file styles.css vào file HTML.

CSS Stylesheet (style.css) Đầu tiên chúng ta đặt width, height, background-color cho class .scrollbar , sau đó đặt overflow-y: scroll để có được thanh cuộn dọc. chúng ta đặt min-height: 450px cho div .force-overflow để thanh cuộn xuất hiện (bởi vì chúng ta sử dụng thuộc tính overflow-y để cuộn trong class .scrollbar).
  
      .scrollbar {
      background-color: #F5F5F5;
      float: left;
      height: 300px;
      margin-bottom: 25px;
      margin-left: 22px;
      margin-top: 40px;
      width: 65px;
         overflow-y: scroll;
  }
  
  .force-overflow {
      min-height: 450px;
  }
    
  

Customize Scrollbar trình duyệt với CSS WebKit
Bây giờ, chúng ta sử dụng scrollbar pseudo-element để tùy chỉnh scrollbar của chúng ta. Thay thế chiều rộng mặc định của nó bằng 6px sau đó thêm màu nền background-color: #F5F5F5.
  
  #style-1::-webkit-scrollbar {
      width: 6px;
      background-color: #F5F5F5;
  } 
    
  

Chúng ta biết rằng scrollbar chứa track, button và thumb, bây giờ chúng ta sẽ style cho thumb. Ta dùng pseudo-element (ví dụ: ::-webkit-scrollbar-thumb) với webkit prefix và đặt màu nền scrollbar-thumb background- color.
  
  #style-1::-webkit-scrollbar-thumb {
      background-color: #000000;
  } 
    
  

Sau đó, thanh cuộn sẽ như thế này:
Customize Scrollbar trình duyệt với CSS WebKit
Chúng ta dùng box-shadow trên scrollbar-track để tạo phong cách và thêm sự tương phản giữa scrollbar và scrollbar-track.

  
  #style-1::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
      background-color: #F5F5F5;
  }
    
  

Customize Scrollbar trình duyệt với CSS WebKit

Phần riêng cho nền tảng Blogspot

Các bạn chỉ cần dán đoạn CSS dưới đây vào trước thẻ ]]></b:skin>
  
  ::-webkit-scrollbar{-webkit-appearance:none;width:4px;height:8px}::-webkit-scrollbar-track{background-color:inherit}::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.15);border-radius:10px}::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.45)}::-webkit-scrollbar-thumb:active{background-color:rgba(0,0,0,.45)}
    
  
Ngoài ra có thể tuỳ chỉnh theo ý thích của bạn như hướng dẫn trên, thay đổi color, thay đổi thuộc tính,... nhé!

Đọc thêm

5 nhận xét

  1. Mohammed Gulam Rabbi
    Nice Article Bro. How to Add New Multiple Users or Authors in Blogger.
  2. Lê Vạn Bảo Trọng
    Nice Article Bro. Customize Scrollbar browser with CSS WebKit.
  3. ashish
    Thanks to provide us this
    Top 10 games in the world
    Top 10 fastest cars in the world
    Top 10 army in the world
    Top 10 mobile brands in world
    Top 10 actors in the world
    Top 10 deadliest snakes in the world
    Top 10 beaches in the world
    Top 10 forex brokers in the world
    Top 10 companies in the world

Comments Facebook