1、<html>
<divid="root"style="width:100%height:100%">
<divclassName="outer-container">
<divclassname="inner-container">
<divclassName="container">
</div>
</div>
</div>
</div>
2、CSS：
.outer-container{
width:100%
height:100%
overflow:hidden
}
.inner-container{
width:100%
height:100%
overflow:auto
box-sizing:content-box
padding-right:17px
}
扩展资料：使用 overflow:hidden 隐藏滚动条，但存在的问题是页面或元素失去了滚动的特性，由于只需要兼容移动浏览器（Chrome和Safari）
应用如下CSS可以隐藏滚动条：
.element::-webkit-scrollbar{display:none}
如果要兼容PC其他浏览器（IE、Firefox等），在容器外面再嵌套一层 overflow:hidden 内部内容再限制尺寸和外部嵌套层一样，就变相隐藏了。
在需要的时候设置document.body.style="overflow:hidden"就行了
<button id="btn">隐藏
滚动条
</button>
<script>
document.
getelementbyId
("btn").addeventlistener("click",overflow_hidden)
function overflow_hidden()
{
document.body.style="overflow: hidden"
}
</script>如上就可以在点击按钮时隐藏滚动条了
相关css 代码如下：//强制显示滚动条:
html { overflow: scroll}
//强制隐藏滚动条:
html { overflow: hidden}
//隐藏IE的水平滚动条:
html { overflow-x: hidden}
//隐藏IE的垂直滚动条:
html { overflow-y: hidden}
//强制显示IE的水平滚动条:
html { overflow-x: scroll}
//强制显示IE的垂直滚动条:
html { overflow-y: scroll}
//强制显示Mozilla的水平滚动条:
html { overflow:-moz-scrollbars-horizontal}
//注意: 仅仅强制显示水平滚动条. 也就是说, 即使需要显示垂直滚动条时, 垂直滚动条也不会出现.
//强制显示Mozilla的垂直滚动条:
html { overflow:-moz-scrollbars-vertical}
//注意: 仅仅强制显示垂直滚动条. 也就是说, 即使需要显示水平滚动条时, 水平滚动条也不会出现.
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）