隐藏HTML页面上的滚动条

Question

隐藏HTML页面上的滚动条

CSS可以用来隐藏滚动条吗？你会怎么做？

Answer 1

集overflow: hidden;尸体标签上这样的：<style&nbsp;type="text/css">body&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;overflow:hidden;}</style>上面的代码同时隐藏了水平滚动条和垂直滚动条。如果你想藏起来只有垂直滚动条，使用overflow-y:<style&nbsp;type="text/css">body&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;overflow-y:hidden;}</style>如果你想藏起来只有水平滚动条，使用overflow-x:<style&nbsp;type="text/css">body&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;overflow-x:hidden;}</style>更新：我的意思是隐藏，抱歉，刚刚醒来：-)注意：它还将禁用滚动功能。如果您只想隐藏滚动条，但不想滚动功能，请参阅下面的答案。

Answer 2

WebKit支持用标准CSS规则隐藏的滚动条伪元素：#element::-webkit-scrollbar&nbsp;{&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;none;&nbsp;}如果希望隐藏所有滚动条，请使用::-webkit-scrollbar&nbsp;{&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;none;&nbsp;}我不确定是否恢复-这确实奏效了，但也许有一个正确的方法：::-webkit-scrollbar&nbsp;{&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;block;&nbsp;}你当然可以用width: 0，可以很容易地用width: auto，但我不喜欢滥用width为了能见度的调整。更新：Firefox 64现在支持实验性的滚动条宽度属性默认情况下(63需要设置配置标志)。若要在FF 64中隐藏滚动条，请执行以下操作：#element&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;scrollbar-width:&nbsp;none;}查看当前浏览器是否支持伪元素或scrollbar-width，试试这个片段：.content {&nbsp; /* These rules create an artificially confined space, so we get&nbsp;&nbsp; &nbsp; &nbsp;a scrollbar that we can hide. They are not directly involved in&nbsp;&nbsp; &nbsp; &nbsp;hiding the scrollbar. */&nbsp; border: 1px dashed gray;&nbsp; padding: .5em;&nbsp;&nbsp;&nbsp; white-space: pre-wrap;&nbsp; height: 5em;&nbsp; overflow-y: scroll;}.content {&nbsp; /* This is the magic bit for Firefox */&nbsp; scrollbar-width: none;}.content::-webkit-scrollbar {&nbsp;&nbsp; /* This is the magic bit for WebKit */&nbsp; display: none;}<div class='content'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris euurna et leo aliquet malesuada ut ac dolor. Fusce non arcu vel ligulafermentum sodales a quis sapien. Sed imperdiet justo sit amet venenatisegestas. Integer vitae tempor enim. In dapibus nisl sit amet purus conguetincidunt. Morbi tincidunt ut eros in rutrum. Sed quam erat, faucibusvel tempor et, elementum at tortor. Praesent ac libero at arcu eleifendmollis ut eget sapien. Duis placerat suscipit eros, eu tempor tellusfacilisis a. Vivamus vulputate enim felis, a euismod diam elementumnon. Duis efficitur ac elit non placerat. Integer porta viverra nunc,sed semper ipsum. Nam laoreet libero lacus.Sed sit amet tincidunt felis. Sed imperdiet, nunc ut porta elementum,eros mi egestas nibh, facilisis rutrum sapien dolor quis justo. Quisquenec magna erat. Phasellus vehicula porttitor nulla et dictum. Sedtincidunt scelerisque finibus. Maecenas consequat massa aliquam pretiumvolutpat. Duis elementum magna vel velit elementum, ut scelerisqueodio faucibus.</div>(请注意，对于这个问题，这并不是一个正确的答案，因为它也隐藏了水平栏，但这正是我在Google这里指向我时所要寻找的，所以我想我还是会把它发出去的。)