滚动条的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. CodeBlocks无法调试的解决方法

    闲话: 万万没想到我也会写这个东西.一开始软件工程课的时候老师要求我们写博客园,一直都是被动地在写博客.刚刚在重温C语言的时候发现的各种各样问题觉得还是写下来比较好,一旦以后自己又忘了呢……(摊手 顺 ...

  2. erlang开发工具之intellij idea基本使用

    其他废话就不多说了,接下来主要是介绍怎么来用idea搭建项目让我们能更好的使用好开发工具. (这边假设你已经下载好了intellij idea关于erlang的插件,如果没有安装好,请先去google ...

  3. 3.13 练习题4:邮件发送（smtp）

    3.13 练习题4:邮件发送(smtp) 前言本篇总结了QQ邮箱和163邮箱发送邮件,邮件包含html中文和附件,可以发给多个收件人,专治各种不行,总之看完这篇麻麻再也不用担心我的邮件收不到了.以下代 ...

  4. Linux装系统问题

    最近要把以前的Linux red hat 5.3,32位的系统换成Linux red hat6.2 64位系统,中间出现问题,不知道为什么系统装完之后回滚,还是之前的5.3.,为此纠结好久,终于找到问 ...

  5. 腾讯广告联盟 Android SDK（广点通）demo的使用方式

    1. 下载示例文件. 2. 解压之后的目录: 3. 使用android studio,选择import project,导入如图所示文件夹: 4. 重点来了,由于官方demo的上传时间很久远(大概是上 ...

  6. 加载xib文件，如果想在初始化的时候就添加点东西就重载-(id)initWithCoder:(NSCoder *)aDecoder

    - (id)initWithCoder:(NSCoder *)aDecoder { self = [super initWithCoder:aDecoder]; if (self) { self.cl ...

  7. vue 通知 走马灯效果

    封装一个子组件: <template> <div class="container"> <div class="wrap"> ...

  8. C# DES加密类，16位的加密。

    这个加密类是与java写的DES加密不同时,自己写的,最后与Java的加密相同了,解决了加密后不同的问题. 可以直接调用里面的加密和解密的方法. using System; using System. ...

  9. Java CAS同步机制 原理详解（为什么并发环境下的COUNT自增操作不安全）: Atomic原子类底层用的不是传统意义的锁机制，而是无锁化的CAS机制，通过CAS机制保证多线程修改一个数值的安全性。

    精彩理解:  https://www.jianshu.com/p/21be831e851e ;  https://blog.csdn.net/heyutao007/article/details/19 ...

  10. 【缓存】介绍和使用场景 MEMCACHE REDIS

    缓存缓存就是在内存中存储的数据备份,当数据没有发生本质改变的时候,我们就不让数据的查询去数据库进行操作,而去内存中取数据,这样就大大降低了数据库的读写次数,而且从内存中读数据的速度比去数据库查询要快一 ...