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

完美隐藏滚动条方案 (2024 最新验证)

news 2026/2/9 17:32:43

完美隐藏滚动条方案 (2024 最新验证)

 

css
 

/* 全局隐藏竖直滚动条但保留滚动功能 */
html {overflow: -moz-scrollbars-none;  /* Firefox 旧版 */scrollbar-width: none;          /* Firefox 64+ */-ms-overflow-style: none;       /* IE/Edge */overflow-y: overlay;            /* 防止布局偏移 */width: 100vw;                   /* 修复 Webkit 异常 */
}/* Chrome/Safari/Edge 等 Webkit 内核浏览器 */
::-webkit-scrollbar {width: 0 !important;            /* 必须加 !important */height: 0 !important;background-color: transparent; /* 彻底透明化 */
}/* 修复内容抖动问题 */
body {padding-left: calc(100vw - 100%); /* 水平补偿 */padding-right: calc(100vw - 100%); 
}
 

 

分步验证流程
 

  1. ​检查 HTML 结构
 

 

html
 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!-- 必须添加 viewport meta --><meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body><!-- 添加足够高度的内容 --><div style="height: 2000px">测试内容</div>
</body>
</html>
 

  1.  
    ​浏览器强制刷新
     
    • Ctrl + Shift + R (Windows)
    • Cmd + Shift + R (Mac)
     
  2.  
    ​开发者工具检查
     
    • 打开 Elements 面板
    • 检查 <html> 和 <body> 的样式应用
    • 确认没有其他 CSS 覆盖
     
 

 

常见问题排查表
 

现象解决方案
​Chrome 仍显示细线​添加 ::-webkit-scrollbar-track { background: transparent !important; }
​Firefox 无效​检查 about:config 中 layout.css.scrollbar-width.enabled 是否为 true
​Safari 异常​添加 body { -webkit-overflow-scrolling: touch; }
​内容跳动​确认已添加 padding-right: calc(100vw - 100%)
​移动端异常​添加 @media (hover: none) { overflow-y: auto; }
 

 

按容器隐藏的可靠方案
 

 

html
 

<div class="custom-scroll-container"><!-- 长内容 -->
</div><style>
.custom-scroll-container {overflow-y: auto;height: 300px;/* 隐藏方案 */scrollbar-width: none;-ms-overflow-style: none;
}.custom-scroll-container::-webkit-scrollbar {display: none !important;
}/* 强制显示滚动轨道 */
.custom-scroll-container {scrollbar-gutter: stable;
}
</style>
 

 

终极验证方法
 

在浏览器控制台执行以下代码，实时检查效果：
 

 

javascript
 

// 检查 html 样式
console.log(getComputedStyle(document.documentElement).overflowY) // 应为 "overlay"// 检查滚动条宽度
console.log(document.documentElement.offsetWidth - document.documentElement.clientWidth) // 应为 0














相关文章：
















完美隐藏滚动条方案 (2024 最新验证)




完美隐藏滚动条方案 (2024 最新验证) css 
/* 全局隐藏竖直滚动条但保留滚动功能 */
html {overflow: -moz-scrollbars-none;  /* Firefox 旧版 */scrollbar-width: none;          /* Firefox 64 */-ms-overflow-style: none;       /* IE/Edge */overflow-y: overlay;       …...






编程日记
2025/2/26 6:32:40



















单片机的串口（USART）




Tx - 数据的发送引脚&#xff0c;Rx - 数据的接受引脚。 
串口的数据帧格式  空闲状态高电平&#xff0c;起始位低电平&#xff0c;数据位有8位校验位&#xff0c;9位校验位&#xff0c;停止位是高电平保持一位或者半位&#xff0c;又或者两位的状态。 
8位无校验位传输一个字节…...






编程日记
2025/2/26 6:31:28



















实现分布式限流开源项目




以下是10个可以实现分布式限流中间件的开源项目推荐&#xff0c;这些项目基于不同的技术栈&#xff0c;适用于多种应用场景&#xff1a; 
1. **Alibaba Sentinel**      Sentinel 是阿里巴巴开源的分布式限流中间件&#xff0c;支持多种限流策略&#xff08;如QPS、并发线程数等…...






编程日记
2025/2/26 6:27:18



















递归构建行政区域树（二）




概述 
这篇博客中构建出的行政区域树利用element-ui的Tree组件展示出来。 实现 
源码位于码云&#xff0c;欢迎点击哦。 
项目结构  
最后 
好久没写基于element-ui的项目了&#xff0c;都有点生疏了。 
好了&#xff0c;如果对你有帮助&#xff0c;欢迎点个免费的赞哦。...






编程日记
2025/2/26 6:26:10



















AR技术下的电商：虚拟试穿/试用/试戴成新风尚




随着科技的日新月异&#xff0c;增强现实&#xff08;AR&#xff09;技术正悄然改变着我们的生活&#xff0c;尤其在电子商务领域&#xff0c;AR技术的融入正掀起一场前所未有的变革。那么&#xff0c;AR技术究竟是何方神圣&#xff1f;它在电商领域又展现出了哪些非凡的应用呢…...






编程日记
2025/2/26 6:25:06



















社群团购平台的愿景构建与开源链动2+1模式S2B2C商城小程序应用探索




摘要&#xff1a;在数字经济背景下&#xff0c;社群团购作为一种新兴的商业模式&#xff0c;凭借其独特的互动性和便捷性&#xff0c;展现出巨大的市场潜力。本文旨在探讨社群团购平台愿景的构建策略&#xff0c;并结合开源链动21模式S2B2C商城小程序的应用&#xff0c;为创业者…...






编程日记
2025/2/26 6:24:01



















笔记20250225




关于上拉电阻和下拉电阻的作用 
原理 上拉电阻&#xff1a;在上拉电阻所连接的导线上&#xff0c;如果外部组件未启用&#xff0c;上拉电阻则“微弱地”将输入电压信号“拉高”。当外部组件未连接时&#xff0c;对输入端来说&#xff0c;外部“看上去”就是高阻抗的&#xff0c…...






编程日记
2025/2/26 6:22:58



















【项目】基于Boost自主实现搜索引擎




&#x1f525; 个人主页&#xff1a;大耳朵土土垚 &#x1f525; 所属专栏&#xff1a;Linux系统编程 这里将会不定期更新有关Linux的内容&#xff0c;欢迎大家点赞&#xff0c;收藏&#xff0c;评论&#x1f973;&#x1f973;&#x1f389;&#x1f389;&#x1f389;  文章目…...






编程日记
2025/2/26 6:21:48



















使用 Open3D 批量渲染并导出固定视角点云截图




一、前言 
在三维点云处理与可视化中&#xff0c;固定视角批量生成点云渲染截图是一个常见的需求。例如&#xff0c;想要将同一系列的点云&#xff08;PCD 文件&#xff09;在同样的视角下生成序列图片&#xff0c;以便后续合成为视频或进行其他可视化演示。本文将介绍如何使用…...






编程日记
2025/2/26 6:20:42



















汽车无钥匙进入一键启动操作正确步骤




汽车智能无钥匙进入和一键启动的技术在近年来比较成熟&#xff0c;不同车型的操作步骤可能略有不同&#xff0c;但基本的流程应该是通用的&#xff0c;不会因为时间变化而有大的改变。 
移动管家汽车一键启动无钥匙进入系统通常是通过携带钥匙靠近车辆&#xff0c;然后触摸门把…...






编程日记
2025/2/26 6:18:27



















JMeter 的基础知识-安装部分




以下将从环境配置开始，为你详细介绍 JMeter 的基础知识，涵盖环境搭建、界面认知、测试计划创建、常用组件使用等方面内容。 
1. 环境配置 
1.1 安装 Java 
JMeter 是基于 Java 开发的，所以需要先安装 Java 开发工具包（JDK）。 下载 JDK：访问 Oracle 官方网站（https://www…...






编程日记
2025/2/26 6:17:25



















解决后端跨域问题




目录 
一、什么是跨域问题&#xff1f; 
1、跨域问题的定义 
2、举例 
3、为什么会有跨域问题的存在&#xff1f; 
二、解决跨域问题 
1、新建配置类 
2、编写代码 
三、结语 一、什么是跨域问题&#xff1f; 
1、跨域问题的定义 跨域问题&#xff08;Cross-Origin Resource Sh…...






编程日记
2025/2/26 6:15:18



















补题A-E Codeforces Round 953 (Div. 2)




https://codeforces.com/contest/1979 A. Guess the Maximum 原题链接&#xff1a;https://codeforces.com/contest/1979/problem/A 求相邻元素的最大值的最小值。 
#include <bits/stdc.h>
using namespace std;
#define IOS ios::sync_with_stdio(0), cin.tie(0), cout…...






编程日记
2025/2/26 6:14:09



















【WordPress】发布文章时自动通过机器人推送到钉钉




在您的主题下functions.php中添加如下代码&#xff1a; 
function wpso_dingding_publish_notify($post_ID) {// 获取文章对象$post  get_post($post_ID);// 检查是否是文章首次发布&#xff08;即不是修订版&#xff09;if (get_post_status($post_ID)  publish && !g…...






编程日记
2025/2/26 6:12:59



















鸿蒙开发深入浅出04（首页数据渲染、搜索、Stack样式堆叠、Grid布局、shadow阴影）




鸿蒙开发深入浅出04&#xff08;首页数据渲染、搜索、Stack样式堆叠、Grid布局、shadow阴影&#xff09; 1、效果展示2、ets/pages/Home.ets3、ets/views/Home/SearchBar.ets4、ets/views/Home/NavList.ets5、ets/views/Home/TileList.ets6、ets/views/Home/PlanList.ets7、后端…...






编程日记
2025/2/26 6:11:55



















管道文件（1）




1.无名管道&#xff1a;在同一主机下&#xff0c;具有亲缘关系的进程间的通信&#xff0c;如父子进程间的通信。 2.有名管道&#xff1a;在同一主机下的任意进程间的通信。 &#xff08;1&#xff09;管道的创建 &#xff08;2&#xff09;管道的打开&#xff08;open&#xff…...






编程日记
2025/2/26 6:09:52



















什么是AI agent技术，有哪些著名案例




AI Agent技术是一种基于人工智能的智能实体&#xff0c;能够感知环境、进行决策和执行动作&#xff0c;以实现特定目标。近年来&#xff0c;随着大模型&#xff08;如GPT-4&#xff09;和生成式AI技术的发展&#xff0c;AI Agent在多个领域得到了广泛应用&#xff0c;并取得了显…...






编程日记
2025/2/26 6:08:45



















Cursor结合Claude 3.7零基础开发愤怒的小鸟【深夜Claude 3.7系列发布，类似DeepSeek-R1和V3的合体？】




文章目录 前言介绍“市面上唯一的混合模型”卓越的编程能力、精准控制思考时间Cursor已接入Cursor结合Claude 3.7快速编写游戏完整html代码 &#x1f343;作者介绍&#xff1a;双非本科大四网络工程专业在读&#xff0c;阿里云专家博主&#xff0c;前三年专注于Java领域学习&am…...






编程日记
2025/2/26 6:07:38



















基于 Python 的天气数据分析与可视化




基于 Python 的天气数据分析与可视化 1. 项目背景 
天气数据分析与可视化项目旨在通过爬取天气数据并进行分析&#xff0c;生成可视化图表&#xff0c;帮助用户了解天气变化趋势。通过该项目&#xff0c;学生可以掌握 Python 的数据爬取、数据分析和可视化技能。该项目适用于气…...






编程日记
2025/2/26 6:06:30



















Bybit事件技术分析




事件概述 
2025年2月21日UTC时间下午02:16:11&#xff0c;Bybit的以太坊冷钱包&#xff08;0x1db92e2eebc8e0c075a02bea49a2935bcd2dfcf4&#xff09;因恶意合约升级遭到资金盗取。根据Bybit CEO Ben Zhou的声明&#xff0c;攻击者通过钓鱼攻击诱骗冷钱包签名者错误签署恶意交易…...






编程日记
2025/2/26 6:04:23





















在软件开发中正确使用MySQL日期时间类型的深度解析




在日常软件开发场景中&#xff0c;时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志&#xff0c;到供应链系统的物流节点时间戳&#xff0c;时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库&#xff0c;其日期时间类型的…...






编程新知
2025/10/16 13:22:06



















java 实现excel文件转pdf | 无水印 | 无限制




文章目录 目录 
文章目录 
前言 
1.项目远程仓库配置 
2.pom文件引入相关依赖 
3.代码破解  
二、Excel转PDF 
1.代码实现 
2.Aspose.License.xml 授权文件 
总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具，自己手写的难度，恐怕高级程序员花费一年的事件，也…...






编程新知
2025/11/5 4:10:42



















Go 语言接口详解




Go 语言接口详解 
核心概念 
接口定义 
在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; 
// 定义接口
type Shape interface {Area() float64Perimeter() float64
} 
接口实现 
Go 接口的实现是隐式的&#xff1a; 
// 矩形结构体…...






编程新知
2026/1/4 5:19:25



















汽车生产虚拟实训中的技能提升与生产优化​




在制造业蓬勃发展的大背景下&#xff0c;虚拟教学实训宛如一颗璀璨的新星&#xff0c;正发挥着不可或缺且日益凸显的关键作用&#xff0c;源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例&#xff0c;汽车生产线上各类…...






编程新知
2026/1/27 7:46:36



















HTML 列表、表格、表单




1 列表标签 
作用&#xff1a;布局内容排列整齐的区域 
列表分类&#xff1a;无序列表、有序列表、定义列表。 
例如&#xff1a; 1.1 无序列表 
标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; 
ul 标签里面只能包裹 li…...






编程新知
2026/1/24 22:33:33



















电脑插入多块移动硬盘后经常出现卡顿和蓝屏




当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时&#xff0c;可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案&#xff1a; 1. 检查电源供电问题 
问题原因&#xff1a;多块移动硬盘同时运行可能导致USB接口供电不足&#x…...






编程新知
2025/10/28 15:02:57



















MODBUS TCP转CANopen 技术赋能高效协同作业




在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...






编程新知
2026/2/6 9:48:02



















laravel8+vue3.0+element-plus搭建方法




创建 laravel8 项目 
composer create-project --prefer-dist laravel/laravel laravel8 8.* 
安装 laravel/ui 
composer require laravel/ui 
修改 package.json 文件 
"devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...






编程新知
2025/10/15 0:25:46



















MySQL账号权限管理指南：安全创建账户与精细授权技巧




在MySQL数据库管理中&#xff0c;合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 
一、为何需要创建独立账号&#xff1f; 
最小权限原则&#xf…...






编程新知
2025/9/5 23:36:27



















Java + Spring Boot + Mybatis 实现批量插入




在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法&#xff1a;使用 MyBatis 的 <foreach> 标签和批处理模式&#xff08;ExecutorType.BATCH&#xff09;。 方法一&#xff1a;使用 XML 的 <foreach> 标签&#xff…...






编程新知
2025/6/11 2:44:05