HTML div 滚动条样式设计
::-webkit-scrollbar-track-piece{
background-color:#fff;/*滚动条的背景颜色*/
-webkit-border-radius:0;/*滚动条的圆角宽度*/
}
::-webkit-scrollbar{
width:8px;/*滚动条的宽度*/
height:8px;/*滚动条的高度*/
}
::-webkit-scrollbar-thumb:vertical{/*垂直滚动条的样式*/
height:50px;
background-color:#999;
-webkit-border-radius:4px;
outline:2px solid #fff;
outline-offset:-2px;
border:2px solid #fff;
}
::-webkit-scrollbar-thumb:hover{/*滚动条的hover样式*/
height:50px;
background-color:#9f9f9f;
-webkit-border-radius:4px;
}
::-webkit-scrollbar-thumb:horizontal{/*水平滚动条的样式*/
width:5px;
background-color:#CCCCCC;
-webkit-border-radius:6px;
}
div::-webkit-scrollbar{
width:8px;/*滚动条的宽度*/
}
通过该种方式设计div的滚动条样式。
HTML div 滚动条样式设计的更多相关文章
- 【前端】webkit内核浏览器DIV滚动条样式修改和设置
webkit内核浏览器DIV滚动条样式修改和设置 引言: 最近在做自己的小项目,为了设计出好看的页面费劲了心思,大到页面的整体布局,小到DIV的滚动条都不放过,以下是我通过查阅资料总结的webkit内 ...
- 修改DIV滚动条样式
/*滚动条样式*/ div::-webkit-scrollbar { /*滚动条整体样式*/ width: 5px; /*高宽分别对应横竖滚动条的尺寸*/ height: 5px; } div::-w ...
- jQuery Scroll div滚动条样式更改
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script> ...
- HTML+CSS 滚动条样式自定义 - 适用于 div,iframe, html 等
友言:这两天被滚动条整的无与伦比,在此做下总结: 首先自定义浏览器滚动条的实现原理:计算浏览器滚动条的高度,层级1的高度与滚动条的总高度是一样的,通过相似比例计算: 浏览器滚动条总高度 :滚动条高度 ...
- DIV 自定义滚动条样式
当内容超出容器时,容器会出现滚动条,其自带的滚动条有时无法满足我们审美要求,那么我们可以通过css伪类来实现对滚动条的自定义. 首先我们要了解滚动条.滚动条从外观来看是由两部分组成:1,可以滑动的部分 ...
- DIV 自定义滚动条样式(二)
流浏览器自带的滚动条样式很丑,确实有必要美化. 滚动条从外观来看是由两部分组成:1,可以滑动的部分,我们叫它滑块2,滚动条的轨道,即滑块的轨道,一般来说滑块的颜色比轨道的颜色深. 滚动条的css样式主 ...
- css3滚动条样式美化
关于滚动条的设计,需要用到css3的微元素,都列在下边吧(以Chrome内核webkit为例). -webkit-scrollbar 滚动条的整体轮廓,width表示纵向滚动条的宽度,heig ...
- jQuery自定义滚动条样式插件mCustomScrollbar
如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...
- bootstrap学习总结-css样式设计(一)
由于项目需要,所以打算好好学习下bootstrap框架,之前了解一点,框架总体不难,但涉及到的东西还是很多,想要熟练掌握它,还是要多练练. 一:bootstrap是什么? bs是什么? 即前端页面搭 ...
随机推荐
- ThinkPHP常用配置路径
//系统常量定义 //去THinkPHP手册中进行查找 echo "<br>"."网站的根目录地址".__ROOT__." "; ...
- Membership 重置密码
public ActionResult ChongZhiMiMa() { Membership.GetUser("admin").UnlockU ...
- C# 窗体缩放的时候同步改变控件的大小和字体
最新在写个小程序,需要窗体填满各种尺寸的显示器,同时需要同步缩放控件的大小.于是就写了个类,简单的调用一下即可解决问题. 这个类可以同步缩放控件的位置,宽度高度,字体大小. 使用的时候在FormLoa ...
- node.js的安装环境搭建
.header { cursor: pointer } p { margin: 3px 6px } th { background: lightblue; width: 20% } table { t ...
- 关于__int128
定义 __int128 n,r,g,b,T; __int128 ans; __int128 f[][]; 取最大值函数 __int128 getmax(__int128 a,__int128 b){ ...
- K-means聚类算法
聚类分析(英语:Cluster analysis,亦称为群集分析) K-means也是聚类算法中最简单的一种了,但是里面包含的思想却是不一般.最早我使用并实现这个算法是在学习韩爷爷那本数据挖掘的书中, ...
- 推公式 HDU 2552
T 给你2个值 求另外一个 需要推一下 tan(a+b)=(tan(a)+tan(b))/(1-tan(a)*tan(b)); 等式左右取tan tan(atan(a))=a 1/s=tan(...) ...
- linux 下载百度盘,迅雷离线文件,解压乱码文件的方法。
首先,利用bypy的自动打包功能,将百度盘里的文件自动存放至app/bypy中,这样文件就是打包形式. 再利用 axel -n 10 "下载地址",将文件下载至本地. 下载地址获取 ...
- 【Phylab2.0】Alpha版本项目展示
团队成员 冯炜韬(PM)http://www.cnblogs.com/toka 岳桐宇(后端)http://www.cnblogs.com/mycraftmw 杨子琛(测试&LaTeX)htt ...
- js 中关于this用变量存起来的原因
近来,不忙,总是在网上看大牛的博客,发现关于this指向的情况,有的说是4种,也对,有的就是总结一句话,也对,但是我发现一种特殊情况,例子如下 var show={ btn:$('.div1'), i ...