Custom Scrollbar with CSS (WebKit)

Tutorial

::-webkit-scrollbar {
  height: 0.625rem; /* Horizontal scrollbar */
  width: 0.625rem; /* Vertical scrollbar */
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 100); /* Scrollbar thumb color */
}

::-webkit-scrollbar-track {
  background: rgba(241, 241, 241, 100); /* Scrollbar track color */
}

Explanation

• The ::-webkit-scrollbar pseudo-element targets the scrollbar itself, allowing you to define its dimensions.
• The ::-webkit-scrollbar-thumb pseudo-element styles the draggable portion of the scrollbar, allowing you to specify its background color.
• The ::-webkit-scrollbar-track pseudo-element styles the track over which the scrollbar thumb moves, allowing you to define its background color.

Considerations

• This CSS only applies to WebKit browsers, such as Safari and Chrome. Other browsers may not support these styles.
• Customizing scrollbars can enhance the visual appeal of your website but may not be compatible with all design aesthetics or accessibility requirements. Consider usability and accessibility when implementing custom scrollbar styles.

Conclusion

By following these CSS rules, you can easily customize the scrollbar appearance for WebKit browsers, enhancing the visual design of scrollable elements on your website. Experiment with different colors and dimensions to achieve the desired scrollbar style that complements your website's overall design.