overflow滚动条样式设置，ie和webkit内核
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title> <style>
body{
/*ie下修改滚动条样式，在webkit内核浏览器无效*/
/*scrollbar-arrow-color: #f4ae21;三角箭头的颜色
scrollbar-face-color: #333; *立体滚动条的颜色
scrollbar-3dlight-color: #666; 立体滚动条亮边的颜色
scrollbar-highlight-color: #666; 滚动条空白部分的颜色
scrollbar-shadow-color: #999; 立体滚动条阴影的颜色
scrollbar-darkshadow-color: #666; 立体滚动条强阴影的颜色
scrollbar-track-color: #666; 立体滚动条背景颜色
scrollbar-base-color:#f8f8f8; 滚动条的基本颜色
Cursor:url(mouse.cur);自定义个性鼠标*/
}
div{
height:100px;
width:200px;
overflow:auto;
}
td{
display:inline-block;
margin:10px 20px;
}
/*webkit内核浏览器修改滚动条样式*/
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background: rgba(0,0,0,0.2);
}
::-moz-scrollbar {
width: 8px;
}
::-moz-scrollbar-thumb {
border-radius: 10px;
background: rgba(0,0,0,0.2);
}
/*当前窗口未激活的情况下*/
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(0,0,0,0.1);
}
/*hover到滚动条上*/
::-webkit-scrollbar-thumb:vertical:hover{
background-color: rgba(0,0,0,0.3);
}
/*滚动条按下*/
::-webkit-scrollbar-thumb:vertical:active{
background-color: rgba(0,0,0,0.7);
}
</style>
</head>
<body>
<div>
<table>
<tr>
<td>12345</td>
<td>12345</td>
</tr>
<tr>
<td>12345</td>
<td>12345</td>
</tr>
<tr>
<td>12345</td>
<td>12345</td>
</tr>
<tr>
<td>12345</td>
<td>12345</td>
</tr>
</table>
</div>
</body>
</html>
如有错误，请您指正！
overflow滚动条样式设置，ie和webkit内核的更多相关文章
- CSS文本溢出效果&滚动条样式设置
一.文本溢出 1.overflow: hidden; 超出文本会被剪裁隐藏不可见 scroll;超出文本会被剪裁, 显示滚动条 auto; 如果文本超出会显示滚动条,没超出不会显示, overflo ...
- CSS滚动条样式设置
webkit浏览器css设置滚动条 主要有下面7个属性 ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的 ::-webkit-scrollbar-button 滚动条两端的按钮 ...
- [CSS]滚动条样式设置
概述 最近项目中需要,将一个页面嵌入在一个webbrower中,这个webrower是定高的,在页面内容超过webbrower高度时,需要以滚动条的形式展现,当时也考虑了使用webbrower的滚动条 ...
- listview-fading 滚动条样式设置
fadingEdge-属性用来设置拉滚动条时 ,边框渐变的方向.它有三个属性值可以设置 none:(边框颜色不变) horizontal:(水平方向颜色变淡) vertical:(垂直方向颜色变淡). ...
- vue 滚动条样式设置
App.vue 文件下加入下面css // 滚动条宽度 ::-webkit-scrollbar{ width: 6px; } /* 定义滚动条轨道 */ ::-webkit-scrollb ...
- 【前端】webkit内核浏览器DIV滚动条样式修改和设置
webkit内核浏览器DIV滚动条样式修改和设置 引言: 最近在做自己的小项目,为了设计出好看的页面费劲了心思,大到页面的整体布局,小到DIV的滚动条都不放过,以下是我通过查阅资料总结的webkit内 ...
- CSS3自定义滚动条样式-webkit内核
自定义滚动条实现 此部分针对webkit内核的浏览器,使用伪类来改变滚动条的默认样式,详情如下: 滚动条组成部分 1. ::-webkit-scrollbar 滚动条整体部分 2. ::-webkit ...
- CSS3自定义滚动条样式
原文地址:→传送门 写在前面 滚动条是个很常见的东东,不过某些浏览器自带的滚动条确实不太好看啊,下面可以作为学习,探讨下自定义滚动条的实现,这样你的滚动条就可以美美的啦.但是,也只能玩玩,因为只针对w ...
- 自定义滚动条样式-兼容IE
滚动条样式设置 html部分: 1 <div id="scroll" style="width: 500px; height: 300px; border: 2px ...
随机推荐
- kNN的维数灾难与PCA降维
主成分分析 PCA 协方差矩阵 假设我们有 \[ X = \begin{pmatrix}X_1\\X_2\\\vdots\\X_m\end{pmatrix}\in\mathbb{R}^{m\times ...
- 九度oj 题目1465：最简真分数
题目描述: 给出n个正整数,任取两个数分别作为分子和分母组成最简真分数,编程求共有几个这样的组合. 输入: 输入有多组,每组包含n(n<=600)和n个不同的整数,整数大于1且小于等于1000. ...
- 九度oj 题目1460：Oil Deposit
题目描述: The GeoSurvComp geologic survey company is responsible for detecting underground oil deposits. ...
- 【Luogu】P1472奶牛家谱（DP）
题目链接 这是一道考思维的好题. 一开始设f[i][j]是i个点刚好j层的方案数,死活调不出来,看题解发现可以改为<=j层的方案数,最后输出f[n][m]-f[n][m-1]就好了. 对于计算考 ...
- NOJ——1669xor的难题（详细的树状数组扩展—异或求和）
[1669] xor的难题 时间限制: 1000 ms 内存限制: 65535 K 问题描述 最近Alex学长有个问题被困扰了很久,就是有同学给他n个数,然后给你m个查询,然后每个查询给你l和r(左下 ...
- SJTU Summer Camp
Day -2,-1 提前坐飞机来到了上海,在旁边的酒店住下来,晚上去了外滩,在黄浦江边吹着晚风,依旧感慨万千,在衡中高三的一年竟然已经过去,经常出现在噩梦中的高考也已成为历史,然而命运可能并未就此改变 ...
- C# ORM框架
SQLSUGAR http://www.codeisbug.com/Doc/8/1159 附带mysql工具类,最优使用上面sqlsugar using System; using System.Co ...
- WebRTC源码架构浅析（转）
Google 在2010年花了6千8百万美元收购了大名鼎鼎的 Global IP Sound/Solutions (GIPS) 公司, 得到了它的 VoIP 相关技术的专利和软件. 第二年, Goog ...
- iOS8下定位问题解决
项目是以前iOS7的,升级iOS8后,无法成功获取用户位置.后来才发现iOS8 使用定位需要在infoplist文件中加2个key,然后manager需要加一个方法,指定定位授权机制 在plist ...
- PhPStorm 快捷键使用(转载)
PhPStorm 是 JetBrains 公司开发的一款商业的 PHP 集成开发工具,PhpStorm可随时帮助用户对其编码进行调整,运行单元测试或者提供可视化debug功能.Phpstrom的一款名 ...