Hide scroll bar, but still be able to scroll

Masterclass in hiding scroll bars

Elegant fronts with nested divs

Nested divs can work wonders to give your scrollable content an elegant front. The trick is to hide the scrollbar within an overflow: hidden; parent div.

<div class="parent">
  <div class="child">
    <!-- It's like a Russian doll but less creepy -->
  </div>
</div>


.parent {
  overflow: hidden; /* Hide and seek champion */
  position: relative; /* Sets the stage for the child */
}

.child {
  overflow-y: scroll; /* The world is literally at your fingertips */
  margin-right: -17px; /* scrollbar-width? I don't know her */
  box-sizing: content-box; /* Keep the width pristine */
  height: 100%; /* Full height, like my ambition */
  position: absolute; /* Elvis has left the building (negates scrollbar width) */
}


One script to hide all scrollbars

When it comes to achieving universal scrollbar compatibility, our friend JavaScript is the way to go. A small JavaScript utility can help dynamically adjust the scrollbar offset to cater for different browser scrollbar widths:

function adjustScrollbarWidth(element) {
  // It's equivalent to getting a haircut to match your twin
  const scrollbarWidth = element.offsetWidth - element.clientWidth;
  element.style.marginRight = `-${scrollbarWidth}px`;
}

// Here's how you use it:
adjustScrollbarWidth(document.querySelector('.child'));


Test cross-browser compatibility to make sure your designs aren't making any browser jealous!

Polished looks with scrolling plugins

For a chic, polished look, try out the slim-scroll plugin on GitHub. It's like getting designer clothes for your scroll boxes:

<!-- Be a sport, let others admire your good taste -->
<script src="path-to-slim-scroll-plugin.js"></script>


Subtle fine-tuning with CSS

Not a fan of one-size-fits-all? Use advanced CSS pseudo-elements to personalize how scrollbars appear in different browsers:

/* For the free-spirited (WebKit) browsers */
.example::-webkit-scrollbar-thumb {
  background-color: darkgrey; /* What's wrong with a little color? */
  border-radius: 10px; /* A little roundness never hurt anyone */
}


One size fits all containers

Maintain uniform style across all types of devices with responsive design and adaptive container widths:

.parent {
  padding-right: 17px; /* An invisible safety cushion */
}

.child {
  margin-right: -17px; /* Hides the scrollbar */
}
