跳到主要内容位置

CSS 如何隐藏滚动条,但不影响内容滚动

峰华

使用 CSS 隐藏滚动条,如果直接使用 overflow: hidden 会导致内容不能滚动,要想使用 css 隐藏滚动条,但不影响内容滚动,这里有两种方法:

  • 使用 padding 把滚动条移出浏览器视口。
  • 使用 ::webkit-scrollbar 伪元素选择器(简单,但兼容性不好)。

下面分别来看一下这两种方法。

使用 padding

使用 css padding 来隐藏滚动条的原理是,把右侧 padding 间距设置为和操作系统滚动条宽度一样的数值,把滚动条挤出浏览器外,这样滚动条就不会出现在浏览器右侧了,并且也不会影响内容滚动。

例如,下面这段代码,main 元素为滚动容器,section 为滚动的元素:

<main>
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
</main>

要隐藏滚动条,

  • 我们先把 body 的滚动条隐藏,这样就不会有横向的滚动条了。
  • 然后把 main 元素的 overflow-y 设置为 scroll,让它可以垂直滚动。
  • 再把 main 元素的右侧间距 padding-right 设置为滚动条的宽度,这个根据操作系统会有不同,windows 下数值大一些。
body {
overflow: hidden;
}

main {
width: 100vw;
height: 100vh;
overflow-y: scroll;
padding-right: 7px;
}

section {
width: 100%;
height: 100%;
}

这样就实现了隐藏滚动条。

预览:

使用 ::webkit-scrollbar

第 2 种方式是使用 ::web-kit-scrollbar 伪元素选择器,不过这个选择器只在 webkit 核心的浏览器中有效,例如 Chrome、新 Edge、Safari 等。::web-kit-scrollbar 可以直接选择滚动条元素,把它的 display 属性设置为 none 就可以隐藏滚动条了:


::-webkit-scrollbar {
display: none;
}

main {
width: 100vw;
height: 100vh;
}

section {
width: 100%;
height: 100%;
}

预览:

可以看到这两种效果是一样的。

小结

好了,这个就是使用 CSS 隐藏滚动条的两种方式,你学会了吗?有帮助的话请记得收藏,或者分享到自己的微信上哦!