我遇到的场景：

对于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: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>

效果如下：

东方不败东方不败东方不败东方不败东方不败东方不败 东方不败东方不败东方不败东方不败东方不败东方不败 东方不败东方不败东方不败东方不败东方不败东方不败 东方不败东方不败东方不败东方不败东方不败东方不败 东方不败东方不败东方不败东方不败东方不败东方不败 东方不败东方不败东方不败东方不败东方不败东方不败 东方不败东方不败东方不败东方不败东方不败东方不败 东方不败东方不败东方不败东方不败东方不败东方不败 东方不败东方不败东方不败东方不败东方不败东方不败 东方不败东方不败东方不败东方不败东方不败东方不败 东方不败东方不败东方不败东方不败东方不败东方不败 东方不败东方不败东方不败东方不败东方不败东方不败

上面出现横向滚动条是因为博客园编辑源码时不支持overflow-y:scroll，我改成了overflow:scroll的缘故。

需要注意是：只有在子容器的高度大于父容器高度时才会出现滚动条

css 自定义滚动条的更多相关文章

  1. css自定义滚动条

    有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了.那webkit浏览器是如何自定义滚动条的呢? 前言 ...

  2. CSS自定义滚动条样式

    原文地址:http://www.qianduan.net/css-custom-scroll-bar-style/ 相信很多人都遇到过在设计中自定义滚动条样式的情景,之前我都是努力说服设计师接受浏览器 ...

  3. jquery自定义滚动条 鼠标移入或滚轮时显示 鼠标离开或悬停超时时隐藏

    一.需求: 我需要做一个多媒体播放页面,左侧为播放列表,右侧为播放器.为了避免系统滚动条把列表和播放器隔断开,左侧列表的滚动条需要自定义,并且滚动停止和鼠标离开时要隐藏掉. 二.他山之石: 案例来自h ...

  4. 使用css实现无滚动条滚动+使用插件自定义滚动条样式

    使用css实现无滚动条滚动,摘抄自:曹小萌博客 使用css实现无滚动条滚动,大体思路是在div外面再套一个div.这个div设置overflow:hidden.而内容div设置 overflow-x: ...

  5. css和js实现硬件加速渲染自定义滚动条

    听别人说用CSS的变换来实现渲染有硬件加速的效果,看到很多大网站都开始陆续使用上了,我也来说说怎么做,我这边实现的滚动条有自然滚动效果,看起来比较自然,说的再多不如直接写,让我们开始吧! 我们需要自己 ...

  6. css中渐变的分割线和自定义滚动条样式

    css中渐变的分隔线: <div style="background:linear-gradient(to left,#efefef,#b6b6b6,#efefef);height:1 ...

  7. 自定义滚动条样式纯（css）

    啥都不说先看图: 注: 只适合chrom,不适用IE和fireFox 下面展示代码: <html lang="en"> <head> <meta ch ...

  8. CSS3自定义滚动条样式 -webkit-scrollbar(转)

    有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了.那webkit浏览器是如何自定义滚动条的呢? 前言 ...

  9. 自定义滚动条 - mCustomScrollbar

    项目中需要使用自定义滚动条,但是试用了很多都功能不够全,今天发现一个比较全而且用法很简单的 -- mCustomScrollbar http://manos.malihu.gr/jquery-cust ...

随机推荐

  1. Hadoop源码分析之数据节点的握手，注册，上报数据块和心跳

    转自:http://www.it165.net/admin/html/201402/2382.html 在上一篇文章Hadoop源码分析之DataNode的启动与停止中分析了DataNode节点的启动 ...

  2. 人脸验证算法Joint Bayesian详解及实现(Matlab)

    python http://blog.csdn.net/cyh_24/article/details/49059475 github https://github.com/johnnyconstant ...

  3. YII2与Thinkphp整合阿里云OSS

    前言: 如果上传的文件都和网站程序源代码放在一起:那是有相当多的弊端的: 1:静态文件会占用大量带宽: 2:服务器的成本略高: 常规的做法是把php源代码放到一台服务器上:图片等静态文件放在另一台服务 ...

  4. UEditor API 文档

    来源:http://www.e4dai.com/ueditor-api/#ue.editor http://www.e4dai.com/ueditor-api/ UE.Editor 依赖 editor ...

  5. 修改Apache访问权限

    You don't have permission to access / on this server.错误,居然说我此台服务器上无权限,ok解决办法如下: 找到:apache文件,进入conf文件 ...

  6. WPF 在TextBox失去焦点时检测数据，出错重新获得焦点解决办法

    WPF 在TextBox失去焦点时检测数据,出错重新获得焦点解决办法 在WPF的TextBox的LostFocus事件中直接使用Focus()方法会出现死循环的问题 正确的使用方式有2中方法: 方法一 ...

  7. LeetCode 125 Valid Palindrome（有效回文）（*）

    翻译 给定一个字符串.确定它是否是回文的,仅仅考虑当中的数字和字符并忽略其它. 比如. "A man, a plan, a canal: Panama" 是回文的. "r ...

  8. ios开发之--使用AFNetWorking 3.1.0 ，简单的请求封装类

    从苹果系统自带的请求类,到ASIHttpRequest第三方请求类,再到AFNetWorking第三方请求类,目前只要牵扯到数据请求,基本上都是用AFN,所以,这里纯粹是记录下: hRequestTo ...

  9. ORA-12899: value too large for column

    ORA-12899: value too large for column "SOAU"."SJQY_QTSBSPEC"."PROPERTY_6&qu ...

  10. iOS 笔试题

    转:http://blog.sina.com.cn/s/blog_b0c5954101014upb.html 1.截取字符串”20|http://www.621life.com“ 中 ‘|’字符前面及 ...