是否可以在没有水平滚动条的情况下进行水平滚动。在Chrome中,它并不是很难,因为您可以使用“ overflow-y:hidden”隐藏滚动条。结帐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;
}
到目前为止,没有滚动条的漂亮的水平滚动条。但是,在IE9 / IE10中这不起作用。可能有其他解决方案解决此问题,或者我的CSS中缺少某些内容吗?
最佳答案
x和y中的溢出间隔只是最近的约定,之前没有办法单独禁用滚动条。但是,您有一些选择:
使用另一层隐藏任何滚动条,您都必须猜测每个OS的尺寸。
通过使用带有overflow: hidden
或clip:rect()
的外部包装父级来剪切滚动条。再次猜测尺寸,不理想。
从外观上看,您实际上并不需要滚动条,因此您有更多选择:
使用overflow: hidden
。
将<iframe />
与scrolling="no"
一起使用。
溢出
在您的情况下,使用“溢出:隐藏”可更改元素在水平方向上延伸的方式。为了解决这个问题,您需要计算希望连续显示的项目宽度的总和,并将其设置为包装父对象的宽度。
似乎隐藏的溢出实际上阻止了滚动发生,因此,我的记忆力一定是在我晚年的时候失败了。也许我以前曾经发誓,我想我对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
,因此无论操作系统如何,水平条都将被取出—滚动条那么厚会是一个奇怪的操作系统。这确实意味着您必须确保将可滚动内容的高度指定为高度,不能依赖任何高度百分比或其他任何内容。和以前一样,您仍然使用
.viewport
元素限制可见区域,并且仍然可以使用JavaScript滚动它:document.getElementById('viewport').scrollLeft = <pixel value here>
用户肯定可以使用他们拥有的任何人机界面设备,即鼠标滚轮,触摸设备;因为该区域只是普通的可滚动div。但是,您应该始终提供一些UI进行滚动,以防万一用户没有此选项。
iframe
另一种方法是使用iframe,在其中使用
scrolling="no"
禁用小节。这样做的好处是不需要知道内容的尺寸,但代价是必须处理iframe。<iframe src="contents-to-be-scrolled.html" scrolling="no" />
更新资料
我最近的修改可以在这个小提琴中找到。
http://jsfiddle.net/kdRJ7/
关于html - HTML:无滚动条的水平滚动,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/20409744/