当前位置： 首页 > news >正文

CSS滚动条原理与自定义样式指南，CSS滚动条样式失效，滚动条样式无效，-webkit-scrollbar无效，overflow不显示滚动条

news 2026/2/10 20:31:25

滚动内容形成的必要条件

CSS Overflow属性解析

MDN官方文档-Overflow属性
菜鸟教程-Overflow属性

overflow 属性控制内容溢出元素框时在对应的元素区间内是否添加滚动条。

值描述
visible默认值。内容不会被修剪，会呈现在元素框之外。
hidden内容会被修剪，并且其余内容是不可见的。
scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit规定应该从父元素继承 overflow 属性的值。

⚠️ 重要注意事项：

  1. 仅对明确设置高度的块级元素生效
  2. MacOS系统默认隐藏滚动条（需滑动时才会显示，即使设置scroll值）

实现局部滚动需要满足两个核心条件：

  1. 容器具有确定的高度值（非auto）
  2. 设置overflow: scroll或overflow: auto

典型问题场景分析

<!DOCTYPE html>
<head><style>* {margin: 0;padding: 0;}.nav {width: 100%;height: 64px;background: lightcoral;}.main {/*这里的100%应该为100vh*/height: calc(100% - 64px);background: lightblue;}.content {height: 1300px;}</style>
</head><body><nav class="nav"></nav><main class="main"><div class="content"></div></main>
</body>
</html>

看起main被设置了高度，滚动条应该出现在main内，但实际运行会发现滚动条还是在body上的。

原因是：默认情况下，html 和 body 的高度由内容撑开，而非视口高度。

  • 当 .main 设置 height: calc(100% - 64px) 时，100% 继承的是 body 的高度，而 body 的高度此时等于其内容高度（即 .nav 的 64px + .main 的内容高度），形成循环依赖。

所以解决办法就是

  • 给body或html设定高度为100vh，
  • 或把height: calc(100% - 64px)的100%设置为100vh

滚动条样式

浏览器兼容

目前(2025/2/20)，推荐使用老的::-webkit-scrollbar属性

因为新的属性没有旧的能改的多，像是圆角和hover之类

  • scrollbar-color: initial;
  • scrollbar-width

⚠️注意：设置了新的scrollbar-color和scrollbar属性会覆盖老webkit属性，导致webkit属性失效

* {/* 平滑锚点跳转时的滚动 */scroll-behavior: smooth;/*谷歌121版本后的新属性与旧webkit-scrollbar冲突*/scrollbar-color: initial;scrollbar-width: initial;
}/* 针对所有元素的Webkit内核浏览器滚动条进行全局样式设置 */
*::-webkit-scrollbar {height: 6px;    /* 水平滚动条的高度 */width: 6px;     /* 垂直滚动条的宽度 */
}/* 隐藏滚动条两端的箭头按钮 */
*::-webkit-scrollbar-button {display: none;  /* 不显示滚动条按钮 */
}/* 自定义滚动条滑块样式 */
*::-webkit-scrollbar-thumb {background-color: var(--scrollbar-color);  /* 使用CSS变量定义滑块颜色 */border-radius: 3px;                        /* 滑块圆角（半径是高度/宽度的一半） */
}/* 鼠标悬停时滑块的样式变化 */
*::-webkit-scrollbar-thumb:hover {background-color: var(--scrollbar-hover-color);  /* 悬停时使用更醒目的颜色 */
}/* 
注意事项：
1. 这些样式仅在Webkit内核浏览器生效（Chrome/Safari/Edge等）
2. --scrollbar-color 和 --scrollbar-hover-color 是CSS变量，需在根元素定义
3. 通过调整 width/height 值可以改变滚动条粗细
4. border-radius 设置为尺寸的一半会呈现胶囊形状
5. 通配符 * 表示应用于所有元素，可根据需要替换为特定选择器
*/

相关文章：

CSS滚动条原理与自定义样式指南，CSS滚动条样式失效，滚动条样式无效，-webkit-scrollbar无效，overflow不显示滚动条

滚动内容形成的必要条件 CSS Overflow属性解析 MDN官方文档-Overflow属性 菜鸟教程-Overflow属性 overflow 属性控制内容溢出元素框时在对应的元素区间内是否添加滚动条。 值描述visible默认值。内容不会被修剪&#xff0c;会呈现在元素框之外。hidden内容会被修剪&#xf…...

编程日记 2025/2/26 12:45:26

Three.js 入门(辅助、位移、父子关系、缩放旋转、响应式布局)

本篇主要学习内容 : 三维坐标系与辅助坐标系物体位移与父子元素物体的缩放与物体的旋转设置响应式画布与全屏控制 点赞 关注 收藏 学会了 本文使用 Three.js 的版本&#xff1a;171 基于 Vue3vite开发调试 1.三维坐标系与辅助坐标系 1.1) 导入three和轨道控制器 // 导入…...

编程日记 2025/2/26 12:44:25

python算法-用递归打印数字3的幂--Day017

文章目录 前言采用创新方式&#xff0c;精选趣味、实用性强的例子&#xff0c;从不同难度、不同算法、不同类型和不同数据结构进行总结&#xff0c;全面提升算法能力。例1.用递归打印数字例2.相对排名 总结 前言 采用创新方式&#xff0c;精选趣味、实用性强的例子&#xff0c…...

编程日记 2025/2/26 12:42:23

Selenium 与 Coze 集成

涵盖两者的基本概念、集成步骤、代码示例以及相关注意事项。 基本概念 Selenium：是一个用于自动化浏览器操作的工具集，支持多种浏览器（如 Chrome、Firefox 等），能够模拟用户在浏览器中的各种操作，如点击、输入文本、选择下拉框等，常用于 Web 应用的自动化测试。Coze：它…...

编程日记 2025/2/26 12:41:22

AWS CLI将读取器实例添加到Amazon Aurora集群

Amazon Aurora是AWS提供的一种兼容MySQL和PostgreSQL的关系数据库服务。Aurora集群由一个写入器实例和多个读取器实例组成,可以提供高可用性、高性能和可扩展性。在本文中,我们将介绍如何使用AWS命令行界面(CLI)将读取器实例添加到现有的Aurora集群中。 © ivwdcwso (ID: u…...

编程日记 2025/2/26 12:40:16

NTS库学习，找bug中......

基础知识 Coordinate: 表示一个二维坐标点&#xff0c;包括 X 和 Y 坐标值。 CoordinateSequence: 由一系列 Coordinate 对象组成的序列&#xff0c;可以表示线、多边形等几何对象的顶点。 CoordinateFilter: 用于对几何对象的坐标进行过滤或修改的接口。 Geometry: 表示一个几…...

编程日记 2025/2/26 12:39:14

五十天精通硬件设计第40天-硬件测试流程

目录 一、硬件测试流程概述 二、详细测试流程 1. 需求分析与测试计划 2. 测试环境搭建 3. 测试执行 3.1 基本功能测试 3.2 性能测试 3.3 环境与可靠性测试 3.4 安全与合规性测试 4. 问题分析与调试 5. 回归测试与报告输出 三、关键注意事项 四、常见问题与解决 五…...

编程日记 2025/2/26 12:37:11

R语言安装教程（附安装包）R语言4.3.2版本安装教程

文章目录 前言一、安装包下载二、R-4.3.2安装步骤三、rtools43安装步骤四、RStudio安装步骤 前言 本教程将详细、全面地为你介绍在 Windows 系统下安装 R 语言 4.3.2 的具体步骤。无论你是初涉数据领域的新手&#xff0c;还是希望更新知识体系的专业人士&#xff0c;只要按照本…...

编程日记 2025/2/26 12:33:08

数据库 安装initializing database不通过

出现一下情况时&#xff1a; 处理方法&#xff1a; 将自己的电脑名称 中文改成英文 即可通过...

编程日记 2025/2/26 12:31:06

自动驾驶两个传感器之间的坐标系转换

有两种方式可以实现两个坐标系的转换。 车身坐标系下一个点p_car&#xff0c;需要转换到相机坐标系下&#xff0c;旋转矩阵R_car2Cam&#xff0c;平移矩阵T_car2Cam。点p_car在相机坐标系下记p_cam. 方法1&#xff1a;先旋转再平移 p_cam T_car2Cam * p_car T_car2Cam 需要注…...

编程日记 2025/2/26 12:29:04

信号——进程间通信（20250225）

1. 信号 管道&#xff1a;进程间数据通信&#xff08;同步通信&#xff09; 信号&#xff1a;进程间通信,用来发送通知(异步通信&#xff0c;中断) 1&#xff09;同步通信:发送端和接收端&#xff0c;使用同一时钟通信 异步通信:发送端和接收端使用不同时钟通信 …...

编程日记 2025/2/26 12:28:01

transformer架构嵌入层位置编码之动态NTK-aware位置编码

前文，我们已经构建了一个小型的字符级语言模型，是在transformer架构基础上实现的最基本的模型，我们肯定是希望对该模型进行改进和完善的。所以我们的另外一篇文章也从数据预处理、模型架构、训练策略、评估方法、代码结构、错误处理、性能优化等多个方面提出具体的改进点，但…...

编程日记 2025/2/26 12:26:58

东信营销科技巨额补贴仍由盈转亏：毛利率大幅下滑，现金流告急

《港湾商业观察》施子夫 近期&#xff0c;东信营销科技有限公司&#xff08;以下简称&#xff0c;东信营销科技&#xff09;递表港交所&#xff0c;联席保荐机构为海通国际和中银国际。 东信营销科技的国内运营主体为深圳市东信时代信息技术有限公司。尽管期内收入规模有所提…...

编程日记 2025/2/26 12:25:57

[电感、磁珠、0欧姆电阻]的区别与应用特性

1. 电感（Inductor） 基础特性： 储能元件：通过磁场存储能量，阻碍电流突变（）。 核心参数：电感值（L）、额定电流、直流电阻（DCR）、自谐振频率（SRF）。 频率特性：感抗 ，（通直流、阻交流），低频时阻抗低，高频时阻抗高（但受SRF限制）。 电路符号及实物：多为绕线结…...

编程日记 2025/2/26 12:23:55

车载诊断架构 --- LIN节点路由转发注意事项

我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。 老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师： 简单，单纯，喜欢独处，独来独往，不易合同频过着接地气的生活，除了生存温饱问题之外，没有什么过多的欲望，表面看起来很高冷，内心热情，如果你身…...

编程日记 2025/2/26 12:21:52

前端 AJAX 二、AJAX使用

环境准备&#xff1a; 使用AJAX技术我们需要用到HTML/CSS/JS/jQuery/JavaWeb相关知识,原生的JS也可以进行AJAX的操作,但是相对比较繁琐也没有必要,故此我们使用jQuery封装后的AJAX技术来进行学习; 创建AJAX请求 $.ajax({url : "ajax/getName?id"id,// ajax请求的…...

编程日记 2025/2/26 12:16:47

Windows - 通过ssh打开带有图形界面的程序 - 一种通过计划任务的曲折实现方式

Windows(奇思妙想) - 通过ssh打开带有图形界面的程序 - 一种通过计划任务的曲折实现方式 前言 Windows启用OpenSSH客户端后就可以通过SSH的方式访问Windows了。但是通过SSH启动的程序&#xff1a; 无法显示图形界面会随着SSH进程的结束而结束 于是想到了一种通过执行“计划…...

编程日记 2025/2/26 12:13:44

Android ViewStub延迟初始化加载布局View，Kotlin

Android ViewStub延迟初始化加载布局View&#xff0c;Kotlin activity_my.xml: <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_…...

编程日记 2025/2/26 12:09:40

Web自动化之Selenium下Chrome与Edge的Webdriver常用Options参数

目录 引言 说明 Add_argument() 添加方式 常用参数 Add_experimental_option() 添加方式 常用方法 任务结束后仍然保持浏览器打开 禁用“Chrome 正受到自动测试软件的控制”提示 设置下载路径 禁用弹窗拦截 禁用图片加载 禁用 JavaScript 注意 引言 …...

编程日记 2025/2/26 12:07:37

数据安全_笔记系列05：数据合规与隐私保护（GDPR、CCPA、中国《数据安全法》）深度解析

数据安全_笔记系列05&#xff1a;数据合规与隐私保护&#xff08;GDPR、CCPA、中国《数据安全法》&#xff09;深度解析 在全球数据跨境流动和隐私保护强监管的背景下&#xff0c;企业需同时满足多法域合规要求。以下从 法规要点、核心差异、实施策略、跨境传输、典型案例 等维…...

编程日记 2025/2/26 12:05:35

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

编程新知 2026/2/10 11:13:58

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计&#xff1a;let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性&#xff0c;这种设计体现了语言的核心哲学。以下是深度解析&#xff1a; 1.1 设计理念剖析 安全优先原则&#xff1a;默认不可变强制开发者明确声明意图 let x 5; …...

编程新知 2025/9/28 20:12:12

Java入门学习详细版（一）

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...

编程新知 2025/12/14 14:47:02

华为云Flexus+DeepSeek征文｜DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建

华为云FlexusDeepSeek征文&#xff5c;DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色&#xff0c;华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型&#xff0c;能助力我们轻松驾驭 DeepSeek-V3/R1&#xff0c;本文中将分享如何…...

编程新知 2026/2/2 2:30:58

大数据学习（132）-HIve数据分析

​​​​&#x1f34b;&#x1f34b;大数据学习&#x1f34b;&#x1f34b; &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 用力所能及&#xff0c;改变世界。 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4…...

编程新知 2025/10/7 8:52:21

Java线上CPU飙高问题排查全指南

一、引言 在Java应用的线上运行环境中&#xff0c;CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时&#xff0c;通常会导致应用响应缓慢&#xff0c;甚至服务不可用&#xff0c;严重影响用户体验和业务运行。因此&#xff0c;掌握一套科学有效的CPU飙高问题排查方法&…...

编程新知 2025/11/2 5:30:15

浪潮交换机配置track检测实现高速公路收费网络主备切换NQA

浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求&#xff0c;本次涉及的主要是收费汇聚交换机的配置&#xff0c;浪潮网络设备在高速项目很少&#xff0c;通…...

编程新知 2026/2/6 13:10:51

保姆级教程：在无网络无显卡的Windows电脑的vscode本地部署deepseek

文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama&#xff08;有网络的电脑&#xff09;2.2.3 安装Ollama&#xff08;无网络的电脑&#xff09;2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...

编程新知 2026/2/6 16:59:24

BLEU评分：机器翻译质量评估的黄金标准

BLEU评分&#xff1a;机器翻译质量评估的黄金标准 1. 引言 在自然语言处理(NLP)领域&#xff0c;衡量一个机器翻译模型的性能至关重要。BLEU (Bilingual Evaluation Understudy) 作为一种自动化评估指标&#xff0c;自2002年由IBM的Kishore Papineni等人提出以来&#xff0c;…...

编程新知 2026/1/13 7:39:19

Chromium 136 编译指南 Windows篇：depot_tools 配置与源码获取（二）

引言 工欲善其事&#xff0c;必先利其器。在完成了 Visual Studio 2022 和 Windows SDK 的安装后&#xff0c;我们即将接触到 Chromium 开发生态中最核心的工具——depot_tools。这个由 Google 精心打造的工具集&#xff0c;就像是连接开发者与 Chromium 庞大代码库的智能桥梁…...

编程新知 2026/2/8 22:05:17