On

Sometimes you may need to hide the scrollbar, then you can do it by simple CSS. Before reading the whole article see the Live Preview here in this page. This page has no scrollbar, but you can scroll. Now copy the URL and see again with other browsers.




CSS Code to hide the scrollbar while keeping the content scrollable

/* ===== Fully Hidden Scrollbar (Still Scrollable) ===== */
/* Firefox */
* {
  scrollbar-width: none; /* Hides scrollbar but keeps scrolling functional */
  scrollbar-color: transparent transparent;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 0px; /* Completely removes scrollbar */
}

*::-webkit-scrollbar-track {
  background: transparent; /* No track background */
}

*::-webkit-scrollbar-thumb {
  background-color: transparent; /* Fully hides scrollbar thumb */
  border-radius: 0px; /* No unnecessary styling */
}

/* ===== Fully Hidden Scrollbar (Still Scrollable) ===== */


Normally almost everyone use overflow: hidden or overflow: auto which is not important. If the page already has naturally scrollable content (e.g., long text, overflowing elements), this CSS will work without additional overflow properties.




When do we need overflow?

  • For a specific scrollable container:
    If you want only certain elements to have hidden scrollbars (not the entire page), you must ensure they can scroll by using overflow: auto; or overflow: scroll;

    .scrollable {
 overflow: auto; /* Ensures the div can scroll if content overflows */
 max-height: 300px; /* Example: restricts height to force scrolling */
}
.scrollable::-webkit-scrollbar {
 width: 0px; /* Hides scrollbar */
}

  • To Prevent Page Scrolling:
    If you want to disable scrolling entirely, then you use     overflow: hidden;

    body {
 overflow: hidden; /* Disables scrolling completely */
}



When should we use scroll:auto?

  • overflow: auto; only shows the scrollbar if needed (i.e., if content overflows).
  • overflow: scroll; forces the scrollbar to always appear (even if there’s no overflow).

So, in your case, you don't need to add them globally, but if you're targeting a specific scrollable area, use overflow: auto;.