如何用原生JavaScript实现水平滚动容器可见卡片数量统计

核心修正点 #

原有转换代码的错误主要集中在属性取值、逻辑监听和遍历三个维度：

• 原生DOM元素无width/offset()属性，jQuery的宽、偏移方法对应原生clientWidth、getBoundingClientRect()接口
• 滚动计数需要监听scroll事件而非click事件
• 遍历对象应为容器内的所有卡片元素，而非容器本身

完整实现代码 #

可见性判断函数 #

/**
 * 判断元素是否在水平滚动容器可视范围内
 * @param {Element} container 滚动容器元素
 * @param {Element} elem 待判断的卡片元素
 * @param {Boolean} partial 是否统计部分可见的卡片，默认false只统计完全可见
 * @returns {Boolean} 是否可见
 */
function checkInView(container, elem, partial = false) {
  const containerRect = container.getBoundingClientRect()
  const elemRect = elem.getBoundingClientRect()

  const containerLeft = containerRect.left
  const containerRight = containerRect.right
  const elemLeft = elemRect.left
  const elemRight = elemRect.right

  const isTotalVisible = elemLeft >= containerLeft && elemRight <= containerRight
  const isPartVisible = partial && (
    (elemLeft < containerLeft && elemRight > containerLeft) ||
    (elemLeft > containerLeft && elemLeft < containerRight)
  )

  return isTotalVisible || isPartVisible
}

滚动监听逻辑 #

document.addEventListener('DOMContentLoaded', () => {
  const scrollContainer = document.querySelector('.scrollable')
  // 替换为你实际的卡片选择器，比如表格的th、td，或者自定义的.card类
  const allCards = scrollContainer.querySelectorAll('th')
  const totalCardCount = allCards.length

  // 可选：加防抖避免滚动时高频触发计算
  const debounce = (fn, delay = 150) => {
    let timer = null
    return (...args) => {
      clearTimeout(timer)
      timer = setTimeout(() => fn.apply(this, args), delay)
    }
  }

  const calculateVisibleCount = () => {
    let visibleCount = 0
    allCards.forEach(card => {
      if (checkInView(scrollContainer, card, true)) {
        visibleCount++
      }
    })
    // 此处可替换为将结果渲染到页面对应节点的逻辑
    console.log(`${visibleCount}/${totalCardCount}`)
  }

  scrollContainer.addEventListener('scroll', debounce(calculateVisibleCount))
  // 初始化触发一次，获取默认状态下的可见数量
  calculateVisibleCount()
})

内容的提问来源于stack exchange，提问作者Christian