css 默认显示滚动条,css控制默认滚动条样式

针对webkit内核的浏览器，使用伪类来改变滚动条的默认样式，详情如下：

滚动条组成部分

1. ::-webkit-scrollbar 滚动条整体部分

2. ::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动(或向左向右移动)

3. ::-webkit-scrollbar-track 滚动条的轨道(里面装有Thumb)

4. ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，由于通过点击微调小方块的位置。

5. ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分

6. ::-webkit-scrollbar-corner 边角，即垂直滚动条和水平滚动条相交的地方

7. ::-webkit-resizer 两个滚动条的交汇处上用于拖动调整元素大小的小控件

滚动条样式/颜色组成部分

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); /*自定义个性鼠标*/

如下为代码：

/*定义滚动条轨道*/

#style-2::-webkit-scrollbar-track

{

background-color: #F5F5F5;

-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.22);

}

/*定义滚动条高宽及背景*/

#style-2::-webkit-scrollbar

{

width: 10px;

background-color: rgba(0, 0, 0, 0.34);

}

/*定义滚动条*/

#style-2::-webkit-scrollbar-thumb

{

background-color: #8b8b8b;

border-radius: 10px;

}

*要实现单个div里面的内容滚动，需要满足三个条件：

1、div必须设定固定的高度，不能使用百分比或 auto 等弹性值。

2、其中的内容高度必须超过它本身的高度。

3、必须添加属性 “overflow：auto”。

附：

::-webkit-scrollbar{

width: 10px;

height: 8px;

background-color: #515a6e;

-webkit-transition: background-color .3s ease-in-out;

transition: background-color .3s ease-in-out;

}

::-webkit-scrollbar:hover{

background-color: #d1d1d1;

}

::-webkit-scrollbar-thumb{

background-color: rgb(23, 35, 61, 0.6);

height: 50px;

-webkit-border-radius:5px;

border-radius:5px;

border-right: 1px solid #fff;

border-left: 1px solid #fff;

-webkit-transition: background-color .3s ease-in-out;

transition: background-color .3s ease-in-out;

}

::-webkit-scrollbar-thumb:hover,

::-webkit-scrollbar-thumb:active{

background-color:rgb(23, 35, 61, 0.8);

border-right: 1px solid #f1f1f1;

border-left: 1px solid #f1f1f1;

}

::-webkit-scrollbar-track{

background-color:#fff;

}

::-webkit-scrollbar-track:hover{

background-color:#fff;

}

参考链接：

css 修改默认滚动条样式

来自:https://www.cnblogs.com/juqian/p/6273808.html 侵删

设置cnblogs默认滚动条样式

默认滚动条样式丑嘛就不谈了~这里修改为个性化滚动条样式. CSS代码 /*滚动条整体样式*/ body::-webkit-scrollbar { width: 10px; height: 1px; } ...

web的各种前端打印方法之CSS控制网页打印样式

来源:http://www.jb51.net/web/70358.html CSS控制网页打印样式: 使用CSS控制打印样式,握刚刚使用时一塌糊涂,根本不知道CSS中的midia的作用是什么,问到别人 ...

CSS改变浏览器默认滚动条样式

前言 最近总是看到某网站滚动条不是浏览器默认样式,而是自定义样式   比如我博客的滚动条,自定义滚动条样式和hover前后的效果 顿时来了兴致和有一个疑问,这是怎么实现的呢? 解决   注:经测试,目 ...

在css中定义滚动条样式

1,Overflow内容溢出时的设置 overflow 水平及垂直方向内容溢出时的设置 overflow-x 水平方向内容溢出时的设置 overflow-y 垂直方向内容溢出时的设置 以上三个属性设置 ...

自设chrome默认滚动条样式

今天无聊,想着chrome这种全面使用html的浏览器,可不可以让我自行改变它的默认CSS呢,结果去查查,有,很好 win7/8目录为 C:\Users\[你的用户名]\AppData\Local\G ...

详解CSS设置默认字体样式

浏览器默认的样式往往在不同的浏览器.不同的语言版本甚至不同的系统版本都有不同的设置,这就导致如 果直接利用默认样式的页面在各个浏览器下显示非常不一致,于是就有了类似YUI的reset之类用来尽量重写浏 ...

eclipse 更改默认主题，重写默认滚动条样式(安装DevStyle主题插件)

1.点击Help->Eclipse Marktplace 2.弹出窗口输入: DevStyle 3.点击安装,重启eclipse 4.可以设置黑色和浅色主题,个人比较喜欢浅色,重点式滚动条样式变 ...

css实现修改默认滚动条样式

随机推荐

soj杂题

unique()函数是一个去重函数,STL中unique的函数 unique的功能是去除相邻的重复元素(只保留一个),还有一个容易忽视的特性是它并不真正把重复的元素删除.他是c++中的函数,所以头文件 ...

java反射案例

Java反射经典实例 2007-08-29 17:55:25 分类: Java Java提供了一套机制来动态执行方法和构造方法,以及数组操作等,这套机制就叫——反射.反射机制是如今很多流行框架的实现 ...

华为HG255D路由器使用OH3C进行中大校园网认证

之前用的上海贝尔RG100A-AA路由器,被我无情地摧残了,电源按钮挂了,只能换个路由器.由于在校内,使用OP还是比较方便的,网上淘了这款华为HG255D,店主已刷好OP,无线速率300M,想想也是值 ...

information_schema.routines 学习

information_schema.routines 用户查看mysql中的routine信息 1.information_schema.routines 表中的常用列: 1.

arcpy简单示例

最好在arcmap内置python模块运行. 这里用的是Zonel Stastic as Table模块,计算各个国家的逐月径流量的统计数据.需要对数百个tiff进行计算和导出,使用arcpy可以大大 ...

【教程】CRX格式插件不能离线安装？本地扩展CRX无法安装怎么办？

http://www.cnplugins.com/zhuanti/how-to-make-crx-install.html

vue中复选框全选与反选

html主要部分: