关于隐藏滚动条的问题（elemenui滚动条及浏览器滚动条）

一、问题再现

　　在用elementui写项目的时候，如果当前页面的内容超出了可视窗口就会出现滚动条，而浏览器又自带滚动条，这样的话就会出现两个或以上滚动条，如下图所示：

 

二、解决方案

1、添加<el-scroll></el-scroll>或者其他块级标签比如<div>包裹住你要滚动的部分

 2、设置滚动条的样式

//注意样式最好添加scoped，防止污染其他界面
::-webkit-scrollbar {
    //滚动条宽高，如果不需要显示滚动条可设置宽高为0
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-thumb {
    //滚动条颜色和圆角
  background-color: #dbd9d9;
  border-radius: 3px;
}

只需要设置::-webkit-scrollbar的样式就可以隐藏elementui的滚动条并且不会影响超出当前可视窗口内容的显示，差不多相当于不需要滚动条也可以滚动内容，

三、拓展

如何隐藏浏览器滚动条？

根据浏览器自适应原则，可用通过设置高度来隐藏浏览器自带的滚动条，当内容的高度小于页面可视高度（可通过document.documentElement.clientHeight获取）时就不会出现浏览器滚动条从而达到隐藏浏览器滚动条的目的。

 

 

 

 如果想缩放的时候也不出现浏览器滚动条，可以通过$nextTick的方法在界面重新渲染的时候重新计算高度,如下方式，这样怎么缩放都不会出现浏览器滚动条啦

 

四、效果图