是否可以在没有水平滚动条的情况下进行水平滚动。在 Chrome 中这并不难，因为你可以使用“overflow-y:hidden”隐藏滚动条。查看this http://jsfiddle.net/9QYJ2/3/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;
}
到目前为止，这是一个不错的水平滚动条，没有滚动条。但是，在 IE9/IE10 中这不起作用。是否有其他解决方案可以解决此问题或我的 css 中缺少某些内容？
x 和 y 中的溢出分隔只是最近的约定，在此之前没有办法单独禁用滚动条。不过，您有几个选择：
- 使用另一层隐藏哪个滚动条，您必须猜测每个操作系统的尺寸。
- 通过使用外包装父级将滚动条剪掉
overflow: hidden or clip:rect()。再次猜测尺寸，并不理想。
从表面上看，您实际上并不需要任何一个滚动条，因此您还有更多选择：
Use overflow: hidden.- 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.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
