scrollbar滚动条修改样式

╰半橙微兮° 2022-12-30 07:41 447阅读 0赞

只有webkit内核才能用

把下面三个伪元素放在设置了overflow:scroll的标签上，less要在每条前面加上&

::-webkit-scrollbar { width: 7px;background-color: rgba(8, 8, 8, 0.7);}
      ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 2px rgba(255,255,255,.7);border-radius: 10px;}
      ::-webkit-scrollbar-thumb { -webkit-box-shadow: inset 0 0 2px #000;}

发表评论取消回复

表情：

评论列表（有 0 条评论，447人围观）

还没有评论，来说两句吧...

相关阅读

相关自定义滚动条样式 -webkit-scrollbar

![b91b68aa715b47b5bb874d8eec488176.png][] <div class="test"> <div class="sc

忘是亡心i/ 2024年03月30日 09:35/ 0 赞/ 193 阅读

相关 CSS3自定义滚动条样式 -webkit-scrollbar

webkit支持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条自定义样式，所以用处还是挺大的。当然，兼容所有浏览器的滚动条样式目前是不存在的 C

布满荆棘的人生/ 2023年01月13日 01:38/ 0 赞/ 341 阅读

相关 scrollbar滚动条修改样式

只有webkit内核才能用把下面三个伪元素放在设置了`overflow:scroll`的标签上，less要在每条前面加上`&` ::-webkit-scrol

╰半橙微兮°/ 2022年12月30日 07:41/ 0 赞/ 448 阅读

相关前端CSS 设置滚动条样式 ::-webkit-scrollbar

::-webkit-scrollbar CSS伪类选择器影响了一个元素的滚动条的样式 > ::-webkit-scrollbar 仅仅在支持WebKit的浏览器 (例如, 谷

布满荆棘的人生/ 2022年12月18日 07:59/ 0 赞/ 265 阅读

相关修改滚动条样式

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

淡淡的烟草味﹌/ 2022年11月25日 04:19/ 0 赞/ 360 阅读

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

知识点罗列简介 > 首先需要介绍一下滚动条的组成部分。滚动条包含 track 和 thumb ![watermark_type_ZmFuZ3poZW5naGVp

悠悠/ 2022年08月30日 15:50/ 0 赞/ 361 阅读

相关滚动条scrollbar

页面滚动条对于IE浏览器，可以单独设置滚动条样式，从而使其更加符合网站的整体设计。滚动条组成： 3dlight、highlight、face、arrow、

梦里梦外;/ 2022年08月06日 03:20/ 0 赞/ 320 阅读

相关 CSS3自定义滚动条样式 -webkit-scrollbar

> 概述: > > 当内容超出容器时，容器会出现滚动条，其自带的滚动条不美观，那么我们可以通过css伪类来实现对滚动条的自定义。首先我们要了解滚动条。滚动条从外观来看是由两部

Bertha 。/ 2022年04月24日 12:54/ 0 赞/ 440 阅读

相关滚动条样式修改

<style> .innerbox::-webkit-scrollbar {/滚动条整体样式/ width: 4px;

淩亂°似流年/ 2022年02月25日 13:19/ 0 赞/ 496 阅读

相关滚动条样式修改

记录一下修改滚动条需要修改的样式： ::-webkit-scrollbar { width: 8px; he

绝地灬酷狼/ 2021年11月17日 21:00/ 0 赞/ 564 阅读