How to style scrollbars and custom scroll snapping

· Category: HTML & CSS

Short answer

Use ::-webkit-scrollbar for custom scrollbar styling and scroll-snap-type with scroll-snap-align to create scrollable sections that lock into place.

Steps

  1. Style the scrollbar track and thumb with pseudo-elements.
  2. Set scroll-snap-type: x mandatory on the container.
  3. Set scroll-snap-align: start on child items.

Example

.container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}

.item {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

Tips

  • Use scroll-padding to account for fixed headers.
  • Prefer scroll-behavior: smooth for animated scrolling.
  • Test on touch devices; snap behavior can vary.