HTML: horizontal scrolling without scollbar

Question

Can I scroll horizontally without a horizontal scrollbar? In Chrome, this is not very difficult, because you can hide the scroll bar 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;
}

Still a good horizontal scroller with no scrollbar. However, in IE9 / IE10 this does not work. Is there any other solution for this problem, or is something missing in my CSS?

Answer 1

Separating overflows in x and y is only a recent convention before it was not possible to disable scrollbars individually. However, you had several options:

• , .
• overflow: hidden, clip:rect(). , .

, :

• overflow: hidden.
• <iframe /> scrolling="no".

`overflow: hidden ' , . , , , . >

, , , , , . , , , JavaScript, .

overflow: hidden , , overflow: auto, . :

:

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

, :

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;
}

:

<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>

.viewport-clip . .viewport +30px, OS — . , , , - .

, - .viewport, , JavaScript:

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

, , , , mousewheel, touch device; div. , .

Iframes

- iframe, scrolling="no" . , , iframe.

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

Update

.

http://jsfiddle.net/kdRJ7/

Answer 2

div #myworkcontent, , #main div. div , #myworkcontent. , #myworkcontent, #main , overflow-y: hidden; . Fiddle: http://jsfiddle.net/9QYJ2/4/

div, , , , W3, !