css 自定義滾動條
阿新 • • 發佈：2017-10-12
har scroll meta ram arr 底部 over con logs
我遇到的場景：
對於iframe窗口，自帶滾動條是整個窗口的大小。有時需要頂部或底部固定，則滾動條不應該觸碰到頂部或底部。
那麽首先打開iframe時應該去掉滾動條 scrolling="no"，然後在需要滾動的區域自定義滾動條。
<iframe frameborder="0" scrolling="no" src="index.html" >
自定義滾動條代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>滾動</title> <style> .scroll_contain{ overflow-y: scroll; border: none; } .scroll_config::-webkit-scrollbar {/*滾動條整體樣式*/ width:5px; height:5px } .scroll_config::-webkit-scrollbar-thumb {/*滾動條裏面小方塊*/ background-color:#ccc; border:solid 1px #ccc; border-radius:10px; } .scroll_config::-webkit-scrollbar-track {/*滾動條裏面軌道*/ -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); border-radius: 10px; background: #EDEDED; } .scroll_config::-webkit-scrollbar-arrow { color:#F00; background:#0F0; } </style> </head> <body> <div class="scroll_contain scroll_config" style="height: 200px;width: 200px"> <div> 東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗 東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗 東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗 東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗 東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗 東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗 東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗 東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗 東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗 東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗 東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗 東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗 </div> </div> </body> </html>
效果如下：
東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗 東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗 東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗 東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗 東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗 東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗 東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗 東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗 東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗 東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗 東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗 東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗上面出現橫向滾動條是因為博客園編輯源碼時不支持overflow-y:scroll，我改成了overflow:scroll的緣故。
需要註意是：只有在子容器的高度大於父容器高度時才會出現滾動條
css 自定義滾動條