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

本文介绍如何利用 getBoundingClientRect() 判断目标按钮是否进入视口，并在滚动过程中实时控制另一固定按钮的显隐状态，确保两者永不同时可见，适用于电商购物车等场景。

今天聊一个前端开发中常见的场景：在电商购物车页面，通常会有两个“去结算”按钮——一个位于页面中部（Button A），随页面滚动自然出现；另一个是固定在视口顶部或底部的粘性悬浮按钮（Button B），方便用户随时点击。但问题在于，当Button A进入视野时，Button B若再出现，会造成视觉干扰和操作混乱。理想状态是：Button A可见时，Button B自动隐藏；Button A滚出视口，Button B立即恢复显示。这样既能聚焦操作入口，又能避免双重按钮的尴尬。

要实现这一功能，核心在于精准检测目标元素是否在当前视口内。通常做法是使用getBoundingClientRect()，但许多实现方案存在一个细节问题：仅判断元素是否“部分可见”，却忽略了边界条件的严格性。例如，当元素刚触达视口顶部（rect.top === 0）或完全滚出底部（rect.bottom <= 0）时，原判断逻辑可能产生误判。下面这个优化版本更健壮：

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加载完成后才执行脚本（建议将JS放在前，或使用DOMContentLoaded事件）；
• 若页面存在iframe或复杂嵌套滚动容器，需调整getBoundingClientRect()的参考坐标系（如监听容器而非window）；
• 移动端Safari对fixed定位有兼容性限制，可添加-webkit-transform: translateZ(0)强制硬件加速；
• 如需支持IE，需polyfillgetBoundingClientRect()并替换window.innerHeight为document.documentElement.clientHeight。

如此一来，整个逻辑便通顺：滚动到结算区时，Button B自动隐藏，离开后立即恢复，既保持了交互的连贯性，又遵循了“单一主操作入口”的设计原则。对于电商场景，这种细节优化往往能直接提升用户体验。