<!DOCTYPE html> <html> <head> <title>横向滑动</title> <style type="text/css"> .slide-box{ margin-top: 200px; display: -webkit-box; overflow-x: scroll; -webkit-overflow-scrolling:touch; } .slide-item{ 200px; height: 200px; border:1px solid #ccc; margin-right: 30px; } </style> </head> <body> <div class="slide-box"> <div class="slide-item"></div> <div class="slide-item"></div> <div class="slide-item"></div> <div class="slide-item"></div> <div class="slide-item"></div> </div> </body> </html>
==============================================
overflow:atuo;隐藏滚动条
动端页面为了更接近原生的体验,是否可以隐藏滚动条,同时又保证页面可以滚动?
使用 overflow:hidden 隐藏滚动条,但存在的问题是:页面或元素失去了滚动的特性。
由于只需要兼容移动浏览器(Chrome 和 Safari),于是想到了自定义滚动条的伪对象选择器
::-webkit-scrollbar。
- 1
应用如下 CSS 可以隐藏滚动条:
.element::-webkit-scrollbar {display:none}
- 1
如果要兼容 PC 其他浏览器(IE、Firefox 等),国外一位才人 John Kurlak 也研究出了一种办法。在容器外面再嵌套一层 overflow:hidden 内部内容再限制尺寸和外部嵌套层一样,就变相隐藏了。
-
<div class="outer-container">
-
<div class="inner-container">
-
<div class="content">
-
......
-
</div>
-
</div>
-
</div>
-
.outer-container,.content {
-
200px; height: 200px;
-
}
-
.outer-container {
-
position: relative;
-
overflow: hidden;
-
}
-
.inner-container {
-
position: absolute; left: 0;
-
overflow-x: hidden;
-
overflow-y: scroll;
-
}
-
-
/* for Chrome */
-
.inner-container::-webkit-scrollbar {
-
display: none;
-
}