CSS新特性之scrollbar？

Halle！ Halle！ 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 200+累计阅读 282平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄7年
关注
原创 最新推荐文章于 2026-08-22 11:26:31 发布 282 阅读 AI 写同款· GEO 优化 ›
CSS Overflow 5 原生轮播：无需JS实现带按钮与标记的滚动区域（Chrome 135+） 本文详细介绍了CSS Overflow 5原生轮播技术在Chrome 135+中的应用，通过`::scroll-button()`和`::scroll-marker()`伪元素实现无需JavaScript的轮播图功能。文章包含基础实现、高级技巧、无障碍优化及企业级案例，帮助开发者提升网页设计效率与性能。 阅读详情

CSS新特性之scrollbar？

用于实现自定义滚动条样式。用伪元素方式来实现。伪元素为

::-webkit-scrollbar   滚动条为横向width还是纵向height

::-webkit-scrollbar-thumb   滚动条的样式如背景色，border-radius

::-webkit-scrollbar-track    滚动条容器的样式如背景色，阴影box-shadow

收录于
前端大集合

当前文章被收录于：

前端大集合
112 篇文章 0 人学习

就html、css、JavaScript等零散的东西。本人已转行，因而以前无聊摘录的笔记作统一处理。

订阅专栏 查看详情
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
CSS自定义滚动条：从样式控制到UI系统设计 滚动条是网页中最常被交互却最易被忽视的UI组件，其本质是浏览器渲染管线中关键的视觉反馈与运动锚点。理解`::-webkit-scrollbar`伪元素体系、`scrollbar-width`的空间控制逻辑及`scrollbar-color`的无障碍语义，是构建一致、高性能、可访问界面的基础能力。现代CSS已支持滚动条过渡动画、`scrollbar-gutter`防抖动布局、触控热区优化等工程级特性，使其超越‘美化’范畴，成为UI系统节奏感与品牌语言的重要组成部分。本文聚焦跨浏览器兼容实践、性能避坑与设计哲学 阅读详情

相关推荐

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

滚动条样式一 /* 样式一 */ /*滚动条整体样式 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:

JackieDYH的博客 3110

CSS Scrollbar (滚动条)

webkit内核浏览器（Chrome、Edge） 类名 作用 ::-webkit-scrollbar 滚动条整体部分，其中的属性有width,height,background,border（就和一个块级元素一样）等。 ::-webkit-scrollbar-button 滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。

SeriousLose 9216

手把手教你用支付宝密钥工具生成RSA2密钥对（含Windows/Mac操作截图）

本文详细介绍了如何使用支付宝密钥工具生成RSA2密钥对，包括Windows和Mac平台的操作步骤与截图。从工具下载、安装到密钥生成、配置支付宝平台，再到开发环境集成实战，手把手教你完成支付宝支付接口对接。特别强调密钥安全管理和最佳实践，帮助开发者避免常见安全隐患。

mongodb5scout的博客 257

css 常用滚动条

*滚动条的背景区域的圆角*//*滚动条的背景颜色*//*滚动条的背景区域的内阴影*//*滑块 滚动条的内阴影*/

qq_34114535的博客 1680

基于PyTorch的BP神经网络PID控制器动态调参实战

本文详细介绍了基于PyTorch的BP神经网络PID控制器动态调参实战，结合BP神经网络的自适应能力和PID控制算法的经典优势，实现工业控制中的高效参数调整。通过PyTorch实现BP-PID融合架构，包括网络设计、损失函数优化及动态调参技巧，显著提升控制性能，适用于温度控制、电机控制等场景。

weixin_29094775的博客 522

Infineon MOSFET开关损耗计算实战指南

本文是英飞凌MOSFET开关损耗计算的实战指南。针对MOSFET发热问题，文章深入剖析了开关损耗的产生机理，并基于Infineon数据手册的关键参数，手把手推导了开通与关断损耗的工程计算公式。同时，指南强调了栅极电阻、寄生参数等实际因素对损耗的影响，并提供了从理论计算到实测优化的完整路径，帮助工程师精准评估与优化电源设计。

weixin_29212867的博客 443

css滚动条样式指南

css滚动条样式指南

qq_42880714的博客 1万+

汇川AM系列PLC玩转CNC：手把手教你用File模式读取G代码文件（附避坑指南）

本文详细介绍了如何使用汇川AM系列PLC的File模式读取G代码文件，涵盖从CAD设计到PLC配置的全流程。特别针对路径格式、文件类型等常见问题提供避坑指南，帮助工程师快速实现CNC加工的自动化控制。

weixin_33582311的博客 406

WHAT - 滚动条 css scrollbar-* 属性

通过/* 圆形滑块 */

weixin_58540586的博客 1326

VirusTotal API密钥获取与Python实战：从注册到自动化威胁分析

在网络安全和自动化运维领域，API（应用程序编程接口）是实现系统间数据交互与功能集成的核心技术。其工作原理是通过预定义的协议和端点，允许程序化访问特定服务的数据与功能。对于安全工程师和威胁分析师而言，API的价值在于能够将手动、重复的安全操作（如文件扫描、情报查询）转化为自动化工作流，从而极大提升威胁检测与响应的效率。一个典型的应用场景是集成第三方威胁情报平台，以实现对可疑文件、URL或哈希值的批量与实时分析。本文聚焦于全球知名的威胁情报服务VirusTotal，详细解析其API密钥的注册流程、安全配置要点

weixin_28707739的博客 420

立项书8分钟定生死？手把手教你用ChatGPT辅助打造高水平申报书，让评审专家一看就想打高分！

宏大叙事、空话堆砌只会让评审绕晕，不如聚焦一个具体问题，拿出清晰的研究路径、扎实的设计方案，把“我想做什么、为什么做、打算怎么做”讲明白。对评审来说，关键不在你读了多少，而在你能否看清领域的共识、争议和空白，GPT的作用就在于帮你理清研究脉络，发现问题结构，聚焦那些还没被充分讨论的变量或方法，去提升综述的深度。之前要用到ProcessOn、Draw.io等工具画流程图，现在有了ai虽然方便了，但也需要多次调教，如果嫌麻烦，七哥给大家准备了课题申报常用的流程图，技术路线图，方便大家直接拿来编辑填空使用。

智能AI让学术科研更容易 291

CSS新特性之scrollbar

CSS scrollbar 用于实现自定义滚动条样式。 ：：-webkit-scrollbar ：: -webkit-scrollbar-thumb ：：-webkit-scrollbar-track <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>滚动条</title> <style> bo

MW 734

用 SemanticObject 把字段变成可点击链接：Fiori Elements Navigation Using a Link 的工程化实践

SAP Fiori elements 通过 Common.SemanticObject 注解可将字段转为可点击链接，实现应用间跳转。当源字段名与目标属性名不一致时，需使用 Common.SemanticObjectMapping 进行映射。该功能依赖 Fiori Launchpad 的目标映射配置，确保正确解析 semantic object + action 并传递参数。常见误区包括未配置目标映射或字段映射错误，需逐一检查语义标注、intent 解析和参数传递链路。

2007 年 ~ 2025 年，深耕 SAP 技术 18 年 272

2025年十大CSS新特性：已在所有主流浏览器中支持

这些新特性已经在所有主流浏览器中得到支持，它们减少了许多JavaScript的工作绕道，让您能够构建更加简洁、高效、易维护的布局和交互。引入了更多的控制，允许您在没有复杂 JavaScript 的情况下反转或暂停过渡。这为平滑的UI交互和更复杂的动画场景铺平了道路。对于东亚语言排版，允许精确控制小注释（ruby文本）的位置，如位于主文本的上方或旁边。让我肌能够定制滚动条的轨道和拇指，增强设计一致性，尤其是在暗色或主题UI中。直接在CSS中进行计算，消除了许多JavaScript或预处理器的使用。

粉丝们务必加入微信粉丝群 1677

STM32开发 -- LIS3DH三轴加速度计开发详解

这次要讲一下LIS3DH三轴加速度计的开发使用，之前是有讲过 MPU6050开发 的，但当时是在Linux下做的。额，还是个半成品，哈哈。现在手边有STM32的开发板，可以实实在在的来实现以下卡尔曼滤波了。 一、LIS3DH初识 依照惯例，先看一下手册，大致先了解一下，LIS3DH是什么模块。 下载：LIS3DH datasheet 1、描述 LIS3DH是一款超低功耗高性能三轴线性加速度计，属于...

不积跬步，无以至千里 2万+

温度PID控制PLC程序

温度PID稳定控制程序，适用于欧姆龙PLC，对其他PLC也具有很大参考价值

2025年10个强大 CSS 新特性

它们消除了许多 JavaScript 变通方法的需求，让你能够构建更简单、更快、更易于维护的布局和交互。CSS 持续进化，带来了许多新功能，让我们的工作更高效、代码更简洁、能力更强大。以下是十个你可以立即开始使用的亮点功能。这样的函数使得在 CSS 中进行直接的数学运算成为可能，减少了对预处理器或 JavaScript 的依赖。将自定义属性转变为具有类型、默认值和继承规则的完全声明的变量，使得它们可以用于动画等场景。(取余) 这样的新函数进行计算，从而避免了许多 JavaScript 或预处理器的技巧。

zz_jesse的博客 799

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android：LinePhone3.2.7(最新版本)，官网地址：http://www.linphone.org/

HTML+CSS

Sass和Less Sass和Less都属于CSS预处理器，CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，如：变量、语句、函数、继承等概念。将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行CSS的编码工作。 官网地址： http://lesscss.org/ VSCode插件：Easy LESS 官网地址： https://sass-lang.com/ VSCode插件：Easy Sass Sass和Less

qq_45399931的博客 228

VB摄像头监控

该VB模块可对摄像头捕获的画面进行录像等，可在创建的窗口进行控制

ET2012新版免狗免安装绿色软件

ET2012新版免狗免安祖昂绿色软件。，新界面，新视觉，

总结+回顾 2024 & 2025 CSS又出了哪些新特性?

【代码】总结+回顾 2024 & 2025 CSS又出了哪些新特性?

weixin_45555699的博客 1177

lesson52：CSS进阶指南：雪碧图与边框技术的创新应用

本文深入解析2025年CSS雪碧图与边框系统的核心技术及应用。雪碧图通过合并图标减少HTTP请求，结合自动化工具提升开发效率，支持响应式设计和多状态交互。现代边框系统新增椭圆半径、多层阴影等特性，实现渐变、动画等视觉效果。文章详细介绍了性能优化策略，包括雪碧图排列算法、边框渲染优化，并提供了社交按钮等实战案例。随着AI辅助优化和CSS Houdini等技术的发展，这些技术将持续推动网页性能与视觉体验的边界。

2402_82363599的博客 1004

内容部分超出出现滚动，隐藏滚动条（还可以滚动）

方法一：利用 css 3 的新特性 -webkit-scrollbar, 但是这种方式不兼容 火狐 和 IE 方法二：利用内外层嵌套, 模拟, 兼容所有浏览器, 相对于方法一比较麻烦, 使用时不能对滚动条声明任何样式 ...

@芈文 的博客 5667

HTML+CSS(5)

1.CSS Hack CSS Hack用来解决浏览器的兼容性问题，为不同版本的浏览器定制编写不同的CSS效果，使用每个浏览器单独识别的样式代码，控制浏览器的显示样式。 Hack分类 CSS属性前缀法 属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀，以达到预期的页面展现效果 前两个前缀加在属性前面，后面两个加载属性值后面 前缀标识 兼容浏览器 _ IE6 +、*

xiaomin_er的博客 346

overflow:overlay无效？试试scrollbar-gutter: stable吧

这个属性是今年新鲜出炉的新特性，文档地址👉https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter，四大浏览器均以支持，简单来说。这个属性会将滚动条悬浮在容器上方，有点类似于定位，不过最近在使用这个属性的时候发现没有生效。而当滚动条出现时，因为滚动条的宽度会导致我们的布局错乱，这是非常让人苦恼的，所以overflow有个。属性，当我们布局的时候，如果元素溢出了容器，此时就会出现滚动条。、元素两边都又滚动条的距离，保证元素居中。

qq_45279180的博客 1676

使用 scrollbar-gutter CSS 属性解决由滚动条引起的不必要的布局偏移

使用 scrollbar-gutter CSS 属性解决由滚动条引起的不必要的布局偏移

5794

CSS scrollbar-gutter 与 100vw 方案：解决布局跳动的2种现代CSS方法解析

本文深入解析了CSS中解决布局跳动问题的两种现代方法：`scrollbar-gutter`属性和`100vw`计算方案。通过对比实现原理、浏览器兼容性和应用场景，帮助开发者选择最适合的方案来消除滚动条导致的布局偏移，提升页面稳定性和用户体验。

chutisun0039的博客 396

2024 年 10 个很实用的 CSS 新特性，你不一定知道！

CSS 既简单又复杂。刚开始学起来很容易，但 CSS 不断更新，设计方法也在变化，总有新的功能和特性出现来解决旧问题。这可真是个让人又爱又恨的家伙！最近几年，CSS 涌现出很多新特性，让网页设计变得更强大、更灵活。今天就来聊聊一些比较实用，并且已经得到广泛支持的新特性，帮助你提升网页设计的技能，做一个更牛的 web 设计师！aspect-ratio: 轻松控制元素比例aspect-ratio属性...

前端开发博客 4097

Angular自定义滚动条ngx-scrollbar深度解析：为何原生滚动机制性能如此出众

ngx-scrollbar 是一款面向 Angular 的自定义滚动条组件库，它最核心的设计是：**内容滚动完全交给浏览器的原生滚动机制，自定义滚动条只是一层视觉覆盖层**。正因如此，它在长列表、大数据表格等重载场景下依然丝滑流畅。下面用通俗的方式拆解它的性能秘密。 ## 30秒认识 ngx-scrollbar：它解决了什么问题？ 浏览器自带的滚动条样式几乎无法美化，而很多传统"自定义滚动条"

gitblog_00860的博客 419
上一篇： 网站性能优化之图片整合？
下一篇： 函数基础？重名函数的危险？构造函数？
点赞 0
评论 0
书签 书签 0
Halle！
Halle！
博客等级 码龄7年 303粉丝 133原创
+ 关注 专栏目录 订阅专栏
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值