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是什么? 即前端页面搭 ...
随机推荐
- JavaScript中两种类型的全局对象/函数
这里所说的JavaScript指浏览器环境中的包括宿主环境在内的. 第一种是ECMAScript Global Object,第二种是宿主环境(Host)下的全局对象/函数. 一.核心JavaScri ...
- C/C++实践笔记 005
整型常量int a=101u; 无符号整数int b=102l; 长整数int c=103ll; long long整数 存储qq号,手机号 010八进制 0x10十六进制 嵌入式的场合经常用shor ...
- 字符编码笔记:ASCII,Unicode和UTF-8 转
本文出处 http://www.ruanyifeng.com/blog/2007/10/ascii_unicode_and_utf-8.html 只是为了记录一下省得要去搜. 今天中午,我突然想搞清楚 ...
- 终于等到你---订餐系统之负载均衡(nginx+memcached+ftp上传图片+iis)
又见毕业 对面工商大学的毕业生叕在拍毕业照了,一个个脸上都挂满了笑容,也许是满意自己四年的修行,也许是期待步入繁华的社会... 恰逢其时的连绵细雨与满天柳絮,似乎也是在映衬他们心中那些离别的忧伤,与对 ...
- 2.0 (1)安装MongoDB
(官网:www.mongodb.com) ——————————(1)Mac安装MongoDB———————— 1)安装homebrew (官网地址,brew.sh) ruby -e "$(c ...
- go 数据类型转换
使用strconv 包 首先需要import strconv包 //string to int i,err := strconv.Atoi(str) // string to int64 i64,er ...
- android 自定义Style初探---ProgressBar
系统自带的ProgressBar太丑了,所以我决定自定义一个Style. 原来的Style <?xml version="1.0" encoding="utf-8& ...
- Asp.Net MVC<七>:Model
Model 指ViewModel ,其作用: 用于目标Action的参数绑定 用于View呈现 Model元数据则是对ViewModel数据类型的描述,其作用在于控制作为Model的数据对象在View ...
- vim2
一.光标控制命令 命令 移动 k 向上移一行 j 向下移一行 h ...
- Servlet和JSP学习指导与实践(二):Session追踪
前言: web应用中经常需要对某些有用的信息进行存储或者附加一些信息.本文主要介绍session,即“会话”跟踪的几种不同方式~ ----------------------------4种管理ses ...