現在部分瀏覽器已支持自定義滾動條，成了設計師和完美主義者的救星。 新版上線後，設計師又提了個新需求：把導航欄右側的滾動條，在不滾動時隱藏掉（同時還發了個小視頻表示效果）。就是下圖中右側的粗線： 在mac系統下測試了Chrome／Safari／Firefox瀏覽器，發現這些系統在預設情況下，不滾動時滾 ...
現在部分瀏覽器已支持自定義滾動條，成了設計師和完美主義者的救星。 新版上線後，設計師又提了個新需求：把導航欄右側的滾動條，在不滾動時隱藏掉（同時還發了個小視頻表示效果）。就是下圖中右側的粗線：
在mac系統下測試了Chrome／Safari／Firefox瀏覽器，發現這些系統在預設情況下，不滾動時滾動條是隱藏的。如下圖
原來是自定義滾動條屏蔽了系統的這一特性。
解決方案： 將外包裹層預設設置為overflow-y: hidden; 同時設置hover效果時overflow: auto; 如下：<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> .content{ width: 200px; height: 150px; padding-left: 10px; border: 1px solid #ccc; overflow-y: hidden; } .content:hover{ overflow-y: auto; } .scrollbar::-webkit-scrollbar { width: 2px; } .scrollbar::-webkit-scrollbar-track-piece { background-color: #fff; } /* 滾動條的內層滑軌背景顏色 */ .scrollbar::-webkit-scrollbar-track { background-color: #fff; } /* 滾動條的外層滑軌背景顏色 */ .scrollbar::-webkit-scrollbar-thumb { background-color: #d4d8e2; } /* 滾動條的內層滑塊顏色 */ .scrollbar::-webkit-scrollbar-button { background-color: #fff; display: none; } /* 滑軌兩頭的監聽按鈕顏色 */ </style> </head> <body> <div class="content scrollbar"> <p>內容1</p> <p>內容2</p> <p>內容3</p> <p>內容4</p> <p>內容5</p> <p>內容6</p> <p>內容7</p> </div> </body> </html>
