網頁基本結構：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>測試滾動條</title> <style type="text/css"> </style> </head> <body> <div class="list"> <div class="list-item">測試列表測試列表測試列表</div> <div class="list-item">測試列表測試列表測試列表</div> <div class="list-item">測試列表測試列表測試列表</div> <div class="list-item">測試列表測試列表測試列表</div> <div class="list-item">測試列表測試列表測試列表</div> <div class="list-item">測試列表測試列表測試列表</div> <div class="list-item">測試列表測試列表測試列表</div> <div class="list-item">測試列表測試列表測試列表</div> <div class="list-item">測試列表測試列表測試列表</div> <div class="list-item">測試列表測試列表測試列表</div> <div class="list-item">測試列表測試列表測試列表</div> </div> </body> </html>
1、實現鼠標移入顯示滾動條，鼠標移出隱藏滾動條：
.list {
width: 100px;
height: 200px;
overflow: hidden;
border: 1px solid blue;
padding-right: 20px; // 防止滾動條遮擋內容
}
.list:hover {
overflow-y: auto;
}
效果如下：
2、修復滾動條在顯示和隱藏時對頁面布局的影響：
.list,.list-item {
width: 100px; /* 新增代碼，只要把這兩個元素設置成同一寬度即可 */
}
.list {
width: 100px;
height: 200px;
overflow: hidden;
border: 1px solid blue;
padding-right: 20px; /* 防止滾動條遮擋內容 */
}
.list:hover {
overflow-y: auto;
}
效果如下：
