CSS实现可拖拽调整大小的面板，结合resize与变量同步

本文深入解析了如何利用CSS原生`resize`属性实现面板拖拽调整大小，并重点揭示其与JavaScript及CSS自定义变量协同工作的关键难点：`resize`虽无需JS即可触发尺寸变化，但因其直接写入内联样式且不触发任何事件，导致JS无法自动感知更新；必须通过`mouseup`或`requestAnimationFrame`主动读取尺寸并手动同步至`--panel-width`等CSS变量，才能驱动依赖该变量的响应式布局；文章还对比了`textarea`的特殊性（支持`input`事件但不适合作为通用面板容器），并警示了浏览器兼容性差异、移动端限制及复杂布局中的常见陷阱，最终强调应以JS+CSS变量为核心控制逻辑，将`resize`仅作为轻量级降级体验方案。

纯 CSS 的 resize 属性能实现拖拽调整大小，但它只改元素自身宽高，不自动同步到其他依赖变量（比如 JS 中的 panelWidth 或 CSS 自定义属性），必须手动桥接。

为什么 resize 改了尺寸，但 JS 拿不到新值？

resize 是浏览器原生行为，它直接写内联样式： style="max-width:100%"。但这个过程不触发 resize 事件（注意：不是 window.resize），也不通知 JS。所以你在 getBoundingClientRect() 里能读到新尺寸，但若没主动轮询或监听，就“不知道变了”。

• 别指望 MutationObserver 监听 style 变化——太重，且 resize 写的是计算后像素值，频繁触发不可控
• input 或 change 事件对 div 无效，仅适用于表单控件（如 textarea）
• 真正可用的钩子只有：在用户松手后，用 setTimeout(() => {...}, 0) 或 requestAnimationFrame 去读取最新尺寸

如何让 CSS resize 和 CSS 变量（--panel-width）保持一致？

不能靠 CSS 自己同步——resize 不支持绑定自定义属性。必须用 JS 桥接一次：

• 监听目标元素的 mousedown（拖拽开始）和 mouseup（拖拽结束）
• 在 mouseup 回调里，读取 element.offsetWidth 或 getComputedStyle(element).width
• 用 element.style.setProperty('--panel-width', width + 'px') 写入变量
• 如果要响应式更新其他元素（比如右侧自适应区域），确保它们用 calc(100% - var(--panel-width)) 计算宽度

示例关键代码：

const panel = document.querySelector('.resizable-panel');
panel.addEventListener('mouseup', () => {
  const w = panel.offsetWidth;
  panel.style.setProperty('--panel-width', `${w}px`);
});

textarea 能绕过 JS 吗？它和普通 div 有啥区别？

textarea 是少数原生支持 resize 且自带 input 事件的元素。拖拽时会连续触发 input，可直接监听：

• <textarea class="resizable" style="resize: both; overflow: auto;"></textarea>
• JS 中 el.addEventListener('input', () => console.log(el.clientWidth)) 就能实时捕获
• 但 textarea 的内容模型、换行、聚焦逻辑和普通面板冲突，不适合做 UI 面板容器
• 若硬要用，得加 readonly + user-select: none + border: none 等掩盖表单特征，不如老实用 div + JS 桥接

容易被忽略的兼容性与体验陷阱

Firefox 和 Safari 对 resize 的处理差异很大，尤其在伪元素、transform、flex 容器中：

• 在 display: flex 子项上设 resize，Chrome 有效，Firefox 可能完全不显示拖拽手柄——必须加 min-width: 0; min-height: 0
• transform: scale() 放大 resize 区域时，Safari 会错位，建议只用 width/height + overflow 控制可见区域
• 移动端默认禁用 resize（iOS Safari、Android Chrome），无法通过 CSS 开启；必须用 touch 事件 + JS 实现
• 如果面板里有 iframe 或第三方组件，resize 拖拽可能被其 pointer-events 阻断，需检查层级和事件捕获路径

真正稳定的做法，是把 resize 当作降级方案，核心逻辑始终走 JS 控制尺寸 + CSS 变量驱动布局，resize 只负责提供一个免写拖拽逻辑的快捷入口。

好了，本文到此结束，带大家了解了《CSS实现可拖拽调整大小的面板，结合resize与变量同步》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！