css隐藏滚动条

简介：css隐藏滚动条并且不影响滚动效果

记录一下页面美化的过程，今天主要美化页面的滚动条。大家都知道html页面默认的滚动条比较丑，还特别暂用页面的空间，那有没有什么办法隐藏滚动条呢？

隐藏滚动条主要有两个方法：

• 计算滚动条的宽度，将滚动条平移到显示区域以外的地方
• 使用::-webkit-scrollbar隐藏滚动条

我之前在网上看到与人使用三个容器将其包裹起来，第二层的容器在使用webkit-scrollbar隐藏滚动条。这种方式我个人感觉有点多次一举，还不如直接使用-webkit-scrollbar进行隐藏。

接下来我们依次来看看具体的实现代码吧？

1.计算滚动条并隐藏

对于这个方法，我们将其分为两个部分，第一个就是html，如下所示：

<div class="container">
    <div class="sub-container">
        全面贯彻党的二十大精神开局之年，习近平总书记首次地方考察选择广东。这是新时代以来，总书记第四次考察广东，对改革开放“排头兵、先行地、实验区”的重视不言而喻。
    </div>
</div>

css部分如下所示：

.container{
    width: 100px;
    height: 200px;
    position: relative;
    overflow: hidden;
}
.sub-container{
    position: absolute;
    left: 0;
    top: 0;
    right: -17px;/*主要代码计算滚动条的宽度，将其平移到显示区域以外的地方*/
    bottom: 0;
    overflow-x: hidden;
    overflow-y: scroll; /* 允许垂直滚动*/
}

注意：顶层容器使用了overflow隐藏超出部分，内容容器使用了定位的方式向右平移了17个像素，这样就能实现隐藏滚动条的效果

2.使用::-webkit-scrollbar隐藏滚动条

顶层容器允许垂直滚动并使用webkit-scrollbar隐藏滚动条。但是这个方法有很多兼容性问题，尤其是IE浏览器，其他浏览器基本没问题

.container{
    width: 100px;
    height: 200px;
    overflow: auto;
}
/* 隐藏css代码 */
.container::-webkit-scrollbar {
    width: 0 !important; /* 设置滚动条的宽度为0或者使用下方代码直接不显示 */
    display:none;
}
/*IE 10+*/
.container{
    -ms-overflow-style: none;
}
/*Firefox*/
.container{
    overflow: -moz-scrollbars-none;
}

 

如果大家有更好的方法或者写的不对的地方可以在我的公众号留言，我会及时更新本文章内容。