我遇到的场景：
对于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 自定义滚动条
原文地址：http://www.cnblogs.com/zuochengsi-9/p/7658339.html