css3中webkit内核的滚动栏样式
项目其中用到的滚动栏样式,在别人的基础上调成适合自己的样式。(IE能够调试滚动栏样式,firefox眼下不能调试)
::-webkit-scrollbar { width: 14px; }/* Track & scroll thickness */
::-webkit-scrollbar-track { background-color:#ddd; }/* Track color */
::-webkit-scrollbar-thumb { background-color: #333;}/* Scroll color */
::-webkit-scrollbar-thumb:hover { background-color: #000 }/* Scroll hover color */
::-webkit-scrollbar-thumb:active { background-color: #000 }/* Scroll click & drag color */
分享一下 我的项目中的webkit内核滚动栏样式(chrome,sarfrai)
demo:http://codepen.io/tianzi77/pen/mJNPmE
* {
margin: 0;
padding: 0;
}
div {
margin: 20px auto;
padding: 10px;
width: 500px;
height: 600px;
border: 1px solid #ddd;
}
p {
height: 1000px;
}
/* 自己定义滚动栏样式 */
.webkit-scrollbar {
overflow: hidden;
}
.webkit-scrollbar:hover {
overflow-y: scroll;
}
.webkit-scrollbar::-webkit-scrollbar {
width: 7px;
height: 7px;
/*设置整个滚动栏的宽高*/
}
.webkit-scrollbar::-webkit-scrollbar-track {
background-color: transparent;
/*整个滚动背景色*/
}
.webkit-scrollbar::-webkit-scrollbar-thumb {
background-color: #9e9e9e;
/*7px的滚动栏背景色*/
border-radius: 7px;
border: 1px solid #fff;
}
.webkit-scrollbar::-webkit-scrollbar-thumb:hover {
background-color: #525252;
}
css3中webkit内核的滚动栏样式的更多相关文章
- 【前端】webkit内核浏览器DIV滚动条样式修改和设置
webkit内核浏览器DIV滚动条样式修改和设置 引言: 最近在做自己的小项目,为了设计出好看的页面费劲了心思,大到页面的整体布局,小到DIV的滚动条都不放过,以下是我通过查阅资料总结的webkit内 ...
- 浅谈关于QT中Webkit内核浏览器
关于QT中Webkit内核浏览器是本文要介绍的内容,主要是来学习QT中webkit中浏览器的使用.提起WebKit,大家自然而然地想到浏览器.作为浏览器内部的主要构件,WebKit的主要工作是渲染.给 ...
- 从webkit内核简单看css样式和css规则优先级(权重)
目录 webkit中样式相关类及类间关系 样式规则匹配 权重(优先级)计算 权重相同时的覆盖原则 webkit中样式相关类及类间关系 资料来源: <webkit技术内幕> 结构相关类: 1 ...
- html中滚动栏的样式
DIV滚动栏设置 (CSS)2008/09/26 03:07div 中滚动栏的控制2008年01月06日 星期日 01:181)隐藏滚动栏<body style="overflow-x ...
- overflow滚动条样式设置,ie和webkit内核
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- iframe的滚动栏问题:显示/隐藏滚动栏
iframe 问题2008-01-22 16:37****** 显示 iframe 内容 XHTML 1.0 Transitional 标准不能显示 <!DOCTYPE html PUBLI ...
- css3中-moz、-ms、-webkit,-o分别代表的意思,以及微信浏览器内核分析
这种方式在业界上统称:识别码.前缀 //-ms代表[ie]内核识别码 //-moz代表火狐[firefox]内核识别码 //-webkit代表谷歌[chrome]/苹果[safari]内核识别码 // ...
- CSS3自定义滚动条样式-webkit内核
自定义滚动条实现 此部分针对webkit内核的浏览器,使用伪类来改变滚动条的默认样式,详情如下: 滚动条组成部分 1. ::-webkit-scrollbar 滚动条整体部分 2. ::-webkit ...
- css3中的布局相关样式
web页面中的布局是指在页面中如何对标题.导航栏.主要内容.脚注.表单等各种构成要素进行合理编辑.在css3之前,主要使用float属性或position属性进行页面中的简单布局,但是也存在一些缺点, ...
随机推荐
- Atcoder Grand Contest 010 B - Boxes 差分
B - Boxes 题目连接: http://agc010.contest.atcoder.jp/tasks/agc010_b Description There are N boxes arrang ...
- UVALive 6889 City Park 并查集
City Park 题目连接: http://acm.hust.edu.cn/vjudge/contest/view.action?cid=122283#problem/F Description P ...
- Android 9 patch 图片 (.9.png 格式图片) 的特点和制作(转)
本文围绕 .9.png 格式图片讨论以下两个话题: 1. 该格式图片的特点 2. 制作方式 一 .9.png 格式的文件的特点 与传统的png 格式图片相比, 9.png 格式图片在图片四周有一圈一个 ...
- LPC43xx SGPIO Slice 示意图
SGPIO inverted clock qualifier Hi, With bits 6:5 of SGPIO_MUX_CFG the QUALIFIER_MODE is selected (0x ...
- 任务失败,因为未找到“AxImpexe”,或未安装正确的 Microsoft Windows SDK
jenkins自动构建.net时发生错误,查看Console Output看到如下错误: C:\Windows\Microsoft.NET\Framework\v4.0.30319\Microsoft ...
- SpringMVC和Springboot的区别
转自站在浪潮之巅的原文SpringMVC和Springboot的区别(网摘) spring boot 我理解就是把 spring spring mvc spring data jpa 等等的一些常用的 ...
- redis实现发布(订阅)消息
redis实现发布(订阅)消息 什么是redis的发布订阅(pub/sub)? Pub/Sub功能(means Publish, Subscribe)即发布及订阅功能.基于事件的系统中,Pub/S ...
- 初学者必读:IBM长文解读人工智能、机器学习和认知计算
转自:https://zhuanlan.zhihu.com/p/27228015?utm_source=weibo&utm_medium=social 人工智能的发展曾经经历过几次起起伏伏,近 ...
- 嗜血法医第八季/全集Dexter 8迅雷下载
嗜血法医 第八季 Dexter Season 8 (2013) 本季看点:来自Showtime电视网的连环杀人犯<嗜血法医>Dexter作为今夏最重磅的剧集之一,已经于当地时间6月30日回 ...
- Spring框架中IoC(控制反转)的原理(转)
原文链接:Spring框架中IoC(控制反转)的原理 一.IoC的基础知识以及原理: 1.IoC理论的背景:在采用面向对象方法设计的软件系统中,底层实现都是由N个对象组成的,所有的对象通过彼此的合作, ...