首頁 > 開發者 > JavaScript
不滾動時隱藏自訂捲軸，滾動自訂捲軸
原來是自訂捲軸屏蔽了系統的這一特性。
解決方案：將外包裹層預設設定為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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
