滚动条的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. C++编程入门

    学习一门新的程序设计语言的最好方法就是练习编写程序. 每个C++程序都包含一个或多个函数,其中一个必须命名为main.操作系统通过调用main来运行C++程序. 一个函数定义包含四个部分:返回类型:函 ...

  2. leetcode 买卖股票问题

    leetcode121 Best Time to Buy and Sell Stock 说白了找到最大的两组数之差即可 class Solution { public: int maxProfit(v ...

  3. iOS 九宫格解锁

    思路: 1.画9个按钮,通过按钮的选中状态控制按钮. 2.连线通过贝塞尔曲线绘制. 3.校验密码通过给按钮绑定tag值判断. 主要代码: OC版本: // // NineLockView.m // l ...

  4. 【SHELL】：定时任务删除指定目录

    现有一个需求,需要定时删除积累过久的目录,并且部分目录不可删除.在此,我们分析了一下该父目录的命名结构:非连续性数字命名,部分目录中包含a.txt文件.如下图所示: 在此,我们对此可作如下操作,获取该 ...

  5. Javascript仿贪吃蛇出现Bug的反思

    bug现象:    图一

  6. 什么是BFC

    对css有了解的朋友肯定都知道盒式模型这个概念,对一个元素设置css,首先需要知道这个元素是block还是inline类型.而BFC就是用来格式化块级盒子,同样管理inline类型的盒子还有IFC,以 ...

  7. jmeter 上传附件脚本报Non HTTP response code: java.io.FileNotFoundException

    如果上传附件报如下错误,就需要把附件放到和脚本同一路径下就解决了

  8. Linux系统一些常用命令（持续增加）

    这些命令什么的全是从网上找的,防止忘记,留下来备忘 1.linux服务器如何从另一台服务器拷东西:可以用scp命令scp user@remote.machine:/remote/path /local ...

  9. C#取出重复的方式以及用字典存储以键存储集合的方法

    最近在做项目的时候,发现有些需求需要特别的方式来实现.下面看代码 private List<string> firstType = new List<string>(); pr ...

  10. gradle安装操作

    下载你所需要对应的版本,gradle-4.3.1-bin.zip 下载后解压到你想要的目录 设置环境变量 在cmd模式下查看,出现信息证明安装成功