我遇到的场景：

对于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. 使用jQuery模拟Google的自动提示效果

    注意: 1.本功能使用SqlServler2000中的示例数据库Northwind,请打SP3或SP4补丁:2.请下载jQuery组件,河西FTP中有下载:3.本功能实现类似Google自动提示的效果 ...

  2. android jni log

    在编写的jni时,经常需要输出打印信息进行调试,而C中printf在jni中没有效果,这时就需要使用NDK提供的函数. 1. jni中包含头文件 #include <android/log.h& ...

  3. 为什么选择使用Spring Cloud而放弃了Dubbo

    为什么选择使用Spring Cloud而放弃了Dubbo 可能大家会问,为什么选择了使用Dubbo之后,而又选择全面使用Spring Cloud呢?其中有几个原因: 1)从两个公司的背景来谈:Dubb ...

  4. GUI的广泛应用是当今计算机发展的重大成就之一

    GUI的广泛应用是当今计算机发展的重大成就之一,它极大地方便了非专业用户的使用.人们从此不再需要死记硬背大量的命令,取而代之的是可以通过窗口.菜单.按键等方式来方便地进行操作.而嵌入式GUI具有下面几 ...

  5. 如果没有指定Cookie的时效，那么默认的时效是。(选择1项)

    如果没有指定Cookie的时效,那么默认的时效是.(选择1项) A．一天 B. 永不过期 C．会话级别 D.一分钟 解答:C 这是API的原文:By default, -1 indicating th ...

  6. POJ 3181 Dollar Dayz 01全然背包问题

    01全然背包问题. 主要是求有多少种组合.二维dp做的人多了,这里使用一维dp就能够了. 一维的转换方程:dp[j] = dp[j-i] + dp[j];当中i代表重量,j代表当前背包容量. 意思就是 ...

  7. git 使用手册

    git 作为开源项目首选版本管理软件,必然其优势不容小觑,下面总结一下初次解除用到的一些技能 1. 基本命令介绍 git help branch 查看branch帮助文档 git branch -a ...

  8. 基于SSH框架实际开发时遇到的问题及解决办法

    1. 发现通过注解注入bean不起作用(对应的.java文件上没有'S'标记) 需要在pring .xml配置文件中加 <!-- 使用自动注解就必须配置加入自动扫描加载容器的包 --> & ...

  9. 查看linux系统外网ip命令

    终端中输入 curl ipinfo.io 或者 curl ifconfig.me 即可通过IP地址检测网站提供的api获得取本机的外网IP,或者以 JSON 格式返回全部结果.

  10. django定义app名称

    1.apps.py class AccountConfig(AppConfig): name = 'account' verbose_name = u'用户信息' # app显示中文 2. __ini ...