How to hide the scrollbar but keep scrolling?

Set scrollbar-width: none on the scrolling element. It's the standard property and works in current versions of all major browsers. Add a ::-webkit-scrollbar rule for older Chromium and Safari versions:

.chips {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.chips::-webkit-scrollbar {
  display: none;
}

The scrollbar is gone, but the element still scrolls with a trackpad, touch, the mouse wheel and the keyboard. If you support older browser versions, check Can I Use.

Don't confuse this with overflow: hidden. That clips the content and stops the user from scrolling it at all.

Hide it only where there's another cue

A scrollbar tells people there's more content. Without it, a row of chips can look complete. Hiding it is fine for horizontal carousels, filter chips and tab rows, where a half-visible item at the edge hints that the row continues. Don't hide the main page scrollbar or the scrollbar of a long vertical list.

Add another cue, such as arrow buttons or a fade at the edge:

.chips {
  mask-image: linear-gradient(
    to right,
    #000 calc(100% - 3rem),
    transparent
  );
}

Two accessibility details:

• With a regular mouse wheel on a desktop, a horizontal row without a scrollbar can only be scrolled with Shift + wheel, which most people don't know. Arrow buttons solve that.
• Keyboard users scroll the row by tabbing to the links or buttons inside it. If it contains nothing focusable, add tabindex="0" with role="region" and an aria-label, so it can be focused and scrolled with the arrow keys.

Prevent layout shift with scrollbar-gutter

A related problem: the page jumps sideways when a scrollbar appears, or when you lock scrolling behind a modal with overflow: hidden. scrollbar-gutter: stable reserves space for the scrollbar even when it isn't shown:

html {
  scrollbar-gutter: stable;
}

It only matters for classic scrollbars that take up space, like the default ones on Windows. Overlay scrollbars on phones, and on macOS when you use a trackpad, take no space, so there's nothing to reserve. Support is on Can I Use.

Style it instead of hiding it

A thin, subtle scrollbar is often a better compromise than none:

.sidebar {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #9ca3af transparent;
}

scrollbar-color takes the thumb color first and the track color second. Check Can I Use for Safari support.

In current Chromium browsers, setting scrollbar-width or scrollbar-color on an element turns off its ::-webkit-scrollbar styles. For hiding, that doesn't matter, because both rules in the first snippet do the same thing. For styling, pick one approach rather than expecting both to apply.