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 内部内容再限制尺寸和外部嵌套层一样，就变相隐藏了。
当前的项目遇到了这个问题， 当打开dialog的时候，希望主页面的滚动条不要滚动。 一番搜索之后，发现大家的解决办法分为两种。一种就是隐藏滚动条 ，但是这样的话，前台页面会因为滚动条的隐藏和出现而发生宽度的变化。 这就使得每次一打开dialog页面就会伸缩。十分难受。第二种 就是不知道从哪儿抄的这种方法。一番修改之后，我也没好用。 最后 终于在外网找到个完美解决方案。 根据需求自行修改。 *（在scrollTo方法中，最好加上behavior:'instant'）目前本方法只在webkit内核浏览器中有效(Chrome,Safari)。可以用JS做渐变的隐藏滚动条特效，依旧可以滚动。你可以在JS里面写判定当用户鼠标不动一定时间然后消失。我对JS不是特别了解(只能看懂和修改JS代码的程度的能力，但是无论任何JS代码都敢修改的程度)，这效果能做出来的，我就不贴具体代码了。
不需要嵌套，纯原生。将来浏览器会支持这个效果的。
