css修改浏览器滚动条

最新推荐文章于 2024-07-07 16:41:06 发布
最新推荐文章于 2024-07-07 16:41:06 发布
阅读量233 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zzq422911531/article/details/104036956
版权 
<body class='scrollbar'>
</body>

.scrollbar{
  /*三角箭头的颜色*/
  scrollbar-arrow-color: #fff;
  /*滚动条滑块按钮的颜色*/
  scrollbar-face-color: #cdcdcd;
  /*滚动条整体颜色*/
  scrollbar-highlight-color: #cdcdcd;
  /*滚动条阴影*/
  scrollbar-shadow-color: #cdcdcd;
  /*滚动条轨道颜色*/
  scrollbar-track-color: #515151;
  /*滚动条3d亮色阴影边框的外观颜色——左边和上边的阴影色*/
  scrollbar-3dlight-color:#cdcdcd;
  /*滚动条3d暗色阴影边框的外观颜色——右边和下边的阴影色*/
  scrollbar-darkshadow-color: #cdcdcd;
  /*滚动条基准颜色*/
  scrollbar-base-color: #cdcdcd;
}
/* chrome & safari 浏览器 */
/*滚动条整体部分,必须要设置*/
.scrollbar::-webkit-scrollbar{
  width: 0px;
  height: 0px;
  background-color: #cdcdcd;
}
/*滚动条的轨道*/
.scrollbar::-webkit-scrollbar-track{
  background-color: #cdcdcd;
}
/*滚动条的滑块按钮*/
.scrollbar::-webkit-scrollbar-thumb{
  border-radius: 0;
  background-color: #515151;
  /* box-shadow: inset 0 0 5px #515151; */
}
/*滚动条的上下两端的按钮*/
.scrollbar::-webkit-scrollbar-button{
  height: 0;
  background-color: #cdcdcd;
}
universe Coding
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css更改浏览器默认滚动条
qq_45101496的博客
09-24 132
::-webkit-scrollbar { /*滚动条整体样式*/ width: 3px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px; } ::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 10px; background-color: #C1C1C1; background-image: -webkit-linear-gradient( 45deg, rgba
css修改浏览器默认滚动条样式
qq_44417271的博客
05-25 1040
/*滚动条样式*/ ::-webkit-scrollbar { width: 4px; /*height: 4px;*/ } ::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2); } ::-webkit-scrollbar-track { -webkit-box-s.
css 修改浏览器滚动条样式
MyOxygen的博客
09-01 211
在全局样式文件内设置滚动条样式。
css修改浏览器滚动条样式
Hruibin的博客
11-11 132
::-webkit-scrollbar-thumb //当前滚动条 ::-webkit-scrollbar //整个滚动条样式 &::-webkit-scrollbar { //底部背景 background-color: #fafafa; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; width: 6px;
在edge浏览器中scrollbar-color 不生效
最新发布
weixin_66130560的博客
07-07 237
在项目中遇到需要修改滑动条样式的需求，上网一查，大部分都说使用scrollbar-color ，但我使用之后，在edge浏览器打开并没有生效，在谷歌浏览器（Google Chrome）生效了。是一个比较新的 CSS 属性，用于指定滚动条的颜色。然而，它的兼容性可能会有限。如你有问题或疑惑，欢迎在评论区写下，必将努力解答；如本文有误区，希望你不吝赐教，让我们共勉！
使用CSS自定义浏览器滚动条 (webkit 已最新支持 scrollbar-width)
墨蓝天上 (MoLan)
02-06 4845
在不同的浏览器下默认的滚动条样式是不一样的，为了美观和统一必须修改滚动条的样式。网页中我们可以使用CSS在默认滚动条的基础上直接进行样式修改。 通常来说，webkit内核的浏览器是仅支持"-webkit-scrollbar"、却不支持"scrollbar-width"的。而在最近，webkit内核的浏览器也开始支持"scrollbar-width"了。 本文将带你了解 webkit对"scrollbar-width"的支持表现、使用中可能遇到的问题，以及如何在浏览器兼容性之间作出效果的平衡。
css修改浏览器默认的滚动条样式
weixin_45634433的博客
07-14 219
浏览器自带的滚动条样式多少有一点呆板,为使在项目中UI美观,所以重写了滚动条样式 要注意是哪个容器产生的滚动条 就把伪类的样式加到哪个容器上 1.html 2.css //css .content { width: calc(100vw - 250px); height: 100%; background-color: pink; overflow: auto; // 滚动条整体部分 &::-webkit-scrollbar { wid
CSS修改浏览器默认滚动条
yihanzhi的博客
08-28 1098
css修改默认滚动条代码： /*滚动条宽度*/ .box-wrap::-webkit-scrollbar { width: 4px; } /*滚动条里面小方块*/ .box-wrap::-webkit-scrollbar-thumb { border-radius: 5px; -webkit-box-shadow: inset005pxrgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2); } /*滚动条里面轨道*/ .box-wrap::-w
如何用CSS修改浏览器滚动条的样式（实例详解）
lin123_00的博客
05-18 1581
随着互联网的发展，人们对页面的要求越来越高，不只是功能好用，而且还要颜值高。前端开发人员对于浏览器的滚动条并不陌生，当自带的一些滚动条无法满足我们的审美时，你知道如何用CSS修改浏览器滚动条的样式吗？今天就给大家介绍如何设置div滚动条样式。有需要的小伙伴可以参考一下。 我们在自定义滚动条样式前，首先要了解滚动条的结构。通俗来讲，滚动条由两部分组成：一部分是可以滑动的部分，我们称它为滑块；另一部分是滚动条的轨道，也就是滑块的轨道，一般来说，为了美观，滑块的颜色要比轨道的颜色深一些。 更多相关视频：.
CSS修改浏览器滚动条的样式（实例详解）
web前端入门基础进阶教程-htmlcssjs
06-24 847
随着互联网的发展，人们对页面的要求越来越高，不只是功能好用，而且还要颜值高。前端开发人员对于浏览器的滚动条并不陌生，当自带的一些滚动条无法满足我们的审美时，你知道如何用CSS修改浏览器滚动条的样式吗？今天就给大家介绍如何设置div滚动条样式。有需要的小伙伴可以参考一下。 我们在自定义滚动条样式前，首先要了解滚动条的结构。通俗来讲，滚动条由两部分组成：一部分是可以滑动的部分，我们称它为滑块；另一部分是滚动条的轨道，也就是滑块的轨道，一般来说，为了美观，滑块的颜色要比轨道的颜色深一些。 首先介绍滚动条相关的CS
纯css修改浏览器scrollbar滚动条样式示例
09-22
本篇文章将详细介绍如何使用纯CSS修改浏览器的scrollbar滚动条样式。 首先，我们需要了解CSS中用于定义滚动条样式的伪元素选择器。主要有以下三个： 1. `::-webkit-scrollbar`：这个选择器用来设置整个滚动条的...
vue自定义浏览器滚动条(兼容大部分浏览器含ie)_vue tree组件 下拉滚动条
01-09
本篇文章将详细探讨如何在Vue项目中自定义浏览器滚动条，同时确保兼容大部分浏览器，包括较为古老的Internet Explorer（IE）。 首先，我们需要理解浏览器滚动条的工作原理。滚动条由两个主要部分组成：轨道（track...
【我的前端】CSS在Windows下实现Mac浏览器滚动条
生产队的刘同学
08-27 1716
用css和js在在Windows系统中实现Mac浏览器滚动条
如何使用 CSS 自定义浏览器的滚动条
我的博客，不一样的自我表达
01-31 761
滚动条在网页设计中经常被忽视，但却提供了增强整体用户体验的独特机会。借助 CSS，您可以将这种看似平凡的元素转变为网站设计中时尚而和谐的部分。在本文中，我们将探索各种 CSS 滚动条修改技术，这些技术不仅会增添一丝优雅，而且有助于打造更具凝聚力和视觉上令人愉悦的用户界面。1.隐藏默认滚动条：通过隐藏默认滚动条以支持更加自定义的方法，从头开始。2.纤薄时尚的滚动条：缩小滚动条的大小并添加微妙的颜色以减少干扰。3.渐变滚动条：将渐变效果注入滚动条，以获得现代和动态的外观。
css 改变滚动条的默认样式
全易
10-10 601
/*滚动条整体样式*/ body::-webkit-scrollbar { width: 10px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px; } /*滚动条里面的滚动的块样式*/ body::-webkit-scrollbar-thumb { border-radius: 10px; background-color: skyblue; backg...
CSS自定义浏览器滚动条样式
DDD4V的博客
04-15 223
滚动条组成 ::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-thumb滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条） ::-webkit-scrollbar-track滚动条的轨道（里面装有Thumb） ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。 ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除...
css自定义浏览器滚动条样式
舒小罗
07-13 145
webkit内核浏览器下修改样式 其实，代码很简单，css部分： //css： * { margin: 0; padding: 0; } div { width: 300px; height: 150px; border: 1px solid #444; margin: 50px; overflow: auto; } p { width: 400px; } /*控制整个滚动条*/ ::-webkit-scrollbar { b
CSS3自定义滚动条样式 -webkit-scrollbar
热门推荐
韩世雷 程序员专栏
10-23 30万+
有没有觉得浏览器自带的原始滚动条很不美观，同时也有看到很多网站的自定义滚动条显得高端，就连chrome32.0开发板都抛弃了原始的滚动条，美观多了。那webkit浏览器是如何自定义滚动条的呢？ 前言 webkit支持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条自定义样式，所以用处还是挺大的。当然，兼容所有浏览器的滚动条样式目前是不存在的。 演示
修改各个浏览器滚动条的样式
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、付费专栏及课程。

余额充值