Last active
December 19, 2018 07:24
-
-
Save x0zh/d093baefd7265f81a67a797f16c78364 to your computer and use it in GitHub Desktop.
css 实现隐藏滚动条
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ```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> | |
| ``` |
mac 下不适用，当我不使用鼠标（只用触控板的时候）遮挡不住
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
通常滚动条的宽度是
17px, 这里设置scroll的宽度为520px，比wrap的宽度大20px， 这样滚动条就会被遮挡住。如果想要设置精确的宽度，可以使用js动态获取滚动条的宽度。