我遇到的场景：

对于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. javascript不可用的问题探究

    昨天在Twitter上的一些有趣的讨论中, 我发现人们对于Web应用和站点对javascript的依赖普遍存在一种疑惑. 这种疑惑一直都存在, 而对我而言, 这个问题随着浏览技术的飞跃发展而集中爆发了 ...

  2. mapreduce程序调用各个类的功能

    转自:http://www.cnblogs.com/z1987/p/5052409.html 1.map类 map类继承了库类中的Mapper,即Mapper<KEYIN, VALUEIN, K ...

  3. 举例说明：Hadoop vs. NoSql vs. Sql vs. NewSql

    转自:http://blog.jobbole.com/86269/   尽管层次数据库如今在大型机上依然被广泛使用,但关系数据库(RDBMS)(SQL)已经占领了数据库市场,并且表现的相当优异.我们存 ...

  4. 第二百六十七节，Tornado框架-分页封装模块

    Tornado框架-分页封装模块 框架引擎 #!/usr/bin/env python #coding:utf-8 import tornado.ioloop import tornado.web # ...

  5. java-I/O File类(5)-Reader和Writer、OutputStreamWriter 、BufferedWriter、字节流和字符流的区别

      标签: outputstreamwriterreader字符file方法 2015-05-14 23:06 469人阅读 评论(0) 收藏 举报  分类: 孙鑫-java基础(16)  I-O(4 ...

  6. 【noip模拟题】最大公约数（数论）

    好神的一题... 首先我们只需要枚举这个gcd即可..从大到小,然后问题转换为判定问题...即判定是否有k个数有gcd这个约数.. orz 这样做的复杂度最坏是O(n+n/2+n/3+…+n/n)=O ...

  7. WPF进阶之接口（3）：INotifyPropertyChanged，ICommand

    INotifiPropertyChanged . 作用:向客户端发出某一属性值已更改的通知.该接口包含一个PropertyChanged事件成员(MSDN的解释) INotifyPropertyCha ...

  8. ionic 弹窗（alert, confirm）

    直接上代码吧,不解释了 控制器: angular.module('app.controllers', []) .controller('categoryCtrl', ['$scope', '$http ...

  9. 解决error: Unable to find vcvarsall.bat【python 2.7/vs2010】

    转自:http://blog.csdn.net/secretx/article/details/17472107 去下载安装VS2010(08版貌似也行,不过没必要用旧版,指不定哪个库又无法编译),给 ...

  10. Windows远程桌面没有密码的电脑

    你如果想远程一个密码为空的机器,默认情况下是不可以的,需要进行以下设置 1.windows家庭版不支持远程桌面 2. 3.搜索“本地安全策略”