滚动条的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. 学习Spring中遇到关于BeanFactory及测试类的问题

    最近在学习Spring,使用的是Spring 5.0.1 学习书本中使用的是4.0 学习书本中使用以下来加载配置文件及设置 Resource resource = new ClassPathResou ...

  2. JVM学习三：静态分派

    所有依赖静态类型来定位方法的执行版本的分派动作成为静态分派,静态分派典型的应用场景是方法的重载.在编译阶段,javac编译器会根据参数的静态类型决定使用哪个重载版本,但很多种情况下这个版本并不是“唯一 ...

  3. height属性

    高度属性: height:长度值|百分比|auto 最大高度:max-height 最小高度:min-height 说明:设置块级元素和替换元素的内容高度.

  4. 异常详细信息: System.BadImageFormatException: 未能加载文件或程序集“Maticsoft.Common”或它的某一个依赖项。试图加载格式不正确的程序。

    异常详细信息: System.BadImageFormatException: 未能加载文件或程序集“Maticsoft.Common”或它的某一个依赖项.试图加载格式不正确的程序. 解决方法: 点击 ...

  5. vue 数字随机滚动(数字递增)

    html: <span v-for="i in numArr">{{i}}</span>   data: numArr: [], methods: perN ...

  6. 增删改查js

    -----------------------------------------------------一---------------------------------------------- ...

  7. JVM垃圾收集器-ParNew收集器

    今天我给大家讲讲ParNew收集器. ParNew收集器 ParNew收集器收集器其实就是Serial收集器的多线程版本,除了使用多线程进行垃圾收集之外,其余行为包括Serial收集器可用的所有控制参 ...

  8. 实验六 CC2530平台上P2P通信的TinyOS编程

    实验六 CC2530平台上P2P通信的TinyOS编程 实验目的: 加深和巩固学生对于TinyOS编程方法的理解和掌握 让学生初步的掌握射频通信TinyOS编程方法 学生通过本实验应理解TinyOS中 ...

  9. c——闰年

    PTA #include<stdio.h> int main() { int year,month,day,cnt,flag; flag = ; scanf("%4d/%2d/% ...

  10. centos7使用cronolog分割tomcat8.5的catalina.out日志

    1.安装cronolog wget https://files.cnblogs.com/files/crazyzero/cronolog-1.6.2.tar.gz tar -zxvf cronolog ...