我遇到的场景：

对于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. jq 按回车键 登陆

    $("body").keydown(function(e) {             if (event.which == "13") {//keyCode= ...

  2. 在XML中用于注释的符号是。(选择1项)

    A．<!– –> B．<?– –?> C．<% %> D．<!– –!> 解答:A

  3. exif_imagetype() 函数在linux下的php中不存在

    1.问题,项目中上传文件使用插件时,windows上支持函数exif_imagetype(),而在linux上不支持. 2.PHP exif_imagetype的本质 PHP exif_imagety ...

  4. db2 import和load

    Import和Load 都可以将数据导入到DB2服务器中,但是2者是有很大区别的. Import 其实执行了SQL 的INSERT 操作.和INSERT 操作一样,Import 执行的时候会激活触发器 ...

  5. [转]Oracle dbms_random函数用法快速生成多条测试数据

    Java 随机生成中文姓名,手机号,邮编,住址:http://blog.csdn.net/xiaokui_wingfly/article/details/45913885 Java 批量随机生成身份证 ...

  6. jQuery编程中的一些核心方法简介

    调用 jQuery 对象的方法很简单: $('h1').remove(); 大多数 jQuery 方法都是像上面这样被调用的,这些方法都位于 $.fn 命名空间内,这些方法称为 jQuery 对象方法 ...

  7. Python背景知识——学习笔记

    诞生于1989圣诞节,阿姆斯特丹.Guido van Rossum(吉多·范罗苏姆). Python Python:解释型.面向对象.动态数据类型 的 高级程序设计语言. 解释型语言:运行的时候将程序 ...

  8. js获取格式化后的当前时间

    代码如下: function getFormatDate() { var day=new Date(); var Year=0; var Month=0; var Day=0; var Hour = ...

  9. poj_3259 负权和环

    题目大意 N个点,M条双向路径,W条单向路径.从双向路径的一端到另一端所花费时间为正值,从单向路径的源点到终点所花时间为负值.问是否存在一条从A出发,再回到A的回路,满足回到A的时间小于出发时间. 题 ...

  10. sessionStorage存储json对象

    应用场景: 账单列表中A页面:点击其中的一列,ajax返回的数据在这一页 点击进入账单详情B页面: 因为在A页面已经做过ajax的请求了,所以希望把当前其中的一个数组对象传到B页面中,所以,就考虑到暂 ...