根据视口可见性动态隐藏显示固定按钮
利用getBoundingClientRect()检测目标按钮是否进入视口，滚动时实时控制另一固定按钮的显隐，确保两者永不同时可见。采用严格边界判断，配合requestAnimationFrame节流，用visibility:hidden隐藏以保留布局空间，适用于电商购物车等场景。
本文介绍如何利用 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放在