如何用JavaScript和原生CSS动态计算可拖拽宽度容器的溢出子元素数量

实现思路 #

• 标签尺寸统一化：所有展示标签（元素索引标签/溢出计数标签）采用相同宽高，避免动态计算不同元素尺寸的复杂度
• 容器尺寸监听：用ResizeObserver监听拖拽容器的宽度变化，比传统resize事件性能更高，仅在容器尺寸变更时触发计算
• 动态渲染逻辑：根据容器可用宽度计算可容纳的标签总数，再结合总元素数判断是否需要显示溢出标签：
  • 总元素数 ≤ 可容纳标签数：直接渲染所有元素的索引标签
  • 总元素数 > 可容纳标签数：渲染前可容纳数-1个元素的索引标签，最后1个位置显示溢出计数标签，计数规则为总元素数 - (可容纳数-1)

完整代码示例 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>可拖拽容器溢出计数</title>
  <style>
    .draggable-container {
      width: 500px; /* 初始宽度 */
      height: 60px;
      border: 1px solid #ccc;
      resize: horizontal; /* 支持水平拖拽调整宽度 */
      overflow: hidden;
      padding: 10px;
      display: flex;
      align-items: center;
      gap: 8px;
      user-select: none; /* 避免拖拽时选中文本 */
    }
    .tag {
      flex-shrink: 0; /* 禁止标签压缩 */
      height: 36px;
      padding: 0 12px;
      border-radius: 4px;
      background: #e8f4ff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: #1677ff;
    }
  </style>
</head>
<body>
  <div class="draggable-container" id="container"></div>

  <script>
    const container = document.getElementById('container')
    const TOTAL_ITEMS = 6 // 总元素数量，可根据实际场景修改
    let tagWidth = 0 // 单个标签的宽度

    // 初始化计算单个标签宽度
    function calcTagWidth() {
      const testTag = document.createElement('div')
      testTag.className = 'tag'
      testTag.style.position = 'absolute'
      testTag.style.visibility = 'hidden'
      testTag.textContent = '(0)'
      document.body.appendChild(testTag)
      tagWidth = testTag.offsetWidth + 8 // 加上gap的8px间距
      document.body.removeChild(testTag)
    }

    // 渲染标签
    function renderTags() {
      const containerWidth = container.clientWidth - 20 // 减去左右padding各10px
      const maxTagCount = Math.floor(containerWidth / tagWidth)
      let tagsHTML = ''

      if (TOTAL_ITEMS <= maxTagCount) {
        // 所有元素都能放下
        for (let i = 0; i < TOTAL_ITEMS; i++) {
          tagsHTML += `<div class="tag">(${i})</div>`
        }
      } else {
        // 有溢出，显示前maxTagCount-1个元素，最后一个放溢出计数
        for (let i = 0; i < maxTagCount - 1; i++) {
          tagsHTML += `<div class="tag">(${i})</div>`
        }
        const overflowCount = TOTAL_ITEMS - (maxTagCount - 1)
        tagsHTML += `<div class="tag">+${overflowCount}</div>`
      }
      container.innerHTML = tagsHTML
    }

    // 初始化
    calcTagWidth()
    renderTags()

    // 监听容器尺寸变化
    const resizeObserver = new ResizeObserver(() => {
      renderTags()
    })
    resizeObserver.observe(container)
  </script>
</body>
</html>

适配调整说明 #

• 如果子元素宽度不统一，可替换计算逻辑：遍历所有子元素，通过getBoundingClientRect()判断元素右边界是否超出容器可视右边界，统计可容纳的元素数量即可
• 如果需要自定义拖拽手柄，可替换原生resize属性，通过监听鼠标mousedown/mousemove/mouseup事件实现自定义拖拽逻辑
• 标签样式、间距、容器内边距可根据业务需求自行调整，注意修改对应数值时同步更新JS里的宽度计算逻辑即可

内容的提问来源于stack exchange，提问作者Fer-de-lance