Tùy chỉnh Scrollbar

Độ rộng

10px

Bo góc

6px

Màu nền (track)

#10161c

Màu thanh (thumb)

#34d399

Màu khi hover

#6ee7b7

CSS

/* 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;
}

Cuộn thử ở đây

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.