滚动条的css样式主要有三部分组成：

　　1、::-webkit-scrollbar   定义了滚动条整体的样式；

　    2、::-webkit-scrollbar-thumb  滑块部分；

　     3、::-webkit-scrollbar-thumb  轨道部分；

下面以overflow-y:auto;为例（overflow-x:auto一样，如果用水平滚动条，只需要给大的区块增加一个固定宽度就ok了）

html代码

css代码

最终效果

1.先对真个大框增加固定高度:h:200px;overflow:auto;

2.定义大框

css定义好看的垂直滚动条的更多相关文章

  1. css 内容溢出显示垂直滚动条，内容不超出就不显示滚动条

    搬运自:https://www.cnblogs.com/wangyuanyuanlovexuanxuan/p/7767767.html html: <style> .div1{ width ...

  2. CSS定义字体间距 字体行与行间距

    CSS定义字体行间距 line-height:xxpx; CSS定义字体间距 下面我们讲述一下CSS的文本属性,还是先来看一下文本属性的详细列表: 属性     属性含义     属性值 Word-s ...

  3. 给tbody加垂直滚动条的具体思路

    [给tbody加垂直滚动条的具体思路] 给tbody加垂直滚动条的思路就是把tbody设置成display:block,然后就对其高度设置一个固定值,overflow设置成auto即可 参考:http ...

  4. （转）CSS定义字体间距 字体行与行间距

    源网址:http://www.cnblogs.com/jian1982/archive/2010/07/03/1770349.html CSS定义字体行间距 line-height:xxpx; CSS ...

  5. 用Less CSS定义常用的CSS3效果函数

    定义圆角及调用 /* 定义圆角 @radius 圆角大小 */ .round(@radius:5px){ border-radius:@radius; -webkit-border-radius: @ ...

  6. C# ComBox 垂直滚动条

    用到Combox控件两个属性: 1 MaxDorpDownItems 显示条数 2 IntegralHeight 设置 为false 例如:显示最多20条,超过20条显示垂直滚动条 this.comb ...

  7. 关于iframe的滚动条，如何去掉水平滚动条或垂直滚动条

    关于iframe的滚动条,如何去掉水平滚动条或垂直滚动条 关于<iframe>可以通过设置属性scrolling="no" 去掉iframe的两个滚动条. 如何只去掉水 ...

  8. java中如何将JScrollPane的垂直滚动条自动移动到最下端

    JPanel QQP = new JPanel(); JScrollPane jsp = new JScrollPane(QQP); JScrollBar jsb = jsp.getVerticalS ...

  9. MFC对话框程序EDIT类控件的自动换行，垂直滚动条自动下移

    1.新建一个Edit Control,将其Multiline属性设置为True,Auto HScroll属性设置False,这样就可以实现每一行填满后自动换行了.   2.再将Vetrical Scr ...

随机推荐

  1. Python 查看线程的进程id

    import os from threading import Thread # from multiprocessing import Process def f1(n): print('1号',o ...

  2. 我的第一篇博客：vue-cli配置项目

    注意:在安装vue-cli之前一定要确保安装了node和vue 安装配置node:下载node(https://nodejs.org/en/)然后一路无脑安装 查看安装是否成功:node –versi ...

  3. python基础---列表生成器、迭代器等

    一.列表生成式 用来创建list的表达式,相当于for循环的简写形式 语法: [表达式 for循环 判断条件] ''' 普通写法 ''' def test(): l= [] for i in rang ...

  4. C#字符串的CompareTo比较，让我疑惑的地方

    在学习选择排序算法的时候,用到CopareTo方法.由于比较的数字,是自己随意输入的. 当我输入字符串“8”,它和字符串“16”比较时候. string str1 = "8"; s ...

  5. header头 下载文件 参数详解

    header( header( header( header( header( header( header( header( header( //2 浏览器不会响应缓存 //1 Public指示响应 ...

  6. 二叉搜索树（BST）的插入和删除递归实现

    思路 二叉搜索树的插入 TreeNode InsertRec(rootNode, key) = if rootNode == NULL, return new Node(key) if key > ...

  7. python学习笔记-os模块参数

    python的os 模块提供了非常丰富的方法用来处理文件和目录.常用的方法如下表所示: os.access(path, mode) 检验权限模式 os.chdir(path) 改变当前工作目录 os. ...

  8. java的基础语法（标识符 修饰符 关键字）

    Java 基础语法 一个 Java 程序可以认为是一系列对象的集合,而这些对象通过调用彼此的方法来协同工作.下面简要介绍下类.对象.方法和实例变量的概念. 对象:对象是类的一个实例,有状态和行为.例如 ...

  9. Vue 交互

  10. 技术笔记1：java.sql.SQLException: Access denied for user 'root'@'localhost' (using password）

    在myEclipse10中运行java项目的时候,遇到java.sql.SQLException: Access denied for user 'root'@'localhost' (using p ...