关于滚动条的设置
- 滚动条设置
overflow:scroll;
- 也可以单独对x和y设置滚动条
//隐藏x轴，显示Y轴滚动条
overflow-x:none;
overflow-y:scroll;
滚动条隐藏，且仍然有滚动功能
- 对于webkit内核可直接设置隐藏滚动条样式
element{
overflow-x:none;
overflow-y:scroll;
}
element::-webkit-scrollbar {
display: none;
}
- 对于IE浏览器，可以使用如下方法：
给需要滚动的内容content外加上两个容器
<div class="outer-container">
<div class="inner-container">
<div class="content">
......
</div>
</div>
</div>
结构如图
其中outer-container宽高和content一致（主要是宽度）
.outer-container,.content {
width: 200px; height: 200px;
}
对外部容器outer-container使用相对定位
对内部容器inner-container使用绝对定位，确保两个容器左侧对齐
.outer-container {
position: relative;
overflow: hidden;
}
.inner-container {
position: absolute;
left: 0;
}
对inner-container设置滚动条，且宽度大于外部滚动条
.inner-container {
width:110%;
overflow-x: hidden;
overflow-y: scroll;
}
此时因为外部容器将内部容器遮盖，页面中已经不显示滚动条，且仍然可以滚动。
