纯css实现移动端横向滑动列表&&overflow:atuo;隐藏滚动条
<!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{ width: 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: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 {
width: 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;
}
- 上一篇 »移动端特殊css样式
- 下一篇 »JavaScript实现html购物车代码