根据视口可见性动态控制固定按钮的显示与隐藏

本文详细讲解如何利用 `getBoundingClientRect()` 精准判断目标按钮是否进入视口，并在滚动过程中实时控制固定按钮的显示与隐藏状态，确保两者永不同时可见。此方案特别适用于电商购物车、结算页等需要优化用户操作路径的场景。

在前端开发中，电商购物车页面常遇到一种交互场景：页面上存在两个“去结算”按钮。一个位于页面中部的列表区域（Button A），随页面滚动自然出现；另一个是固定在视口底部或顶部的悬浮按钮（Button B），方便用户随时快速结算。然而，当 Button A 进入屏幕时，Button B 如果依然显示，会导致视觉干扰和操作路径冲突。理想的用户体验是：当 Button A 可见时，Button B 自动隐藏；当 Button A 完全滚出视口后，Button B 立即恢复显示。这种动态切换机制既能聚焦核心操作入口，又能避免双重按钮带来的用户困惑。

实现这一功能的核心在于精准检测目标元素是否处于当前视口内。业界常用的方法是 getBoundingClientRect()，但许多基础实现存在边界条件判断不够严谨的问题：它们仅判断元素是否“部分可见”，忽略了边界情况。例如，当元素刚好触达视口顶部（rect.top === 0）或完全从底部滚出（rect.bottom <= 0）时，原始判断逻辑可能会产生误判。下面提供一个经过优化的、更健壮的 isInViewport 函数：

function isInViewport(el) {
  const rect = el.getBoundingClientRect();
  return (
    rect.top < window.innerHeight &&
    rect.bottom > 0 &&
    rect.left < window.innerWidth &&
    rect.right > 0
  );
}

该函数的逻辑是：只要元素的任意一部分位于视口边界内（即顶部未完全移出视口下方、底部未完全移出视口上方、左右边界同理），即判定为“可见”。这一判断逻辑既清晰又稳定。

接下来，需要绑定滚动事件来联动控制 Button B 的显示状态。这里有一个关键的实操建议：使用 visibility: hidden 而非 display: none 来隐藏 Button B。前者可以保留按钮的物理占位空间，避免因元素消失导致页面布局跳动。此外，滚动事件属于高频触发事件，直接绑定处理函数对性能影响较大，特别是在低端设备上。推荐使用 requestAnimationFrame 进行节流处理，以实现流畅且高效的执行效果：

const buttonA = document.querySelector('#CheckOutA');
const buttonB = document.querySelector('#CheckOutB');

if (buttonA && buttonB) {
  const updateButtonBVisibility = () => {
    const visible = isInViewport(buttonA);
    buttonB.style.visibility = visible ? 'hidden' : 'visible';
  };

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

  // 初始化检查
  updateButtonBVisibility();
}

在 CSS 方面，需要确保 Button B 采用固定定位，且不影响页面整体布局：

#horizontalCheckoutBottomPageButtonB {
  position: fixed;
  bottom: 20px; /* 或 top: 20px */
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
}
/* 确保隐藏时保留占位 */
#CheckOutB {
  visibility: visible;
}

当然，在实际生产环境中，有几个关键细节值得留意：

• 确保 #CheckOutA 和 #CheckOutB 的 DOM 元素加载完成后再执行脚本（建议将 JavaScript 放在 标签前，或监听 DOMContentLoaded 事件）；
• 如果页面包含 iframe 或复杂的嵌套滚动容器，需要调整 getBoundingClientRect() 的参考坐标系（例如，监听特定容器而非 window 对象）；
• 移动端 Safari 对 fixed 定位存在一些兼容性限制，建议添加 -webkit-transform: translateZ(0) 来强制开启硬件加速；
• 如果需要兼容旧版 IE 浏览器，请注意 Polyfill getBoundingClientRect() 方法，并将 window.innerHeight 替换为 document.documentElement.clientHeight。

经过以上优化，整个交互逻辑变得清晰流畅：当用户滚动到结算区域时，Button B 自动隐藏，离开后立即恢复显示。这不仅保持了交互的连贯性，也严格遵循了“单一主操作入口”的 UX 设计原则。对于电商平台而言，这类细节优化往往是提升用户体验与转化率的关键所在。