HTML: horizontal scrolling without a scollbar
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\". Check
-
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:
- Hide whichever scrollbar using another layer, you had to guess at dimensions per OS.
- Clip the scrollbar out by either using an outer wrapping parent with
overflow: hiddenorclip: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:
Useoverflow: hidden.- Use an
withscrolling="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: hiddenyou can use the first point I mention, which is usingoverflow: autobut 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:
The
.viewport-clipis used to hide away the unwanted scrollbars. We give.viewportan excessive extra height+30pxso 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
.viewportelement to restrict the viewable region, and it can still be scrolled using JavaScript:document.getElementById('viewport').scrollLeft =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.Update
My recent modifications are to be found in this fiddle.
http://jsfiddle.net/kdRJ7/
加载中...
- 热议问题