HTML如何创建内容可溢出边框且支持拖拽浏览的div容器

溢出显示实现方案 #

你之前给.tree加overflow: scroll后内容仍被限制，核心原因是内部家族树节点的宽度默认被父容器的max-width约束，没有按照实际内容撑开。你可以按以下写法调整CSS：

.tree {
  max-width: 500px;
  overflow: auto; /* 仅在内容溢出时显示滚动条，体验优于固定显示scroll */
  cursor: grab; /* 提前加拖拽手势提示，后续交互用 */
}
/* 将下面选择器替换为你页面中.tree下直接包裹所有家族树节点的容器类名 */
.tree > .tree-content {
  width: fit-content; /* 让容器宽度适配实际内容宽度，不受父级max-width限制 */
}
.tree:active {
  cursor: grabbing;
}

调整后超出500px宽度的内容会正常显示，容器会自动出现滚动条。

拖拽浏览实现方案 #

不需要使用draggable属性（该属性多用于元素拖拽排序、跨容器拖拽场景），你要的视口平移效果直接通过监听鼠标事件实现即可，逻辑如下：

1. 鼠标按下时记录当前鼠标坐标、容器当前的滚动位置，标记拖拽状态为开启
2. 鼠标移动时若处于拖拽状态，计算鼠标偏移量，同步更新容器的滚动位置实现平移
3. 鼠标松开或移出容器时，关闭拖拽状态

可直接使用以下JS代码：

const treeContainer = document.querySelector('.tree')
let isDragging = false
// 存储初始状态值
let startX, startY, initScrollLeft, initScrollTop

treeContainer.addEventListener('mousedown', (e) => {
  isDragging = true
  startX = e.pageX - treeContainer.offsetLeft
  startY = e.pageY - treeContainer.offsetTop
  initScrollLeft = treeContainer.scrollLeft
  initScrollTop = treeContainer.scrollTop
  // 防止拖拽时触发文本选中默认行为
  e.preventDefault()
})

treeContainer.addEventListener('mousemove', (e) => {
  if (!isDragging) return
  const currentX = e.pageX - treeContainer.offsetLeft
  const currentY = e.pageY - treeContainer.offsetTop
  // 偏移量反向对应滚动距离，实现和拖拽方向一致的平移效果
  const offsetX = currentX - startX
  const offsetY = currentY - startY
  treeContainer.scrollLeft = initScrollLeft - offsetX
  treeContainer.scrollTop = initScrollTop - offsetY
})

// 两种结束拖拽的场景
const endDrag = () => {
  isDragging = false
}
treeContainer.addEventListener('mouseup', endDrag)
treeContainer.addEventListener('mouseleave', endDrag)

内容的提问来源于stack exchange，提问作者Itération 122442