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是什么? 即前端页面搭 ...
随机推荐
- iis上如何架设HTTPS网站
对于HTTPS网站,大部分都比较陌生,觉得很难,其实只要申请好证书,只要在服务器上做下小配置就可以完成 首先,申请一个ssl证书 免费申请https://buy.wosign.com/free/Fre ...
- java并发编程学习: 原子变量(CAS)
先上一段代码: package test; public class Program { public static int i = 0; private static class Next exte ...
- 疑难杂症——EF+Automapper引发的查询效率问题解析
前言:前面总结了一些WebApi里面常见问题的解决方案,本来打算来分享下oData+WebApi的使用方式的,奈何被工作所困,只能将此往后推了.今天先来看看EF和AutoMapper联合使用的一个问题 ...
- 在oracle中,如何当前系统时间往前推7天
' day from dual 另附: 当前时间减去7分钟的时间 ' MINUTE from dual 当前时间减去7小时的时间 ' hour from dual 当前时间减去7天的时间 ' day ...
- SQLite剖析之设计与概念
1.API 由两部分组成: 核心API(core API)和扩展API(extension API). 核心API的函数实现基本的数据库操作:连接数据库.处理SQL.遍历结果集.它也包括一些实用函数, ...
- RSVP协议的基本概念介绍
2010-06-12 14:12 佚名 互联网 字号:T | T 对于RSVP协议的简单介绍和图解.通过文章,我们将对这个含义的基本概念和结构,以及工作方式等方面的知识有所了解.希望对大家有所帮助. ...
- 响应式疑惑? CSS单位研究
各种单位要搞清楚,自己试一试,实践出真知! 2.屏幕分辨率 响应式 哦,电脑的分辨率:1440x900表示水平有1440个像素点哦! 垂直有900个像素点. 而网页在浏览器中,所以宽度是电脑的分 ...
- 使用VS Code 从零开始开发并调试.NET Core 应用程序
最新文章:http://www.cnblogs.com/linezero/p/VSCodeNETCore.html 使用VS Code 从零开始开发并调试.NET Core 应用程序,C#调试. 上一 ...
- 用类(function(){})()实现点击显示index索引值的详解
code: <script type="text/javascript"> ; i < ; i++){ var btn = document.createElem ...
- 菜鸟初识python request属性及方法说明
if request.REQUEST.has_key('键值'): HttpRequest对象的属性 参考: 表 H-1. HttpRequest对象的属性 属性 描述 path 表示提交请求页面完 ...