浏览器隐藏滚动条

Posted by CodingWithAlice on October 11, 2024

浏览器隐藏滚动条

只要网页内容大于视窗,滚动条就会出现。

目标:没有滚动条 影响美观,但仍旧可以滚动

方法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;
}