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?

Google Chrome, notice that I need to hide horizontal scroller — torayeff
– torayeff, Commented Mar 10, 2015 at 9:07

Sjors van Dongen · Accepted Answer · 2015-03-10 09:09:21Z

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

answered Mar 10, 2015 at 9:09

Sjors van Dongen

4903 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Hide horizontal scrollbar while being scrollable

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related