TAB键聚焦元素时scroll事件误触发求助：如何阻止该滚动事件

嘿，我之前碰到过完全一样的问题——用TAB键切换焦点时触发不必要的scroll事件真的挺烦人的，本质原因是浏览器会自动滚动让聚焦元素进入视口，进而触发了window上的scroll监听。下面给你两个靠谱的解决方案：

方案1：用事件标记区分触发源（最可靠） #

核心思路是给TAB键触发的焦点事件打个标记，然后在scroll事件里检查这个标记，如果是TAB导致的就跳过你的业务逻辑（或者根据需求阻止滚动）。

// 全局标记：记录当前是否是TAB触发的聚焦
let isTabFocusTriggered = false;

// 监听键盘按下事件，判断是否是TAB键
document.addEventListener('keydown', (e) => {
  if (e.key === 'Tab') {
    isTabFocusTriggered = true;
  }
});

// 监听元素聚焦事件，异步重置标记
// 用setTimeout是因为浏览器的自动滚动会在focus之后触发，确保scroll事件能读到标记
document.addEventListener('focus', () => {
  setTimeout(() => {
    isTabFocusTriggered = false;
  }, 0);
}, true); // 开启捕获阶段，确保这个事件先于scroll触发

// 你的scroll事件处理逻辑
window.addEventListener('scroll', (e) => {
  // 如果是TAB聚焦导致的scroll，直接跳过业务逻辑
  if (isTabFocusTriggered) {
    // 如果你需要阻止浏览器的自动滚动，可以用e.preventDefault()
    // 但注意：这会让聚焦元素可能无法进入视口，根据你的需求选择
    // e.preventDefault();
    return;
  }
  
  // 这里执行你原本的scroll业务逻辑，比如你的toggleSection函数
  toggleSection();
});

// 你的toggleSection函数（补全示例逻辑）
function toggleSection() {
  var elm = document.getElementById("support-bar");
  if(elm.style.right === "") {
    elm.style.right = "0";
  } else {
    elm.style.right = "";
  }
}

为什么这个方案有效？ #

当你按下TAB键时，我们先把标记设为true；随后元素获得焦点，浏览器自动滚动触发scroll事件，此时标记还是true，所以我们跳过业务逻辑；最后通过setTimeout把标记重置为false（宏任务会在scroll事件之后执行），不会影响后续正常的用户滚动操作。

方案2：通过滚动行为间接判断（适合简单场景） #

如果不想用全局标记，也可以通过对比滚动前后的位置，结合当前是否有聚焦元素来判断是否是TAB导致的滚动：

let lastScrollPosition = window.pageYOffset || document.documentElement.scrollTop;

window.addEventListener('scroll', (e) => {
  const currentScrollPosition = window.pageYOffset || document.documentElement.scrollTop;
  const activeEl = document.activeElement;
  
  // 判断逻辑：滚动距离小 + 当前有聚焦元素，大概率是TAB触发的自动滚动
  if (Math.abs(currentScrollPosition - lastScrollPosition) < 100 && activeEl !== null) {
    lastScrollPosition = currentScrollPosition;
    return; // 跳过业务逻辑
  }
  
  lastScrollPosition = currentScrollPosition;
  toggleSection();
});

注意事项 #

这个方案是基于行为推断的，可能存在误判（比如用户手动滚动了很小的距离同时聚焦了元素），所以更适合简单场景；而方案1是直接标记触发源，可靠性更高。

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