HTML：无滚动条的水平滚动 [英] HTML: horizontal scrolling without a scollbar
问题描述
是否可以在没有水平滚动条的情况下进行水平滚动。在Chrome中它不是很难，因为你可以使用overflow-y：hidden来隐藏滚动条。结帐这个 jsfiddle。
Html：
< div id =main> ;
< div id =myWorkContent>
< a href =assets / work / 1.jpg>< img src =assets / work / 1.jpgheight =190/>< / a>
< a href =assets / work / 2.jpg>< img src =assets / work / 2.jpgheight =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;
}
目前为止，没有滚动条的水平滚动条很棒。但是，在IE9 / IE10中这是行不通的。有没有可能为这个问题的其他解决方案或缺少我的CSS？
在x和y的溢出分离只是最近的惯例，在此之前，没有办法单独禁用滚动条。然而，您有几个选择：
- 隐藏使用其他图层的滚动条，您必须猜测每个操作系统的尺寸。
- 通过使用带有
overflow：hidden或clip：rect（）。再次猜测尺寸，并不理想。
通过外观你并不需要滚动条，所以你有几个更多选项：
-
使用overflow：hidden。 - 将
< iframe />与滚动=noli>
溢出
在你的情况下，使用overflow：hidden会改变你的元素在水平方向上的延伸方式。为了解决这个问题，你需要计算你希望在一行中显示的项目宽度的总和，并将其设置为包装父项的宽度。
看起来，隐藏溢出实际上阻止了滚动的发生，我的内存必须失败我的晚年。可能发誓我之前使用过它，我想我更依赖于JavaScript，我曾想过。
因此，不要使用 overflow：hidden ，您可以使用我提到的第一点，即使用 overflow：auto 但你剪出滚动条。这仍然需要计算横向父级的维度：
含义：
[[101px] + [101px] + [101px]< - 包装父项为303px]
但涉及到我之前编写的内容的一些细微修改：
CSS：
.viewport-clip {
width：100px;
height：100px;
overflow：hidden;
}
.viewport {
width：100px;
height：130px;
溢出：auto;
overflow-x：auto;
overflow-y：hidden;
}
.horizontal {
width：303px;
height：130px;
}
.item {
width：100px;
float：left;
背景：蓝色;
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 ，这样无论操作系统如何，水平条都会被取出;这将是一个奇怪的操作系统，滚动条很厚。这意味着你必须确保你的滚动内容的高度，不能依赖任何高度百分比或任何东西。
像以前一样，你仍然使用 .viewport 元素来限制可视区域，它仍然可以使用JavaScript滚动：
document.getElementById（'viewport'）。scrollLeft =<这里的像素值>
用户一定能够使用他们拥有的任何人机界面设备，即鼠标滚轮，触控设备;因为该区域只是一个正常的可滚动div。但是，如果用户没有此选项，则应该始终提供一些滚动用户界面。
Iframes
另一种方法是使用iframe，您可以使用 scrolling =no禁用条形图。这样做的好处是不需要知道内容的尺寸，但是不得不处理iframe。
< iframe src =contents-to-be-scrolled.htmlscrolling =no/>
更新
我最近的修改可以在这个小提琴中找到。
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 ?
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
<iframe />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: 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.
这篇关于HTML：无滚动条的水平滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
