Hide a horizontal scrollbar inside a div while being able to scroll

Question

I want to hide the horizontal scrollbar inside a div that's too wide, because it looks kinda ugly. I do still want to be able to scroll. Example:

enter image description here

My HTML:

<div class="nav">
  <span class="nav"><a class="nav-current" href="index.html">About me</a></span>
  <span class="nav"><a class="nav" href="biography.html">Biography</a></span>
  <span class="nav"><a class="nav" href="biography.html">Biography</a></span> <!-- Copied those to test the behaviour -->
  <span class="nav"><a class="nav" href="biography.html">Biography</a></span>
  <span class="nav"><a class="nav" href="biography.html">Biography</a></span>
</div>

The corresponding CSS:

div.nav {
  overflow-y: hidden;
  white-space: nowrap;
}

Could someone help me with this? Thanks in advance!

Can you point to a site that visually agrees with what you are trying to accomplish. Several folks here threw answers at you but it will help them if you provided a real time site with the end goal. — klewis

Alex Alex · Accepted Answer · 2015-02-22T21:00:11

The trick to hide a scroll bar is to use absolutely positioned elements.

Example:

<div class="scrollbar-hider-container">
    <div class="nav-container">    
        <div class="nav">
            <span class="nav"><a class="nav-current" href="index.html">About me</a></span>
            <span class="nav"><a class="nav" href="biography.html">Biography</a></span>
            <span class="nav"><a class="nav" href="biography.html">Biography</a></span> <!-- Copied those to test the behaviour -->
            <span class="nav"><a class="nav" href="biography.html">Biography</a></span>
            <span class="nav"><a class="nav" href="biography.html">Biography</a></span>
        </div>
    </div>
</div>

css:

.nav {
  white-space: nowrap;
}
.nav-container {
  position: absolute;
  top: 0;
  bottom: -30px;
  left: 0;
  right: 0;
  overflow-x: scroll;
}
.scrollbar-hider-container {
  overflow:hidden;
  position:relative;
}

For the best results you can calculate the actual height of the scrollbar used on the browser with js:

scrollBarWidth = function() {
        var scrollBarWidth = 0,
            scrollDiv = document.createElement('div');

        scrollDiv.className = 'scrollbar-measure';
        document.body.appendChild(scrollDiv);

        scrollBarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
        document.body.removeChild(scrollDiv);

        return scrollBarWidth;
    }

css:

.scrollbar-measure {
    width: 100px;
    height: 100px;
    overflow: scroll;
    position: absolute;
    top: -9999px;
}

with the scrollbar width you can then adjust the position of the scrolling element inside the div with the overflow hidden.

Hide a horizontal scrollbar inside a div while being able to scroll

4 Answers