完美隐藏滚动条方案 (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的声明，攻击者通过钓鱼攻击诱骗冷钱包签名者错误签署恶意交易…...
uniapp 对接腾讯云IM群组成员管理（增删改查）
UniApp 实战：腾讯云IM群组成员管理（增删改查） 一、前言 在社交类App开发中，群组成员管理是核心功能之一。本文将基于UniApp框架，结合腾讯云IM SDK，详细讲解如何实现群组成员的增删改查全流程。 权限校验…...
docker详细操作--未完待续
docker介绍 docker官网: Docker：加速容器应用程序开发 harbor官网：Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台，用于将应用程序及其依赖项（如库、运行时环…...
微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】
微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来，Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...
Go 语言接口详解
Go 语言接口详解 核心概念 接口定义 在 Go 语言中，接口是一种抽象类型，它定义了一组方法的集合： // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的： // 矩形结构体…...
3403. 从盒子中找出字典序最大的字符串 I
3403. 从盒子中找出字典序最大的字符串 I 题目链接：3403. 从盒子中找出字典序最大的字符串 I 代码如下： class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...
CSS设置元素的宽度根据其内容自动调整
width: fit-content 是 CSS 中的一个属性值，用于设置元素的宽度根据其内容自动调整，确保宽度刚好容纳内容而不会超出。 效果对比 默认情况（width: auto）： 块级元素（如 <div>）会占满父容器…...
深入浅出Diffusion模型：从原理到实践的全方位教程
I. 引言：生成式AI的黎明 – Diffusion模型是什么？ 近年来，生成式人工智能（Generative AI）领域取得了爆炸性的进展，模型能够根据简单的文本提示创作出逼真的图像、连贯的文本，乃至更多令人惊叹的…...
【深度学习新浪潮】什么是credit assignment problem？
Credit Assignment Problem（信用分配问题） 是机器学习，尤其是强化学习（RL）中的核心挑战之一，指的是如何将最终的奖励或惩罚准确地分配给导致该结果的各个中间动作或决策。在序列决策任务中，智能体执行一系列动作后获得一个最终奖励，但每个动作对最终结果的贡献程度往往…...
【1】跨越技术栈鸿沟：字节跳动开源TRAE AI编程IDE的实战体验
2024年初，人工智能编程工具领域发生了一次静默的变革。当字节跳动宣布退出其TRAE项目（一款融合大型语言模型能力的云端AI编程IDE）时，技术社区曾短暂叹息。然而这一退场并非终点——通过开源社区的接力，TRAE在WayToAGI等…...
云原生时代的系统设计：架构转型的战略支点
📝个人主页🌹：一ge科研小菜鸡-CSDN博客 🌹🌹期待您的关注 🌹🌹 一、云原生的崛起：技术趋势与现实需求的交汇 随着企业业务的互联网化、全球化、智能化持续加深，传统的 I…...