滚动条的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. 201771010141 周强《面向对象设计 java》第十五周实验总结

    理论部分 ◼ JAR文件◼ 应用程序首选项存储◼ Java Web Start JAR文件: 1.Java程序的打包:程序编译完成后,程序员将.class文件压缩打包为.jar文件后,GUI界面程序就 ...

  2. mac eclipse maven -solved

    最近开始用mac,在开始之初体验到了mac系统的丝滑流畅,但也感受到重新开始学习一个平台的坡度. 最近学习maven,创建项目时总是报错,网上查阅到的资料很少.最后在settings.xml中添加了阿 ...

  3. Angular/cli 安装（windows环境）。

    1.卸载先前安装的Angular/cli npm uninstall -g angular-clinpm uninstall --save-dev angular-clinpm uninstall - ...

  4. django学习：整体思路与方向

    学习django的原因,主要是对于他的高效和兴趣,原先研究了一些,但是毫无头绪. 最近连续看了2-3天,似乎有些眉目.django主要是一个网页设计的工具就结构来说,分为project和app两个层级 ...

  5. 数组之slice,splice,Concact,Reverse,Sort方法

    Slice(strart,end)用来从数组中提取元素.该方法不会改变元素数组,而是将截取到的元素封装到一个新数组中返回 参数start 截取开始的位置索引,包含开始索引 参数end 截取结束位置的索 ...

  6. Day8 linux软件包管理

    软件包的两种形式      qq.tar.gz  (需要编译 源码翻译成二进制)/ rpm (直接安装) rpm的文件名分为5部分 name名称  version版本编号  release发布次数  ...

  7. Spark 灰度发布在十万级节点上的成功实践 CI CD

    原创文章,转载请务必将下面这段话置于文章开头处. 本文转发自技术世界,原文链接 http://www.jasongj.com/spark/ci_cd/ 本文所述内容基于某顶级互联网公司数万节点下 Sp ...

  8. python 7

    一.数据类型的补充 1.元组 tu1 = ('大海') tu2 = ('大海',) print(tu1, type(tu1), tu2, type(tu2)) 大海 <class 'str'&g ...

  9. MySQL-01-基础

    大纲 1)mysql存储结构: 数据库 -> 表 -> 数据   sql语句 2)管理数据库: 增加: create database 数据库 default character utf8 ...

  10. Python 配置 selenium 模拟浏览器环境，带下载链接

    使用浏览器渲染引擎.直接用浏览器在显示网页时解析HTML,应用CSS样式并执行JavaScript的语句. 这方法在爬虫过程中会打开一个浏览器,加载该网页,自动操作浏览器浏览各个网页,顺便把数据抓下来 ...