Định dạng & web

Tùy chỉnh Scrollbar

Thiết kế thanh cuộn riêng với xem trước trực tiếp — xuất CSS cho cả Chrome/Safari (webkit) và Firefox.

Đầu vào

Độ rộng

10px

Bo góc

6px

Màu nền (track)

#10161c

Màu thanh (thumb)

#34d399

Màu khi hover

#6ee7b7

1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cuộn để xem thanh cuộn tùy chỉnh của bạn hoạt động.

2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cuộn để xem thanh cuộn tùy chỉnh của bạn hoạt động.

3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cuộn để xem thanh cuộn tùy chỉnh của bạn hoạt động.

4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cuộn để xem thanh cuộn tùy chỉnh của bạn hoạt động.

5. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cuộn để xem thanh cuộn tùy chỉnh của bạn hoạt động.

6. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cuộn để xem thanh cuộn tùy chỉnh của bạn hoạt động.

7. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cuộn để xem thanh cuộn tùy chỉnh của bạn hoạt động.

8. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cuộn để xem thanh cuộn tùy chỉnh của bạn hoạt động.

9. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cuộn để xem thanh cuộn tùy chỉnh của bạn hoạt động.

10. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cuộn để xem thanh cuộn tùy chỉnh của bạn hoạt động.

11. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cuộn để xem thanh cuộn tùy chỉnh của bạn hoạt động.

12. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cuộn để xem thanh cuộn tùy chỉnh của bạn hoạt động.

13. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cuộn để xem thanh cuộn tùy chỉnh của bạn hoạt động.

14. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cuộn để xem thanh cuộn tùy chỉnh của bạn hoạt động.

15. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cuộn để xem thanh cuộn tùy chỉnh của bạn hoạt động.

16. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cuộn để xem thanh cuộn tùy chỉnh của bạn hoạt động.

17. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cuộn để xem thanh cuộn tùy chỉnh của bạn hoạt động.

18. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cuộn để xem thanh cuộn tùy chỉnh của bạn hoạt động.

19. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cuộn để xem thanh cuộn tùy chỉnh của bạn hoạt động.

20. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cuộn để xem thanh cuộn tùy chỉnh của bạn hoạt động.

21. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cuộn để xem thanh cuộn tùy chỉnh của bạn hoạt động.

22. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cuộn để xem thanh cuộn tùy chỉnh của bạn hoạt động.

23. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cuộn để xem thanh cuộn tùy chỉnh của bạn hoạt động.

24. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cuộn để xem thanh cuộn tùy chỉnh của bạn hoạt động.

Kết quả

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #34d399 #10161c;
}

/* Chrome / Edge / Safari */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: #10161c;
}
*::-webkit-scrollbar-thumb {
  background: #34d399;
  border-radius: 6px;
}
*::-webkit-scrollbar-thumb:hover {
  background: #6ee7b7;
}

Công cụ cùng nhóm

Web & marketing

Tùy chỉnh Scrollbar

Công cụ cùng nhóm

IP của tôi là gì?

Tạo URL chiến dịch

Tạo Meta Tag