index.html如何实现左右拖拽改变分栏大小？-html教程-PHP中文网

最简实现左右分栏拖拽需用 resize: horizontal + overflow: hidden + display: flex，左栏设 min-width、flex-shrink: 0，右栏 flex: 1；需 resizeobserver 监听左栏尺寸变化，用 contentrect.width 获取准确宽度。

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

用 `resize` CSS 属性最简实现左右分栏拖拽

现代浏览器（Chrome 90+、Firefox 91+、Safari 15.4+）原生支持通过 resize + overflow 实现可拖拽调整大小的元素，无需 JS。但仅适用于块级元素且必须设 overflow: hidden | auto | scroll，对左右分栏场景需配合 display: flex 和固定最小宽度。

常见错误是直接给 <div> 加 <code>resize: horizontal 却没设 overflow，结果完全无反应；或在 Flex 容器中忘了限制子项不收缩（flex-shrink: 0）。

<div class="left"> 需设 <code>min-width: 200px、flex-shrink: 0、resize: horizontal、overflow: hidden
<div class="right"> 设 <code>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></p><div class="container">
<div class="left">左栏（可拖拽）</div>
<div class="right">右栏（自适应）</div>
</div>

用 `ResizeObserver` 监听拖拽后尺寸变化

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

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

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

只观察 .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);