浏览器隐藏滚动条
只要网页内容大于视窗,滚动条就会出现。
目标:没有滚动条 影响美观,但仍旧可以滚动
方法1:在webkit内核的浏览器里可以定义滚动条样式,在CSS初始处定义
--Chrome--
body::-webkit-scrollbar{ display:none;}
--IE/Edge--
body{ -ms-overflow-style: none;}
--Firefox--
html {
overflow: -moz-hidden-unscrollable; /*注意!若只打 hidden,chrome 的其它 hidden 会出问题*/
height: 100%;
}
body {
height: 100%;
width: calc(100vw + 18px); /*浏览器滚动条的长度大约是 18px*/
overflow: auto;
}
方法2:在div外面再套一个div,内层是有滚动条的,但是我们看不到了
外面的div设置overflow:hidden;
里面的div设置 overflow-y: scroll;overflow-x: hidden;
再设置外层div的width小于内层div的width。
<div class="outer">
<div class="inner">
</div>
</div>
.outer{
overflow:hidden;
width:200px;
}
.inner{
overflow-y:scroll;
overflow-x:hidden;
width:220px;
}