無法隱藏垂直滾動條

我有一段文字，我希望能夠滾動而不顯示垂直滾動條。我跟着這個，但沒有用，文本滾動，但滾動條仍然可見。 Hide scroll bar, but while still being able to scroll 無法隱藏垂直滾動條

#activity_parent { 
    height: 100%; 
    width: 100%; 
    overflow: hidden; 
} 

#activity_child { 
    width: 100%; 
    height: 100%; 
    overflow-y: scroll; 
    padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */ 
} 


<html> 
    <body> 
    <div id="activity_parent"> 
     <div id="activity_child"> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     good<br/>bye. 
     </div> 
    </div> 
    </body> 
</html>

來源

2017-08-26 Dercni

那是因爲你正在使用'高度; 100％'在父元素上，這意味着它將擴展以適應內容的全部高度。您將需要聲明一個值，該值不受**內容高度的影響：它是'25％'，一個視口單位，一個固定像素/ em/rem/pt值。如果你說，設置父高度爲200px，你會看到它的工作。 – Terry

嗨特里，使用50％仍然顯示滾動條。爲什麼這個工作與高度：100％？ http://jsfiddle.net/5GCsJ/954/ – Dercni

是什麼瀏覽器你，因爲測試代碼後，垂直滾動條沒有顯示在這裏工作。

更妙的是放置一個style標籤內的CSS如下圖所示

<html> 
    <style> 
    #activity_parent { 
    height: 100%; 
    width: 100%; 
    overflow: hidden; 
    } 

    #activity_child { 
    width: 100%; 
    height: 100%; 
    overflow-y: scroll; 
    padding-right: 17px; /* Increase/decrease this value for cross-browser 
    compatibility */ 
    } 
    </style> 
    <body> 
    <div id="activity_parent"> 
     <div id="activity_child"> 
    <!-- you content goes here --> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     good<br/>bye. 
     </div> 
     </div> 
     </body> 
    </html>

來源

2017-08-26 23:53:29 dfemo

感謝特里，作爲一個獨立的文件工作:)在我的Rails應用程序中，沒有內聯樣式的同一個HTML仍然顯示垂直滾動條。我已經檢查過，同樣的css被應用於div，但是也有其他的css，所以有些東西必須是衝突的。 – Dercni

好吧，看起來像有問題的CSS是「框大小：邊框;」同時適用於父母和子女。我不知道這是從哪裏來的，但是當我取消選中滾動條時。 – Dercni

無法隱藏垂直滾動條

回答

相關問題