谷歌浏览器突然支持了scrollbar-width和scrollbar-color

最新推荐文章于 2024-07-07 16:41:06 发布

sailor_studio

最新推荐文章于 2024-07-07 16:41:06 发布

阅读量517

点赞数 7

分类专栏： VUE 文章标签： html 前端 chrome firefox

本文链接：https://blog.csdn.net/sailor_studio/article/details/136171696

版权

VUE 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

谷歌浏览器突然在1月23号121版本支持了scrollbar-color和scrollbar-width

导致为了兼容火狐浏览器而设置这两个属性的界面被打回原形，

有遇到相同问题的下伙伴吗？

先记录一下

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

sailor_studio

关注关注

7
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

谷歌、火狐、ie浏览器更改滚动条样式

m0_66911948的博客

02-08

3716

【代码】谷歌、火狐、ie浏览器更改滚动条样式。

火狐浏览器滚动条兼容问题

grootbaby

02-20

5773

在日常开发中，我们经常会用到 overflow: scroll; 但浏览器自带的默认滚动条很难看，因此我们会需要美化它方法一：自定义美化谷歌 chrome 浏览器美化滚动条方法：（网上有很多种美化方法，此为一种） .scrollbar { overflow: auto; float: left; border: none; } .scrollbar::-w...

1 条评论您还未登录，请先登录后发表或查看评论

在edge浏览器中scrollbar-color 不生效

最新发布

weixin_66130560的博客

07-07

245

在项目中遇到需要修改滑动条样式的需求，上网一查，大部分都说使用scrollbar-color ，但我使用之后，在edge浏览器打开并没有生效，在谷歌浏览器（Google Chrome）生效了。是一个比较新的 CSS 属性，用于指定滚动条的颜色。然而，它的兼容性可能会有限。如你有问题或疑惑，欢迎在评论区写下，必将努力解答；如本文有误区，希望你不吝赐教，让我们共勉！

Chrome浏览器滚动条样式优化

weixin_45580774的博客

03-15

562

滚动条

使用CSS自定义浏览器滚动条 (webkit 已最新支持 scrollbar-width)

墨蓝天上 (MoLan)

02-06

5165

在不同的浏览器下默认的滚动条样式是不一样的，为了美观和统一必须修改滚动条的样式。网页中我们可以使用CSS在默认滚动条的基础上直接进行样式修改。通常来说，webkit内核的浏览器是仅支持"-webkit-scrollbar"、却不支持"scrollbar-width"的。而在最近，webkit内核的浏览器也开始支持"scrollbar-width"了。本文将带你了解 webkit对"scrollbar-width"的支持表现、使用中可能遇到的问题，以及如何在浏览器兼容性之间作出效果的平衡。

【现代 CSS】标准滚动条控制规范 scrollbar-color 和 scrollbar-width

奇舞周刊

05-27

419

Chrome 在 121 版本开始，原生支持了两个滚动条样式相关的样式 scrollbar-color 和 scrollbar-width。要知道，在此前，虽然有 ::-webkit-scrollbar[1] 规范可以控制滚动条，可是，::-webkit-scrollbar 是非标准特性，在 MDN 文档中都明确了不应该在生产环境使用它。MDN - ::-webkit-scrollbar Non-...

浏览器页面滚动条美化（样式）

wang839305939的博客

06-11

4436

浏览器页面滚动条美化（样式）最近测试反应我们的产品在浏览器中当页面宽高出现溢出的情况下页面滚动条太丑了！让我们美化一下！然后花了一点时间专研了一下关于滚动条样式的相关知识，今天就在这里和大家一起分享一下：其实滚动条样式是由两部分构成，一是滚动槽，二就是滑块，其实我们可以把他理解成轨道和火车的关系就行了，浏览器默认的样式其实就像我们传统的绿皮火车，现在的高铁其实就像修改后的样式，改

现在是谷歌浏览器设置-webkit-scrollbar-thumb背景色是可以高度没有作用

05-30

如果您在谷歌浏览器中使用 `::-webkit-scrollbar-thumb` 选择器来自定义滚动条的样式，但是设置了背景色却没有效果，可能是因为您还需要设置 `::-webkit-scrollbar` 伪类选择器来启用滚动条的显示。以下是一个示例...

教你自定义谷歌浏览器的滚动条样式

10-12

谷歌浏览器支持 CSS3，因此您可以使用 CSS3 的样式来自定义滚动条的样式。在学习自定义谷歌浏览器滚动条样式的过程中，我们了解了如何使用 CSS 来改变滚动条的样式，并且学会了如何使用 Custom.css 文件来实现...

重叠式滚动条：:artist_palette:重叠式滚动条可自定义主题，适用于基于Firefox和Chrome的浏览器

02-05

对于Firefox，我们需要使用`scrollbar-color`和`scrollbar-width`等属性来自定义滚动条。例如： ```css /* Chrome */ ::-webkit-scrollbar { width: 8px; /* 定义滚动条宽度 */ } ::-webkit-scrollbar-thumb { ...

谷歌浏览器滚动条样式修改

07-27

要修改谷歌浏览器滚动条的样式，你可以使用CSS来实现。以下是一种方法： 1. 首先，在你的CSS文件中定义一个新的滚动条样式。例如： ```css /* 滚动条的轨道 */ ::-webkit-scrollbar-track { background-color: #...

自定义浏览器滚动条样式（兼容chrome和firefox）

前端队长Daotin

06-19

3880

大家好，我是前端队长Daotin，想要获取更多前端精彩内容，关注我，解锁前端成长新姿势。以下正文：问题描述浏览器默认的滚动条样式太丑了，而且不同的浏览器下滚动条的样式也不一样，为了美观和统...

Scrollbar浏览器滚动条样式美化-知识点-案例

JackieDYH的博客

07-21

2286

滚动条样式一 /* 样式一 */ /*滚动条整体样式 body:: 只给body加样式 ::给全部*/ ::-webkit-scrollbar { width: 4px; /*高宽分别对应横竖滚动条的尺寸*/ height: 4px; } /*滚动条里面小方块*/ ::-webkit-scrollbar-thumb { border-radius: 4px; -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background:

2. 滚动条 —— css样式设置

weixin_44292241的博客

02-08

4255

一、滚动条 ——chrome ::-webkit-scrollbar——滚动条总占位的宽、高、背景色(白)、border，无hover ::-webkit-scrollbar-track——轨道，背景色(红，图，display:none)、内阴影、圆角，有:hover ::-webkit-scrollbar-thumb——滑块，背景色（黑）、内阴影、圆角，有:hover ::-webkit-scrollbar-button——两端按钮(两端的三角形按钮...

CSS-界面滚动时不显示滚动条

高先生的猫

08-18

2016

设置滚动条的样式： div::-webkit-scrollbar { width: 0; } 关于::-webkit-scrollbar ::-webkit-scrollbarcss伪类选择器影响了一个元素的滚动条的样式 ::-webkit-scrollbar 仅仅在支持WebKit的浏览器 (例如, 谷歌Chrome, 苹果Safari)可以使用. css滚动条选择器你可以使用以下伪元素选择器去修改各式webkit浏览器的滚动条样式: ::-webkit-scroll...

滚动条详解：跨平台iOS、Android、小程序滚动条隐藏及自定义样式综合指南

JINGWHALE

04-21

3032

随着用户界面体验提升的要求，滚动条自定义样式以及滚动条隐藏精致化的需求日渐增加，本文详细介绍了小程序、iOS、Android平台滚动条的隐藏方法，以及滚动条一般自定义样式的方法。在保持界面整洁、避免内容溢出的同时，确保用户能够访问所有信息，提升浏览体验。

前端实现浏览器自定义滚动条

从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！

03-27

4906

前端实现浏览器自定义滚动条

谷歌浏览器滚动条显示问题

Bling Bling ~~

06-04

4436

最近想在自己的项目中添加滚动条，因为在一个数据很多的时候，不加滚动条的话很容易造成下面的数据被忽略掉然而有一个很有意思的是IE中可以正常显示滚动条，但是谷歌就会自动去除滚动条，所以要像个办法，把谷歌的滚动条加上加完滚动条 IE效果： overflow: auto; height: 400px; -ms-scroll-chaining: chained; -ms-content-zooming: zoom; -ms-scroll-rails: n

css修改浏览器滚动条

universe的博客

01-19

235

<body class='scrollbar'> </body> .scrollbar{ /*三角箭头的颜色*/ scrollbar-arrow-color: #fff; /*滚动条滑块按钮的颜色*/ scrollbar-face-color: #cdcdcd; /*滚动条整体颜色*/ scrollbar-highlight-color: #cdc...