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