Hide horizontal scrollbar while being scrollable

Question

This is my HTML:

<div class="photo-thumbnails">
    <div class="horizontal-scroll">
      {{#each photos}}
        <div class="inline">
          <a class="photo-link-{{../_id}}" href="{{src_big}}" data-imagelightbox="b" id="#imagelightbox">
            <img class="img-thumbnail {{../_id}}" src="{{src}}">
          </a> 
        </div>    
      {{/each}}
    </div>
  </div>

And this is CSS:

.photo-thumbnails {
}

.horizontal-scroll {
  overflow-x: auto;
  white-space: nowrap;
}

.inline {
  display: inline-block;
}

How can I hide horizontal scrollbar while being able to scroll?

Answer 1

You need to create an outer div which is less tall than the inner div.

.inner {
    position: absolute;
    width: 300px;
    overflow: scroll;
}

.inner p {
    width: 1000px;
}

.outer {
    display: block;
    position: relative;
    width: 300px;
    height: 110px;
    overflow: hidden;
}

Here is an jsfiddle example