跳到主要内容位置

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%;
}

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
* {
padding: 0;
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

body {
overflow: hidden;
}

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

section {
width: 100%;
height: 100%;
display: grid;
place-items: center;
font-size: 4em;
color: white;
}

section:nth-child(1) {
background: hsl(210, 100%, 20%);
}
section:nth-child(2) {
background: hsl(250, 100%, 20%);
}
section:nth-child(3) {
background: hsl(300, 100%, 20%);
}
section:nth-child(4) {
background: hsl(350, 100%, 20%);
}
</style>
<title>CSS 隐藏滚动条</title>
</head>
<body>
<main>
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
</main>
</body>
</html>

使用 ::webkit-scrollbar

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


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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
* {
padding: 0;
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

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

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

section {
width: 100%;
height: 100%;
display: grid;
place-items: center;
font-size: 4em;
color: white;
}

section:nth-child(1) {
background: hsl(210, 100%, 20%);
}
section:nth-child(2) {
background: hsl(250, 100%, 20%);
}
section:nth-child(3) {
background: hsl(300, 100%, 20%);
}
section:nth-child(4) {
background: hsl(350, 100%, 20%);
}
</style>
<title>CSS 隐藏滚动条</title>
</head>
<body>
<main>
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
</main>
</body>
</html>

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

小结

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

提示

一系列的课程让你成为高级前端工程师。课程覆盖工作中所有常用的知识点和背后的使用逻辑,示例全部都为工作项目简化而来,学完即可直接上手开发!

即使你已经是高级前端工程师,在课程里也可能会发现新的知识点和技巧,让你的工作更加轻松!

《React 完全指南》课程,连载中现只需 48 元(领取优惠券)点击查看详情。

《Vue 3.x 全家桶完全指南与实战》课程,包括 Vue 3.x、TypeScript、Vue Router 4.x、Vuex 4.x 所有初级到高级的语法特性详解,让你完全胜任 Vue 前端开发的工作。点击查看详情。

《React即时通信UI实战》课程,利用 Storybook、Styled-components、React-Spring 打造属于自己的组件库。

《JavaScript 基础语法详解》本人所著图书,包含 JavaScript 全面的语法知识和新特性, 可在京东、当当、淘宝等各大电商购买