Làm đẹp thanh cuộn scrollbar chỉ bằng CSS

Tùy chỉnh làm đẹp thanh cuộn scrollbar sẽ làm cho một trang web nổi bật hơn, đẹp hơn. Hoàn toàn bằng CSS nên gần như không ảnh hướng tới tốc độc tải trang.

Nếu bạn không hiểu về CSS lắm thì mình có ghi chú sau các đoạn code cho bạn nào thích thì tùy chỉnh. Không thì nó sẽ ra thanh cuộn scrollbar giống trang này của mình.

Xem thêm: Cách thay đổi nội dung email thông báo từ wordpress

Có nhiều cách để làm đẹp thanh cuộn scrollbar. Bạn có thể dùng malihu jQuery plugin để có nhiều tùy chọn hơn hoặc với WordPress, bạn có thể tìm kiếm và cài đặt các plugin phù hợp.

Nhưng CSS rất đơn giản và cũng rất đẹp nếu bạn biết chút CSS.

Đầu tiên. Bạn copy đoạn code dưới.
Dán vào file Style.css của theme bạn đang sử dụng.
Lưu lại. Xóa Cache nếu cần. Truy cập lại trang lại xem được chưa.

body::-webkit-scrollbar {
  width: 14px;               /* Chiều rộng vùng chứa scrollbar */
}
body::-webkit-scrollbar-track {
  background: #ccc;        /* Màu nền ngoài của thanh scrollbar */
}
body::-webkit-scrollbar-thumb {
  background-color: #ffa500;    /* Màu của thanh cuộn (scroll thumb) */
  border-radius: 5px;       /* Bo góc scroll thumb */
  border: 2px solid #ccc;  /* Không hỗ trợ padding, margin, transition nên dùng viền cùng màu nên để padding scroll thumb */
}
body::-webkit-scrollbar-thumb:hover {
    background-color: #ff8000; /* Hiệu ứng di chuột đổi màu*/
}
body { /*cho Firefox*/
    scrollbar-width: thin;          /* "auto" hoặc "thin" */
    scrollbar-color: orange #ccc;   /* scroll thumb and track */
}

Vậy là xong.

Về cơ bản tùy chọn thanh cuộn scrollbar được hỗ trợ hầu hết trên tất cả các trình duyệt chính. Có thể kiểm tra trình duyệt hỗ trợ ở đây

Hy vọng bài viết giúp ích được cho bạn trong việc tùy chỉnh thiết kế theme của mình.