基于谷歌内核浏览器滚动条样式

最新推荐文章于 2023-04-14 17:50:45 发布
最新推荐文章于 2023-04-14 17:50:45 发布
阅读量326 收藏
点赞数 1
分类专栏： css 文章标签： css 谷歌
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26272881/article/details/51006042
版权

首先我们主要用三个值进行设置：

1.-webkit-scrollbar这个伪类可以-webkit自身的滚动条渲染关闭，并重新定义属于自己的样式：

比如：.test::-webkit-scrollbar{

height:10px;//这里指的是横向滚动条的高度

width:10px://这里指的是竖向滚动条的宽度

}

2.-webkit-scrollbar-track这个伪类可以设置滚动条区域的背景样式；

3.-webkit-scrollbar-thumb这个伪类可以设置滚动条的样式；

SuperRiven
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
谷歌浏览器滚动条样式设置
u011705317的专栏
06-24 8300
/*---滚动条默认显示样式--*/   ::-webkit-scrollbar-thumb{      background-color:#018EE8;      height:50px;      outline-offset:-2px;      outline:2px solid #fff;      -webkit-border-radius:4px;    
谷歌火狐浏览器滚动条样式
gztrljh
11-02 341
/*宽度*/ ::-webkit-scrollbar { width: 7px; } /*滚动条*/ ::-webkit-scrollbar-track { background-color: #e0e0e0; } /*滑块*/ ::-webkit-scrollbar-thumb { background-color: #c0c0c0; } /* 火狐 */ * { scrollbar-color: #c0c0c0 #e0e0e0; /* 滑块颜色 滚动条背景颜色 */ scro
css 修改浏览器滚动条样式（火狐Firefox，谷歌google）
PrimaryColor
12-24 1万+
浏览器使用的内核说明： 浏览器 内核 备注 IE Trident IE、猎豹安全、360极速浏览器、百度浏览器 firefox Gecko 可惜这几年已经没落了，打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。 Safari webkit 从Safari推出之时起，它的渲染引擎就是Webkit，一提到 webkit，首先想到的便是 chrome，可以说，chrome 将 Webkit内核 深入人心，殊不知，Webkit 的
修改谷歌浏览器滚动条宽度和颜色
henry_liu的博客
04-14 1527
:-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
css设置谷歌浏览器滚动条样式
铃儿响叮当
06-08 550
复制代码 /*css主要部分的样式*/ /*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 10px; /*对垂直流动条有效*/ height: 10px; /*对水平流动条有效*/ } /*定义滚动条的轨道颜色、内阴影及圆角*/ ::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: rosybrown.
谷歌、火狐、ie浏览器更改滚动条样式
m0_66911948的博客
02-08 3654
【代码】谷歌、火狐、ie浏览器更改滚动条样式。
设置滚动条默认样式 谷歌浏览器
厚渡
06-22 1532
滚动条的默认样式是比较丑的，一般我们会重新设置下。
chrome滚动条样式修改
qq_36663951的博客
08-12 1万+
对于chrome浏览器，它提供了修改滚动条样式的接口，开发者只需要加上几句css脚本，就可轻松实现滚动条样式的修改. 先说一下滚动条的参数： ::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的::-webkit-scrollbar-button 滚动条两端的按钮::-webkit-scrollbar-track 外层轨道::-webkit-scrollbar-track
修改浏览器滚动条样式（兼容火狐，谷歌)
weixin_45843723的博客
06-23 1415
修改浏览器滚动条样式（兼容火狐，谷歌） //在添加overflow-y的类名上添加以下样式可修改滚动条默认样式 .dialog{overflow-y: scroll; } //兼容谷歌 .root .dialog::-webkit-scrollbar { width: 5px; border-radius: 8px; } /* 滚动条颜色 */ .root .dialog::-webkit-scrollbar-track { background-color: #555.
滚动条样式修改
热门推荐
coder_jxd的博客
04-16 3万+
浏览器中的滚动条样式大家一定都不陌生，其样式并不好康。可能很多小伙伴还不知道，这个东东的样式也可以修改（仅支持部分现代浏览器），本次就来带大家用 CSS 修改一下它的样式。
自定义滚动条样式
weixin_48271592的博客
07-14 493
滚动条美化： 原生滚动条不是很好看，能拯救一下还是要拯救的。 1.滚动条的属性们： 1、滚动条的属性（可选项） /* 滚动条整体部分 */ ::-webkit-scrollbar { } /* 滚动条里面滑块，能上下左右移动(取决于是垂直还是水平) */ ::-webkit-scrollbar-thumb { } /* 滚动条的轨道(里面装有thumb) */ ::-webkit-scrollbar-track { } /* 滚动条轨道两端的按钮，允许通过点击微调小方块的位置 */ ::-webkit-
-webkit-内核滚动条样式覆盖
09-09 671
今天看了下Chrome的网上商城, 感觉他们的滚动条很特别. 特地看了下他们的代码, 发现了他们做滚动条的各种元素的覆盖, 这个也可以用作select的框覆盖, 相信不久的将来, 这种css设计会用于各种浏览器, 本人在开发IE10内核的项目时, IE10已经是支持这类css, firefox, chrome和safari也是支持的. 特地分享该例子: Insert titl
谷歌浏览器css设置滚动条
hlvy
09-18 3737
效果: 代码 /*滚动条样式：谷歌浏览器下*/ ::-webkit-scrollbar{ width: 10px; height: 10px; background-color: #f5f7fa; } /*滚动条的轨道*/ ::-webkit-scrollbar-track{ /*box-shadow: inset 0 0 5px rgba(0,0,0,.3);*/ ...
自定义chrome 谷歌浏览器 滚动条样式
大树之殇的博客
02-08 2951
::-webkit-scrollbar:vertical { display:block; width: 18px; } ::-webkit-scrollbar-button:single-button, ::-webkit-scrollbar-button:double-button { display:block; width:18px; height:
谷歌浏览器的滚动条样式设置
weixin_45123004的博客
11-28 910
自定义网页的滚动条样式，做个笔记以防以后用到 // 自定义滚动条样式 // 这是针对缺省样式 (必须的) ::-webkit-scrollbar { width: 5px; height: 5px; } // 滚动条的滑轨背景颜色 ::-webkit-scrollbar-track { background-color: rgba(0, 0, 0, 0.2); } // 滑块颜色 ::-webkit-scrollbar-thumb { background-color: rgba(0,
谷歌浏览器 Chrome 如何自定义滚动条样式 -webkit-scrollbar
学习笔记
10-22 4355
谷歌浏览器 Chrome 如何自定义滚动条样式 -webkit-scrollbar 其实，谷歌浏览器中显示的滚动条是可以自定义的，可以定义它的滑道样式，拖动块样式。 滚动条的设置是通过伪类 // 滚动条整体 ::-webkit-scrollbar { z-index: 50; width: 10px; height: 3px; } // 滚动条滑道 ::-webkit-scrollbar-track { background-color: rgba(0, 0, 0, 0)
修改谷歌浏览器原生滚动条样式
weixin_41770018的博客
07-30 3422
 效果图：   <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0&quot
获取浏览器的默认滚动条宽度
id_dimu的博客
07-29 3221
function getBarWidth(){ let outDiv = document.createElement("div"); outDiv.style.width = "100px"; outDiv.style.position = "absolute"; outDiv.style.top = "-9999px"; document.body.a...
修改谷歌浏览器滚动条样式
Queen-Shir的博客
11-28 979
修改各个浏览器滚动条的样式
最新发布
07-28
要修改各个浏览器滚动条的样式，你可以使用 CSS 的 `::-webkit-scrollbar` 伪元素来针对 WebKit 内核的浏览器（如 Chrome、Safari）进行样式设置，使用 `::-moz-scrollbar` 伪元素来针对 Firefox 进行样式设置，而...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值