隱藏多個滾動條CSS所有瀏覽器

我很難完成我想要做的事情，我開始懷疑它是否可能。基本上，我有三個divs，每個寬度取決於你徘徊在哪一個（簡單轉換）的寬度。這些divs的高度總是等於使用jQuery計算的瀏覽器窗口的100％高度。我使用overflow-y: scroll來完成可滾動內容的多個部分。然而，它看起來很笨拙，包括三個滾動條，所以我想擺脫他們。在Chrome上，這很簡單，我只使用::-webkit-scrollbar { display: none; }，但對於其他瀏覽器，它並不那麼簡單。其他問題回答說，我需要將我的內容封裝在一個具有overflow: hidden的div中，但如果沒有所有這些轉換完全失敗，我都無法完成這項工作。我想說的是demo。提前致謝！隱藏多個滾動條CSS所有瀏覽器

來源

2014-01-30 Chris

我認爲它看起來相當不錯，三個滾動條，並刪除它們只會傷害可用性。 – MightyPork

滾動條對我來說看起來不錯，除非你沒有什麼更重要的事情，否則不需要花時間在這個上。 – Huangism

只給予'overflow-y：scroll;'只在懸停和工作小提琴http://jsfiddle.net/wizam/9T7ex/2/ –

溢出-Y：隱藏將隱藏滾動條，如果你設置這個滾動的：懸停只有你仍然可以滾動每個面板，當用戶將鼠標懸停在它：

.panel { 
    overflow-y: hidden; 
} 
.panel:hover { 
    overflow-y: scroll; 
}

前面的例子中缺少默認是隱藏的，這將小號頂部面板滾動回頂部。

來源

2014-01-30 14:17:15 MarkLunney

這絕對是更好的..所以你不認爲有一種方法可以完全刪除它們嗎？ – Chris

用戶如何滾動沒有滾動條的框？就像前面提到的那樣，你可以嘗試用黑客來隱藏滾動條，但這對用戶來說不會太清楚。或者，您可以嘗試更多jQuery插件，例如http://naeka.github.io/jquery-scrollbar/，以獲得更微妙的滾動條。 – MarkLunney

可以顯示懸停

#container .display-panel:hover { 
    overflow-y: scroll; 
}

滾動條從顯示器面板卸下溢出-Y http://jsfiddle.net/9T7ex/1/

來源

2014-01-30 13:47:08 Huangism

不幸的是，當您停止在每個div上懸停時，這會將div內容重置爲頂部，但我確實喜歡這看起來好多了。 – Chris

容器可以有一個設定的高度嗎？ – Huangism

他們有，不是嗎？它們的高度總是設置在窗戶的高度。 – Chris

隱藏多個滾動條CSS所有瀏覽器

回答

相關問題