css 自定义滚动条
我遇到的场景：
对于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 自定义滚动条的更多相关文章
- css自定义滚动条
有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了.那webkit浏览器是如何自定义滚动条的呢? 前言 ...
- CSS自定义滚动条样式
原文地址:http://www.qianduan.net/css-custom-scroll-bar-style/ 相信很多人都遇到过在设计中自定义滚动条样式的情景,之前我都是努力说服设计师接受浏览器 ...
- jquery自定义滚动条 鼠标移入或滚轮时显示 鼠标离开或悬停超时时隐藏
一.需求: 我需要做一个多媒体播放页面,左侧为播放列表,右侧为播放器.为了避免系统滚动条把列表和播放器隔断开,左侧列表的滚动条需要自定义,并且滚动停止和鼠标离开时要隐藏掉. 二.他山之石: 案例来自h ...
- 使用css实现无滚动条滚动+使用插件自定义滚动条样式
使用css实现无滚动条滚动,摘抄自:曹小萌博客 使用css实现无滚动条滚动,大体思路是在div外面再套一个div.这个div设置overflow:hidden.而内容div设置 overflow-x: ...
- css和js实现硬件加速渲染自定义滚动条
听别人说用CSS的变换来实现渲染有硬件加速的效果,看到很多大网站都开始陆续使用上了,我也来说说怎么做,我这边实现的滚动条有自然滚动效果,看起来比较自然,说的再多不如直接写,让我们开始吧! 我们需要自己 ...
- css中渐变的分割线和自定义滚动条样式
css中渐变的分隔线: <div style="background:linear-gradient(to left,#efefef,#b6b6b6,#efefef);height:1 ...
- 自定义滚动条样式纯（css）
啥都不说先看图: 注: 只适合chrom,不适用IE和fireFox 下面展示代码: <html lang="en"> <head> <meta ch ...
- CSS3自定义滚动条样式 -webkit-scrollbar(转)
有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了.那webkit浏览器是如何自定义滚动条的呢? 前言 ...
- 自定义滚动条 - mCustomScrollbar
项目中需要使用自定义滚动条,但是试用了很多都功能不够全,今天发现一个比较全而且用法很简单的 -- mCustomScrollbar http://manos.malihu.gr/jquery-cust ...
随机推荐
- COUNT() 函数返回匹配指定条件的行数。
SQL COUNT() 语法 SQL COUNT(column_name) 语法 COUNT(column_name) 函数返回指定列的值的数目(NULL 不计入): SELECT COUNT(col ...
- 【noip模拟题】迎接仪式（dp+特殊的技巧）
好神的一题... 这是一道DP题,本题的难点在于状态的确定,由于调整是任意的,很难划分状态,我们略微修改一下调整的形式:把一次’j’和’z’交换看做两次变换:’j’->’z’;’z’->’ ...
- form 回车键(ENTER)
<form class="clb_yyxx_nr" name="appointment_content" action="" onsu ...
- hdu 1232:畅通工程（数据结构，树，并查集）
畅通工程 Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submis ...
- WPF 渲染级别 (Tier)
在WPF中,显卡的功能相差很大.当WPF评估显卡时,它会考虑许多因素,包括显卡上的RAM数量.对像素着色器(piexl shader)的支持(计算每个像素效果的内置程序,如透明效果),以及对顶点着色器 ...
- Nuget包制作最佳解决方案
https://www.cnblogs.com/drea/p/8418717.html 最近研究ABP框架,下载其全套源码,想“据为己有”,这样添加功能或者修改源码的话就非常方便了,否则搭建项目直接用 ...
- ios开发之--使用AFNetWorking 3.1.0 ，简单的请求封装类
从苹果系统自带的请求类,到ASIHttpRequest第三方请求类,再到AFNetWorking第三方请求类,目前只要牵扯到数据请求,基本上都是用AFN,所以,这里纯粹是记录下: hRequestTo ...
- ecstore 修改后台搜索框搜索字段的排序顺序
Ecstore后台要添加搜索字段,只需要在dbschema里写filtertype和filterdefault就行了,但要修改搜索字段的顺序要怎么弄呢?? 经测试,直接在dbschema文件里修改字段 ...
- 第五篇：CUDA 并行程序中的同步
前言 在并发,多线程环境下,同步是一个很重要的环节.同步即是指进程/线程之间的执行顺序约定. 本文将介绍如何通过共享内存机制实现块内多线程之间的同步. 至于块之间的同步,需要使用到 global me ...
- 【iOS开发】 AudioSession设置, 切换扬声器和听筒详解-保留其他应用音乐（备忘）
本文转载至 http://blog.sina.com.cn/s/blog_693de6100101f1g8.html (2013-04-10 17:25:24) 转载▼ 标签: audiosessio ...