html滚动条样式自定义,CSS自定义浏览器滚动条样式

前言

最近在使用Chrome浏览器访问QQ会员的官网时候发现网站的浏览器默认侧边滚动栏变成了如下图所示的样式，后来上网去查询了一下，然后得知该样式是可以通过CSS来设计的，于是就是自己捣鼓了一下。

该样式仅限于Chromium内核的浏览器，比如谷歌浏览器、QQ浏览器、360浏览器等等，非Chromium内核的浏览器则不会显示样式，例如火狐浏览器，欧朋浏览器等等。

CSS元素

::-webkit-scrollbar /*滚动条整体部分，其中的属性有width,height,background,border(就和一个块级元素一样)等。*/

::-webkit-scrollbar-button /*滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。*/

::-webkit-scrollbar-track /*外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。*/

::-webkit-scrollbar-track-piece /*内层轨道，滚动条中间部分(除去)。*/

::-webkit-scrollbar-thumb /* 滚动条里面可以拖动的那部分*/

::-webkit-scrollbar-corner /*边角*/

::-webkit-resizer /*定义右下角拖动块的样式*/

示例

::-webkit-scrollbar-button {

background-color:#FF7677;

}

::-webkit-scrollbar-track {

background:#FF66D5;

}

::-webkit-scrollbar-thumb{

background:#FFA711;

border-radius:4px;

}

::-webkit-scrollbar-corner {

background:#82AFFF;

}

::-webkit-scrollbar-resizer {

background:#FF0BEE;

}

html滚动条样式自定义,CSS自定义浏览器滚动条样式相关推荐

前端自定义设置各浏览器滚动条scrollbar样式的方法
有时候项目里 UI 的需求是改滚动条的样式 ,css 就可以改下面这篇文章主要就是介绍了前端如何来修改各大浏览器的滚动条样式,首先要知道,修改滚动条样式,其一是利用伪元素 -webkit-scro ...
css中如何设置hr的样式？css hr标签多种样式（图文）
在对html网页进行美化的时候,肯定少不了要用的hr标签进行修饰页面,但默认的hr标签样式对页面的修饰起不到什么好的作用,有经验的前端工作者就会通过使用css样式来对hr标签进行一些美化的操作.那么如 ...
用CSS控制浏览器滚动条样式源代码
1．overflow内容溢出时的设置 overflow-x水平方向内容溢出时的设置 overflow-y垂直方向内容溢出时的设置以上三个属性设置的值为visible(默认值).scroll.hidd ...
css 修改浏览器滚动条样式（火狐Firefox，谷歌google）
一.修改谷歌google: 修改样式: 1.全局修改,所有滚动条生效: ::-webkit-scrollbar{width:6px;height:6px; background-color: #000 ...
CSS修改浏览器滚动条样式
可以修改滚动条的以下样式: 1.颜色: 2.宽度: 3.阴影: 3.边框样式. CSS代码如下: <style> body { height: 3000px; } body::-webki ...
html指定滑块样式修改,修改IE浏览器滚动条样式的一个实例_html
下面是一个滚动条样式的例子,通过修改各个属性值可以改变滚动条的样子. 网页特效代码|jsCode.CN|-用css控制滚动条样式 BODY { SCROLLBAR-FACE-COLOR: #fcfcf ...
css美化浏览器滚动条
单独使用css的方法虽然简单,但只有chrome兼容好,ie只能改滚动条颜色,火狐不支持css修改 1.先看chrome滚动条每部分的名字(直接引用的https://www.cnblogs.com/w ...
CSS隐藏浏览器滚动条
网页为什么会出现滚动条呢? 只要网页内容大于视窗,滚动条就会出现. 一般好多用给外层元素(比如body)加 overflow: hidden;overflow-x:hidden,overflow:hi ...
html设置最小宽度滚动条,如何在CSS中设置滚动条的宽度？
现在许多项目中使用滚动条,在某些情况下,使用模拟滚动条. 许多大型邮箱都是使用CSS样式设置的div滚动条宽度,那么CSS如何设置滚动条的宽度? 您可以在CSS中使用::-webkit-scrollb ...

html滚动条样式自定义,CSS自定义浏览器滚动条样式

html滚动条样式自定义,CSS自定义浏览器滚动条样式相关推荐

最新文章

热门文章