Skip to content

Instantly share code, notes, and snippets.

@x0zh
Last active December 19, 2018 07:24
Show Gist options
  • Save x0zh/d093baefd7265f81a67a797f16c78364 to your computer and use it in GitHub Desktop.
Save x0zh/d093baefd7265f81a67a797f16c78364 to your computer and use it in GitHub Desktop.
css 实现隐藏滚动条
```html
<!DOCTYPE html>
<html>
<head>
<title>CSS实现隐藏滚动条</title>
<meta charset="UTF-8">
<style type="text/css">
.wrap {
width: 500px;
height: 500px;
margin: 0 auto;
overflow: hidden;
}
.scroll {
width: 520px;
height: 500px;
overflow-y: scroll;
overflow-x: hidden;
background-color: #ccc;
}
.content {
width: 500px;
height: 1000px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="scroll">
<div class="content">
<p>wrap 相当于一个宽高固定的视窗,超出的内容都会被隐藏</p>
<p>scroll 用来滚动加载超出长度的内容,滚动条所在的位置被 wrap 遮挡住</p>
<p>content 内容区域的宽度和视窗一样,这样就不会出现内容被遮挡的情况,长度超出的内容能被 scroll 滚动加载出来。这样就实现了隐藏滚动条的效果。</p>
<p style="margin-top: 800px;text-align: right;">--end</p>
</div>
</div>
</div>
</body>
</html>
```
@x0zh
Copy link
Author

x0zh commented Nov 10, 2016

通常滚动条的宽度是 17px , 这里设置 scroll 的宽度为 520px ,比 wrap 的宽度大 20px, 这样滚动条就会被遮挡住。如果想要设置精确的宽度,可以使用 js 动态获取滚动条的宽度。

content 的宽度要和 wrap 保持一致,这样要展示的内容就不会被遮挡住。

@cqupt-yifanwu
Copy link

mac 下不适用,当我不使用鼠标(只用触控板的时候)遮挡不住

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment