如何检测用户当前查看的页面区块（或占屏最多的区块）

嘿，这个功能我之前做过类似的，其实核心思路就是结合视口检测和元素尺寸计算来实现，下面给你拆解具体步骤和代码示例：

1. 先给目标区块做标记 #

首先得给每个需要检测的区块加上自定义属性，方便后续获取区块名称，比如用data-section-name：

<div class="target-section" data-section-name="产品介绍">...</div>
<div class="target-section" data-section-name="用户评论">...</div>
<div class="target-section" data-section-name="联系我们">...</div>

2. 编写可见区域占比计算函数 #

我们需要用getBoundingClientRect()获取元素的位置和尺寸，然后计算它在视口中的可见区域占比（或者可见区域占视口的比例，根据你的需求调整）。这里给个实用的函数：

function calculateVisibleRatio(element) {
  const rect = element.getBoundingClientRect();
  const viewportW = window.innerWidth;
  const viewportH = window.innerHeight;

  // 计算元素与视口的重叠区域边界
  const overlapTop = Math.max(0, Math.min(rect.bottom, viewportH));
  const overlapBottom = Math.min(viewportH, Math.max(rect.top, 0));
  const overlapLeft = Math.max(0, Math.min(rect.right, viewportW));
  const overlapRight = Math.min(viewportW, Math.max(rect.left, 0));

  // 计算重叠面积和元素自身面积
  const overlapArea = (overlapTop - overlapBottom) * (overlapRight - overlapLeft);
  const elementArea = rect.width * rect.height;

  // 避免元素面积为0的情况，返回0表示不可见
  return elementArea === 0 ? 0 : overlapArea / elementArea;
}

3. 监听页面滚动/窗口变化，更新当前区块 #

接下来要监听用户的滚动操作和窗口大小变化，实时遍历所有目标区块，找出可见占比最高的那个，然后更新左侧的名称显示：

// 获取所有目标区块和显示容器
const sections = document.querySelectorAll('.target-section');
const sectionNameEl = document.getElementById('current-section-name');

function updateCurrentSection() {
  let highestRatio = 0;
  let activeSectionName = '';

  sections.forEach(section => {
    const ratio = calculateVisibleRatio(section);
    // 如果你更看重"占屏幕大部分"，可以改成计算可见区域占视口的比例
    // const visibleArea = (overlapTop - overlapBottom) * (overlapRight - overlapLeft);
    // const viewportArea = viewportW * viewportH;
    // const ratio = visibleArea / viewportArea;

    if (ratio > highestRatio) {
      highestRatio = ratio;
      activeSectionName = section.dataset.sectionName;
    }
  });

  // 更新左侧显示的名称
  sectionNameEl.textContent = activeSectionName;
}

// 页面加载时先执行一次，初始化显示
updateCurrentSection();

// 添加监听事件
window.addEventListener('scroll', updateCurrentSection);
window.addEventListener('resize', updateCurrentSection);

4. 性能优化（重要） #

滚动事件触发频率很高，直接绑定会导致页面卡顿，建议用requestAnimationFrame做节流处理：

let isTicking = false;
window.addEventListener('scroll', () => {
  if (!isTicking) {
    window.requestAnimationFrame(() => {
      updateCurrentSection();
      isTicking = false;
    });
    isTicking = true;
  }
});

// resize事件也可以用同样的方式优化
window.addEventListener('resize', () => {
  if (!isTicking) {
    window.requestAnimationFrame(() => {
      updateCurrentSection();
      isTicking = false;
    });
    isTicking = true;
  }
});

额外注意事项 #

• 如果你的区块是动态加载的（比如异步渲染），记得在新元素加载完成后重新获取sections集合，或者使用MutationObserver来监听DOM变化。
• 可以设置一个阈值，比如只有当可见占比超过50%时才更新名称，避免页面滚动时频繁切换显示内容。

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