当通过 ::-webkit-scrollbar { display: none } 隐藏滚动条时，resize: vertical 会失效；本文提供兼容性更好、无需 JavaScript 的纯 CSS 替代方案——使用 scrollbar-width: none，并说明其限制与降级策略。
当通过 `::-webkit-scrollbar { display: none }` 隐藏滚动条时，`resize: vertical` 会失效；本文提供兼容性更好、无需 javascript 的纯 css 替代方案——使用 `scrollbar-width: none`，并说明其限制与降级策略。
在 Web 开发中，常需隐藏原生滚动条以保持 UI 统一（如设计稿要求“无痕滚动”），同时保留用户手动调整 <textarea></textarea> 或可伸缩 <div> 高度的能力。但直接使用 <code>::-webkit-scrollbar { display: none } 会导致 resize: vertical 在内容溢出时完全失效——这是 Chromium/Edge 等 Blink 内核浏览器的已知行为：隐藏滚动条后，浏览器内部将元素视为“不可滚动容器”，从而禁用 resize 手柄的交互逻辑。
✅ 推荐解决方案：scrollbar-width: none
该 CSS 属性专为隐藏滚动条而设计，且不会干扰 resize 行为。它仅影响滚动条的视觉呈现，底层滚动能力与尺寸调整逻辑保持完整：
.the-div {
width: 500px;
height: 50px;
overflow-y: auto;
resize: vertical;
/* ✅ 安全隐藏滚动条，保留 resize 功能 */
scrollbar-width: none; /* Firefox 支持 */
}
/* 同时兼容 WebKit 内核（Chrome/Safari） */
.the-div::-webkit-scrollbar {
display: none;
}
⚠️ 兼容性注意：
-
scrollbar-width: none仅被 Firefox 原生支持（自 v64+）； - Safari 目前不支持
scrollbar-width（截至 Safari 17.6），但::-webkit-scrollbar { display: none }在 Safari 中 不会导致 resize 失效 —— 这意味着你的原始代码在 Safari 中本就可用； - Chrome/Edge（Blink）需依赖
::-webkit-scrollbar，但如前所述，此方式在内容溢出时会使resize失效 —— 因此 Blink 内核是问题主战场。
? 实测结论：
| 浏览器 | ::-webkit-scrollbar: none + resize | scrollbar-width: none + resize |
|--------------|----------------------------------------|--------------------------------------|
| Chrome/Edge | ❌ 失效（关键问题） | ❌ 不支持（忽略） |
| Firefox | ✅ 有效（WebKit 规则被忽略） | ✅ 原生支持，完美生效 |
| Safari | ✅ 有效（无此 Bug） | ❌ 不支持 |
? 终极兼容写法（推荐）：
.the-div {
width: 500px;
height: 50px;
overflow-y: auto;
resize: vertical;
/* Firefox：安全隐藏 + 保留 resize */
scrollbar-width: none;
/* Chrome/Edge：降级为 clip（牺牲滚轮，保 resize）*/
@supports not (scrollbar-width: none) {
overflow-y: clip; /* 注意：clip 会禁用鼠标滚轮，但保留键盘方向键 & resize */
}
/* Safari：回退到标准隐藏（本身无 Bug）*/
&::-webkit-scrollbar {
display: none;
}
}
? 补充说明：
-
overflow-y: clip是现代替代方案（CSS Overflow Level 3），它彻底移除滚动机制（包括滚轮、触摸板惯性滚动），但明确保留resize可用性，且比hidden更语义化； - 若必须支持滚轮，且需全浏览器兼容，则需 JavaScript 方案（监听
wheel事件 +scrollTop手动控制），但本文聚焦零脚本解法； - 始终确保
resize元素设置了明确的overflow（如auto/scroll/clip），否则resize属性会被忽略。
综上，优先使用 scrollbar-width: none，辅以 @supports 查询实现渐进增强——既解决核心 Bug，又兼顾跨浏览器稳健性。
