HTML: horizontal scrolling without a scollbar

Question

Is it possible to do horizontal scrolling without a horizontal scrollbar. In Chrome its not very hard, because you can hide the scrollbar using "overflow-y: hidden". Checkout this jsfiddle.

Html:

<div id="main">
    <div id="myWorkContent">
        <a href="assets/work/1.jpg"><img src="assets/work/1.jpg" height="190" /></a>
        <a href="assets/work/2.jpg"><img src="assets/work/2.jpg" height="190" /></a>
        ...
    </div>
</div>

CSS:

#main {
    height: 210px;
    overflow:hidden;
}
#myWorkContent{
    width:530px;
    height:210px;
    border: 13px solid #bed5cd;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}
#myWorkContent a {
    display: inline;
}

So far a nice horizontal scroller without a scrollbar. However, in IE9/IE10 this doesn't work. Is there maybe an other solution for this problem or something missing in my css ?

Answer 1

The overflow separations in x and y are only a recent convention, prior to that there was no way to disable the scrollbars individually. You had a few options however:

1. Hide whichever scrollbar using another layer, you had to guess at dimensions per OS.
2. Clip the scrollbar out by either using an outer wrapping parent with overflow: hidden or clip:rect(). Again guessing dimensions, not ideal.

By the looks of things you don't actually require either scrollbar though, so you have a few more options:

1. Use overflow: hidden.
2. Use an <iframe /> with scrolling="no".

Overflow

In your case using `overflow: hidden` changes the way your elements extend across the horizontal. To get around this you need to calculate the sum of the widths of the items you wish to show in a row, and set this as the width of the wrapping parent.

It seems that hiding overflow actually prevents the scroll from happening what-so-ever, my memory must be failing in my old age. Could have sworn I used it previously, I guess I was relying on JavaScript more heavily that I'd thought.

So instead of using overflow: hidden you can use the first point I mention, which is using overflow: auto but you clip out the scroll bars. This can still require the need to calculate the dimensions of the horizontal parent:

Meaning:

[ [ 101px ] + [ 101px ] + [ 101px ] <-- wrapping parent would be 303px ]

But involves a slight modification of what I wrote before:

CSS:

.viewport-clip {
  width: 100px;
  height: 100px;
  overflow: hidden;
}

.viewport {
  width: 100px;
  height: 130px;
  overflow: auto;
  overflow-x: auto;
  overflow-y: hidden;
}

.horizontal {
  width: 303px;
  height: 130px;
}

.item {
  width: 100px;
  float: left;
  background: blue;
  margin-right: 1px;
  height: 100px;
}

Markup:

<div class="viewport-clip">
  <div class="viewport">
    <div class="horizontal">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </div>
</div>

The .viewport-clip is used to hide away the unwanted scrollbars. We give .viewport an excessive extra height +30px so that the horizontal bars will be taken out no matter the OS — It would be a strange OS to have scrollbars that thick. This does mean you have to make sure you give your scrollable content exacting heights, you can't rely on any height percentages or anything.

As before you still use the .viewport element to restrict the viewable region, and it can still be scrolled using JavaScript:

document.getElementById('viewport').scrollLeft = <pixel value here>

The user will definitely be able to use whatever human interface devices they have i.e. mousewheel, touch device; as the area is just a normal scrollable div. However you should always provide some UI to scroll just in case the user doesn't have this option.

Iframes

Another approach is to use an iframe, where you use scrolling="no" to disable the bars. This has the benefit of not needing to know the dimensions of your content, but comes at the price of having to deal with an iframe.

<iframe src="contents-to-be-scrolled.html" scrolling="no" />

Update

My recent modifications are to be found in this fiddle.

http://jsfiddle.net/kdRJ7/

Answer 2

By making the #myworkcontent div, you can lower the overflow, which will then be covered by your #main div. Then, you can just use a div with clever relative positioning and the same color to cover the white of #myworkcontent. You will also probably need to extend #myworkcontent's size so that #main can fit within it, but the overflow-y: hidden; property will keep things from getting messed up. Here's an updated Fiddle: http://jsfiddle.net/9QYJ2/4/

I only didn't add the cover div, didn't have time to incorporate that but I'm sure you're familiar with absolute and relative positioning, if not check out W3 schools, they have great tutorials!