我遇到的场景：

对于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. 多媒体开发之rtsp 实现rtsp over tcp/http/udp---rtsp发送

    (1) (2) (3) http://itindex.net/detail/51966-海康-rtsp-客户端 http://bbs.csdn.net/topics/390488547?page=1# ...

  2. 【BZOJ】1696: [Usaco2007 Feb]Building A New Barn新牛舍（贪心）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1696 原题要求min(sum{|x-xi|+|y-yi|}),且一定要看题:“没有两头牛的吃草位置是 ...

  3. Java 执行linux scp 远程获取文件和上传

      需要的jar包:ganymed-ssh2-build210.jar import java.io.ByteArrayOutputStream;import java.io.File;import ...

  4. 设置两个WdatePicker的开始时间小于结束时间，结束时间大于开始时间

    contract_start_date_id为开始时间ID contract_end_date_id为结束时间ID $("#contract_start_date_id").bin ...

  5. Android5.0新特性-Material Design

    概述 2014年,Google携Android5.X重装归来.全新的UI设计和更加优化的性能,令开发人员眼前一亮 安装和配置Android5.0开发环境 开发Android还得靠AS.下载地址 htt ...

  6. iOS开发之--获取验证码倒计时及闪烁问题解决方案

    大家在做验证码的时候一般都会用到倒计时,基本上大家实现的方式都差不多,先贴出一些代码来.. -(void)startTime{ __block ; //倒计时时间 dispatch_queue_t q ...

  7. 打印系统所有的PID

    #!/usr/bin/env python #-*- coding:utf-8 -*- ''' 打印系统所有的PID ''' import os def get_all_pid(): for pid ...

  8. poj_1860 SPFA

    题目大意 有N种货币,M个兑换点,每个兑换点只能相互兑换两种货币.设兑换点A可以兑换货币C1和C2,给出rate(C1--C2)表示1单位的C1货币可以兑换出的C2货币数目,rate(C2--C1)表 ...

  9. 透过Nim游戏浅谈博弈

    452. Nim游戏! ★   输入文件:nim!.in   输出文件:nim!.out   简单对比时间限制:1 s   内存限制:128 MB 甲,乙两个人玩Nim取石子游戏. nim游戏的规则是 ...

  10. Django学习笔记第二篇--关于请求获取

    #细节都在代码段里面讲解 零.绪论: HTTP协议是一种请求响应的协议,一次请求一次响应.所以这部分的讲解将分为三个部分:请求获取,分析处理.返回响应. 一.获取请求数据: 1.POST和GET类型 ...