將滾動條隱藏在HTML頁面上

可使用CSS隱藏滾動條嗎？ 你會怎麼作？

---

#1樓

我只是覺得我會指出其餘人，閱讀這個問題，即在body元素上設置overflow: hidden （或overflow-y）不會爲我隱藏滾動條。

我不得不使用html元素。

---

#2樓

WebKit支持能夠用標準CSS規則隱藏的滾動條僞元素：

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

若是要隱藏全部滾動條，請使用

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

我不肯定要還原-確實能夠，可是可能有正確的方法：

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

固然，您始終可使用width: 0 ，而後可使用width: auto輕鬆地恢復它，可是我不喜歡濫用width來進行可見性調整。

Firefox 64如今默認狀況下支持實驗性scrollbar-width屬性 （63須要設置配置標誌）。 要在Firefox 64中隱藏滾動條：

#element {
    scrollbar-width: none;
}

要查看您當前的瀏覽器是否支持僞元素或scrollbar-width ，請嘗試如下代碼段：

.content { /* These rules create an artificially confined space, so we get a scrollbar that we can hide. They are not directly involved in hiding the scrollbar. */ border: 1px dashed gray; padding: .5em; white-space: pre-wrap; height: 5em; overflow-y: scroll; } .content { /* This is the magic bit for Firefox */ scrollbar-width: none; } .content::-webkit-scrollbar { /* This is the magic bit for WebKit */ display: none; }

<div class='content'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu urna et leo aliquet malesuada ut ac dolor. Fusce non arcu vel ligula fermentum sodales a quis sapien. Sed imperdiet justo sit amet venenatis egestas. Integer vitae tempor enim. In dapibus nisl sit amet purus congue tincidunt. Morbi tincidunt ut eros in rutrum. Sed quam erat, faucibus vel tempor et, elementum at tortor. Praesent ac libero at arcu eleifend mollis ut eget sapien. Duis placerat suscipit eros, eu tempor tellus facilisis a. Vivamus vulputate enim felis, a euismod diam elementum non. 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. Quisque nec magna erat. Phasellus vehicula porttitor nulla et dictum. Sed tincidunt scelerisque finibus. Maecenas consequat massa aliquam pretium volutpat. Duis elementum magna vel velit elementum, ut scelerisque odio faucibus. </div>

---

（請注意，這並非一個正確的答案，由於它也隱藏了水平條，但這就是我在Google指着我在這裏時要尋找的東西，所以我認爲我仍是會發布它。）

---

#3樓

若是您正在尋找隱藏移動設備滾動條的解決方案，請遵循Peter的回答 ！

這是一個jsfiddle ，它使用下面的解決方案隱藏水平滾動條。

.scroll-wrapper{
    overflow-x: scroll;
}
.scroll-wrapper::-webkit-scrollbar { 
    display: none; 
}

它已在裝有Android 4.0.4的三星平板電腦（冰淇淋三明治，在本機瀏覽器和Chrome中）和在裝有iOS 6的iPad（在Safari和Chrome中）進行了測試。

---

#4樓

除了彼得的答案：

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

對於Internet Explorer 10，這將相同：

#element {
      -ms-overflow-style: none;
 }

---

#5樓

若是您仍然感興趣，我想我爲您找到了一種解決方法。 這是個人第一週，但對我有用。

<div class="contentScroller">
    <div class="content">
    </div>
</div>

.contentScroller {overflow-y: auto; visibility: hidden;}
.content {visibility: visible;}