index.html如何实现左右拖拽改变分栏大小？

• 需设 min-width: 200px、flex-shrink: 0、resize: horizontal、overflow: hidden
• 设 flex: 1，自动填充剩余空间
• 父容器必须是 display: flex，且不能设 width: 100%（会干扰 resize 计算）

<style>
.container { display: flex; height: 100vh; }
.left {
  min-width: 200px;
  max-width: 80vw;
  flex-shrink: 0;
  resize: horizontal;
  overflow: hidden;
  background: #f0f0f0;
}
.right { flex: 1; background: #e0e0e0; }
</style>
<p><div class="container">
<div class="left">左栏（可拖拽）</div>
<div class="right">右栏（自适应）</div>
</div></p>

用 ResizeObserver 监听拖拽后尺寸变化

resize CSS 属性不会触发 DOM 尺寸事件，JS 无法感知拖拽结束。若需响应式更新内容（比如重绘图表、加载新数据），必须用 ResizeObserver 主动监听 .left 的宽高变化。

注意：不要在回调里直接修改被观察元素的样式（如再设 width），否则可能引发循环触发；也不要依赖 offsetWidth——它在 ResizeObserver 回调中可能未同步更新，应优先用 contentRect.width。

• 只观察 .left 元素，避免监听整个容器造成冗余
• 首次回调可能在渲染前触发，建议加 requestAnimationFrame 延迟读取
• Safari 旧版（contentRect，需 fallback 到 getBoundingClientRect()

const leftEl = document.querySelector('.left');
const ro = new ResizeObserver(entries => {
  requestAnimationFrame(() => {
    const width = entries[0].contentRect.width;
    console.log('左栏当前宽度：', width);
    // 这里触发重绘、请求数据等逻辑
  });
});
ro.observe(leftEl);

兼容老浏览器：用 mousemove + getBoundingClientRect 手写拖拽条

IE、旧版 Safari 或需要精确控制拖拽行为（如吸附、最小步长、禁用纵向缩放）时，得自己实现。核心是插入一个

Win11怎么修改系统盘符_Win11如何更改驱动器名称字母【方法】

上一篇

Win11怎么修改系统盘符_Win11如何更改驱动器名称字母【方法】

下一篇

电脑版网页版入口 微信电脑版网页入口