滚动条的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. WEEX入坑指南（1）

    weex create newtest 然后在某个阶段卡死, 解决方案: 在路径下创建新建文件夹,并命名为项目的名称.

  2. MHA（上）

    一.mysql-mha环境准备 1.准备工作 1.1 实验环境: 1.2 软件包 用到的所有包 链接:https://pan.baidu.com/s/19tiKXNEW4C6oWi9OFmcDYA 提 ...

  3. iBATIS 调试

    在写完sql语句以后,如果参数有问题.还真不知道该如何看参数.原来Ibatis 是通过日志输出,看到参数的.IBatis 内置的日志输出是log4net,所以可以参考ibatis的api.照着复制其配 ...

  4. xshell连不上虚拟机

    一般都是下边这种情况 查看 虚拟机的ip   ip a 看看是否有IP地址 如果没有的话,win+r 输入services.msc 把这三个服务设为正在运行状态 #虚拟机连不上网 前戏: 查看xshe ...

  5. jQuery-4.动画篇---动画切换的比较（toggle与slideToggle以及fadeToggle的比较）

    jQuery中toggle与slideToggle以及fadeToggle的比较 操作元素的显示和隐藏可以有几种方法.例如: 改变样式display为none 设置位置高度为0 设置透明度为0 都能达 ...

  6. c#获取url请求的返回值

    /// <summary> /// 获取url的返回值 /// </summary> /// <param name="url">eg:http ...

  7. hdu-3689 Infinite monkey theorem 概率dp+kmp

    有一只猴子随机敲键盘,给出它可能敲的键以及敲各个键的概率. 输入:n,表示有多少个键,m,表示猴子会敲m次键 n个二元组(字母,数字) 表示键代表的字母及其被敲的概率. 最后一个目标字符串. 问这只猴 ...

  8. 【leetcode】475. Heaters

    problem 475. Heaters solution1: class Solution { public: int findRadius(vector<int>& house ...

  9. Jmeter 非 GUI 命令行执行脚本文件

    https://www.cnblogs.com/yebaofang/p/9803273.html

  10. Codeforces 977E：Cyclic Components（并查集）

    题意 给出nnn个顶点和mmm条边,求这个图中环的个数 思路 利用并查集的性质,环上的顶点都在同一个集合中 在输入的时候记录下来每个顶点的度数,查找两个点相连,且度数均为222的点,如果这两个点的父节 ...