Disable vertical scroll bar on div overflow: auto

css

responsive-design

best-practices

cross-browser-compatibility

byAlex Kataev·Nov 20, 2024

To hide the vertical scrollbar in a div that has overflow: auto, implement specific CSS rules for various browsers. For WebKit-based browsers such as Chrome, Safari, and Edge: ::-webkit-scrollbar { display: none; }. Firefox requires: scrollbar-width: none;. These rule sets keep contents scrollable with mouse wheel or touch gestures, yet the scollbars stay hidden.

/* For WebKit browsers */
.div-no-scrollbar::-webkit-scrollbar {
  display: none; /* "Now you see me, now you don't" */
}

/* For Firefox */
.div-no-scrollbar {
  scrollbar-width: none; /* "Gone with the wind" */
}

Assign the class .div-no-scrollbar to the relevant div. This keeps the scroll function sans the scrollbar visual.

Setting Directional Overflow

If your design demands a horizontal scrollbar, but the vertical one to remain hidden, apply overflow-x:auto; overflow-y:hidden;. This ensures content can scroll horizontally when required, without triggering a vertical scrollbar.

.div-horizontal-scrollbar {
  overflow-x: auto; /* Horizontal scrolling on demand */
  overflow-y: hidden; /* Hiding vertical scrolling, playing hide-and-seek here */
}

For older versions like Internet Explorer 8, it becomes emissary to use -ms-overflow-style: scrollbar; to maintain compatibility. The horizontal scrollbar could leave some bare whitespace underneath. To make up for it, add padding-bottom to your div.

.div-horizontal-scrollbar {
  padding-bottom: 17px; /* A little cushion for the scroll-pushin' */
}

Firefox and Gecko-based browsers need another compatibility touch: overflow: -moz-scrollbars-vertical;.

Single-line Scroll Control

Dancing with the CSS shorthand can simplify scenarios, {overflow: auto hidden;} is one such step. It enables horizontal scrolling while keeping the vertical scrollbar hidden.

.div-horizontal-scrollbar {
  overflow: auto hidden; /* On the go for horizontal, playing stealth for vertical */
}

It becomes crucial to run cross-browser tests to ensure your work is mirrored across platforms. Keep up with the newest standards to maintain cross-browser compatibility.

Adapting with Overflow

Enhancing UX, use media queries to adapt scroll bars in harmony with various devices or orientations.

@media screen and (max-width: 768px) {
  .div-horizontal-scrollbar {
    overflow-x: scroll; /* Small screens see horizontal scrollbar always */
  }
}

In cases where a fixed height or width on a div is set, it's essential to manage overflow behavior to keep scrolling under check.

.div-fixed-size {
  width: 300px; /* Fixed width, like my diet */
  height: 150px; /* Fixed height, unlike my diet */
  overflow-x: auto; /* Horizontally scrollable */
  overflow-y: hidden; /* Vertically, we're grounded */
}