How to Hide Scrollbar Using CSS

There are several ways to hide the scrollbar using CSS, depending on whether you want to completely remove scrolling or just hide the visual appearance of the scrollbar.

Hide the Scrollbar but Keep Scrolling

To hide the scrollbar visually while still allowing scrolling:

/* For modern browsers */
.block {
  overflow: auto; /* or scroll */
  scrollbar-width: none; /* Firefox */
}

.block::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

Completely Disable Scrolling

If you want to disable scrolling entirely (and hide the scrollbar):

.block {
  overflow: hidden;
}

This method blocks both vertical and horizontal scrolling.

Hide Only Horizontal or Vertical Scrollbars

Only Horizontal:

.block {
  overflow-x: hidden;
}

Only Vertical:

.block {
  overflow-y: hidden;
}

For the Entire Page

To hide the scrollbar across the entire document:

html, body {
  overflow: hidden;
}

If you want the content to remain scrollable but just hide the scrollbar, use the first method.