完美隐藏滚动条方案 (2024 最新验证)
完美隐藏滚动条方案 (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%);
}分步验证流程
- 检查 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>-
浏览器强制刷新
Ctrl + Shift + R(Windows)Cmd + Shift + R(Mac)
-
开发者工具检查
- 打开 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; …...
单片机的串口（USART）
Tx - 数据的发送引脚，Rx - 数据的接受引脚。 串口的数据帧格式 空闲状态高电平，起始位低电平，数据位有8位校验位，9位校验位，停止位是高电平保持一位或者半位，又或者两位的状态。 8位无校验位传输一个字节…...
实现分布式限流开源项目
以下是10个可以实现分布式限流中间件的开源项目推荐，这些项目基于不同的技术栈，适用于多种应用场景： 1. **Alibaba Sentinel** Sentinel 是阿里巴巴开源的分布式限流中间件，支持多种限流策略（如QPS、并发线程数等…...
递归构建行政区域树（二）
概述 这篇博客中构建出的行政区域树利用element-ui的Tree组件展示出来。 实现 源码位于码云，欢迎点击哦。 项目结构 最后 好久没写基于element-ui的项目了，都有点生疏了。 好了，如果对你有帮助，欢迎点个免费的赞哦。...
AR技术下的电商：虚拟试穿/试用/试戴成新风尚
随着科技的日新月异，增强现实（AR）技术正悄然改变着我们的生活，尤其在电子商务领域，AR技术的融入正掀起一场前所未有的变革。那么，AR技术究竟是何方神圣？它在电商领域又展现出了哪些非凡的应用呢…...
社群团购平台的愿景构建与开源链动2+1模式S2B2C商城小程序应用探索
摘要：在数字经济背景下，社群团购作为一种新兴的商业模式，凭借其独特的互动性和便捷性，展现出巨大的市场潜力。本文旨在探讨社群团购平台愿景的构建策略，并结合开源链动21模式S2B2C商城小程序的应用，为创业者…...
笔记20250225
关于上拉电阻和下拉电阻的作用 原理 上拉电阻：在上拉电阻所连接的导线上，如果外部组件未启用，上拉电阻则“微弱地”将输入电压信号“拉高”。当外部组件未连接时，对输入端来说，外部“看上去”就是高阻抗的，…...
【项目】基于Boost自主实现搜索引擎
🔥 个人主页：大耳朵土土垚 🔥 所属专栏：Linux系统编程 这里将会不定期更新有关Linux的内容，欢迎大家点赞，收藏，评论🥳🥳🎉🎉🎉 文章目…...
使用 Open3D 批量渲染并导出固定视角点云截图
一、前言 在三维点云处理与可视化中，固定视角批量生成点云渲染截图是一个常见的需求。例如，想要将同一系列的点云（PCD 文件）在同样的视角下生成序列图片，以便后续合成为视频或进行其他可视化演示。本文将介绍如何使用…...
汽车无钥匙进入一键启动操作正确步骤
汽车智能无钥匙进入和一键启动的技术在近年来比较成熟，不同车型的操作步骤可能略有不同，但基本的流程应该是通用的，不会因为时间变化而有大的改变。 移动管家汽车一键启动无钥匙进入系统通常是通过携带钥匙靠近车辆，然后触摸门把…...
JMeter 的基础知识-安装部分
以下将从环境配置开始，为你详细介绍 JMeter 的基础知识，涵盖环境搭建、界面认知、测试计划创建、常用组件使用等方面内容。 1. 环境配置 1.1 安装 Java JMeter 是基于 Java 开发的，所以需要先安装 Java 开发工具包（JDK）。 下载 JDK：访问 Oracle 官方网站（https://www…...
解决后端跨域问题
目录 一、什么是跨域问题？ 1、跨域问题的定义 2、举例 3、为什么会有跨域问题的存在？ 二、解决跨域问题 1、新建配置类 2、编写代码 三、结语 一、什么是跨域问题？ 1、跨域问题的定义 跨域问题（Cross-Origin Resource Sh…...
补题A-E Codeforces Round 953 (Div. 2)
https://codeforces.com/contest/1979 A. Guess the Maximum 原题链接：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…...
【WordPress】发布文章时自动通过机器人推送到钉钉
在您的主题下functions.php中添加如下代码： function wpso_dingding_publish_notify($post_ID) {// 获取文章对象$post get_post($post_ID);// 检查是否是文章首次发布（即不是修订版）if (get_post_status($post_ID) publish && !g…...
鸿蒙开发深入浅出04（首页数据渲染、搜索、Stack样式堆叠、Grid布局、shadow阴影）
鸿蒙开发深入浅出04（首页数据渲染、搜索、Stack样式堆叠、Grid布局、shadow阴影） 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、后端…...
管道文件（1）
1.无名管道：在同一主机下，具有亲缘关系的进程间的通信，如父子进程间的通信。 2.有名管道：在同一主机下的任意进程间的通信。 （1）管道的创建 （2）管道的打开（openÿ…...
什么是AI agent技术，有哪些著名案例
AI Agent技术是一种基于人工智能的智能实体，能够感知环境、进行决策和执行动作，以实现特定目标。近年来，随着大模型（如GPT-4）和生成式AI技术的发展，AI Agent在多个领域得到了广泛应用，并取得了显…...
Cursor结合Claude 3.7零基础开发愤怒的小鸟【深夜Claude 3.7系列发布，类似DeepSeek-R1和V3的合体？】
文章目录 前言介绍“市面上唯一的混合模型”卓越的编程能力、精准控制思考时间Cursor已接入Cursor结合Claude 3.7快速编写游戏完整html代码 🍃作者介绍：双非本科大四网络工程专业在读，阿里云专家博主，前三年专注于Java领域学习&am…...
基于 Python 的天气数据分析与可视化
基于 Python 的天气数据分析与可视化 1. 项目背景 天气数据分析与可视化项目旨在通过爬取天气数据并进行分析，生成可视化图表，帮助用户了解天气变化趋势。通过该项目，学生可以掌握 Python 的数据爬取、数据分析和可视化技能。该项目适用于气…...
Bybit事件技术分析
事件概述 2025年2月21日UTC时间下午02:16:11，Bybit的以太坊冷钱包（0x1db92e2eebc8e0c075a02bea49a2935bcd2dfcf4）因恶意合约升级遭到资金盗取。根据Bybit CEO Ben Zhou的声明，攻击者通过钓鱼攻击诱骗冷钱包签名者错误签署恶意交易…...
【磁盘】每天掌握一个Linux命令 - iostat
目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat（I/O Statistics）是Linux系统下用于监视系统输入输出设备和CPU使…...
Psychopy音频的使用
Psychopy音频的使用 本文主要解决以下问题： 指定音频引擎与设备；播放音频文件 本文所使用的环境： Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...
HashMap中的put方法执行流程（流程图）
1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中，其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下： 初始判断与哈希计算： 首先，putVal 方法会检查当前的 table（也就…...
HDFS分布式存储 zookeeper
hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架，允许使用简单的变成模型跨计算机对大型集群进行分布式处理（1.海量的数据存储 2.海量数据的计算）Hadoop核心组件 hdfs（分布式文件存储系统）&a…...
排序算法总结（C++）
目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指：同样大小的样本 **（同样大小的数据）**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...
【Android】Android 开发 ADB 常用指令
查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...
OD 算法题 B卷【正整数到Excel编号之间的转换】
文章目录 正整数到Excel编号之间的转换 正整数到Excel编号之间的转换 excel的列编号是这样的：a b c … z aa ab ac… az ba bb bc…yz za zb zc …zz aaa aab aac…; 分别代表以下的编号1 2 3 … 26 27 28 29… 52 53 54 55… 676 677 678 679 … 702 703 704 705;…...
前端高频面试题2：浏览器/计算机网络
本专栏相关链接 前端高频面试题1：HTML/CSS 前端高频面试题2：浏览器/计算机网络 前端高频面试题3：JavaScript 1.什么是强缓存、协商缓存？ 强缓存： 当浏览器请求资源时，首先检查本地缓存是否命中。如果命…...
海云安高敏捷信创白盒SCAP入选《中国网络安全细分领域产品名录》
近日，嘶吼安全产业研究院发布《中国网络安全细分领域产品名录》，海云安高敏捷信创白盒（SCAP）成功入选软件供应链安全领域产品名录。 在数字化转型加速的今天，网络安全已成为企业生存与发展的核心基石，为了解…...
LangChain【6】之输出解析器：结构化LLM响应的关键工具
文章目录 一 LangChain输出解析器概述1.1 什么是输出解析器？1.2 主要功能与工作原理1.3 常用解析器类型 二 主要输出解析器类型2.1 Pydantic/Json输出解析器2.2 结构化输出解析器2.3 列表解析器2.4 日期解析器2.5 Json输出解析器2.6 xml输出解析器 三 高级使用技巧3…...