css 自定義滾動條

時間 2019-11-20

標籤 css 自定義滾動條欄目 CSS 简体版

原文原文鏈接

我遇到的場景：html

對於iframe窗口，自帶滾動條是整個窗口的大小。有時須要頂部或底部固定，則滾動條不該該觸碰到頂部或底部。web

那麼首先打開iframe時應該去掉滾動條 scrolling="no"，而後在須要滾動的區域自定義滾動條。spa

<iframe frameborder="0"   scrolling="no" src="index.html" >

自定義滾動條代碼以下：code

<!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:2px;
    }
.scroll_config::-webkit-scrollbar-track {/*滾動條裏面軌道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 2px;
        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>

效果以下：htm

東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗

上面出現橫向滾動條是由於博客園編輯源碼時不支持overflow-y:scroll，我改爲了overflow:scroll的緣故。blog

須要注意是：只有在子容器的高度大於父容器高度時纔會出現滾動條iframe

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。