JS实现滚动到指定区域触发弹窗，如何避免刷新页面时误触发？

逻辑调整说明 #

• 新增初始状态校验：页面加载时就记录初始滚动位置和目标区域位置，如果初始位置已经超过目标区域，直接排除触发资格，解决刷新自动弹窗问题
• 把关闭按钮的事件绑定从滚动回调中移出，避免每次滚动都重复绑定事件造成的性能损耗
• 保留单次触发标记，确保弹窗全局仅显示一次

完整实现代码 #

const section = document.querySelector('#section-1');
const card = document.querySelector('#card-popup');
const closebtn = document.querySelector('#close-popup');
let hasPopupShown = false;
// 页面初始化时记录初始滚动位置、目标区域顶部位置
const initialScrollY = window.scrollY;
const topOfSection = section.offsetTop;

// 关闭按钮事件仅绑定一次
closebtn.addEventListener('click', () => {
  card.style.display = "none";
});

const cardPop = () => {
  const currentScrollY = window.scrollY;
  // 触发条件同时满足才显示弹窗
  if (
    !hasPopupShown && 
    currentScrollY >= topOfSection && 
    // 若要严格限制仅初始在顶部才触发，可将下方条件改为 initialScrollY === 0
    initialScrollY < topOfSection
  ) {
    card.style.display = "block";
    hasPopupShown = true;
  }
}

window.addEventListener('scroll', cardPop);

可选严格模式 #

如果需求要求必须是用户从页面最顶部开始滚动才触发弹窗，直接把判断条件里的initialScrollY < topOfSection替换为initialScrollY === 0即可。

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