如何禁止JavaScript调用click()点击元素时页面自动滚动

核心问题 #

调用DOM元素的原生.click()方法时，如果元素不在当前视口范围内，浏览器默认会自动滚动页面将元素对齐到视口内，这是浏览器内置的默认行为，没有直接的配置项可以关闭，可以通过以下几种方案实现无滚动点击。

推荐方案（兼容性最好、无副作用） #

点击前记录当前页面的滚动位置，点击完成后立即同步还原滚动位置，整个过程在同一个事件循环内执行，用户完全感知不到中间的滚动过程，也不会影响元素原有点击逻辑的正常触发。

1. 先封装通用的无滚动点击工具函数：

function clickWithoutScroll(element) {
  if (!element) return;
  // 记录点击前的滚动坐标
  const currentScrollX = window.scrollX;
  const currentScrollY = window.scrollY;
  // 执行原生点击
  element.click();
  // 同步还原滚动位置，关闭平滑滚动保证无抖动
  window.scrollTo({
    left: currentScrollX,
    top: currentScrollY,
    behavior: 'auto'
  });
}

2. 替换原有代码中直接调用.click()的逻辑即可，修改后的完整代码如下：

function clickWithoutScroll(element) {
  if (!element) return;
  const currentScrollX = window.scrollX;
  const currentScrollY = window.scrollY;
  element.click();
  window.scrollTo({
    left: currentScrollX,
    top: currentScrollY,
    behavior: 'auto'
  });
}

function isHidden(users, comment, sticky) {
    let userElement = comment.querySelector(`[data-testid="comment_author_link"]`);
    let currName = userElement.getAttribute("href");

    let shouldHide = users.includes(currName);

    let isStickied = comment.querySelector("._2wd-K5Djdc9TGPRGDgmkpX") !== null;

    if(shouldHide || (isStickied && sticky !== null)) {
        blockIndex = users.indexOf(currName);

        let level = comment.querySelector("._1RIl585IYPW6cmNXwgRz0J").innerHTML;
        level = parseInt(level.replace(/^\D+/g, ""), 10) - 1;

        let threadlines = comment.querySelectorAll(".threadline");
        // 替换原有的threadlines[level]?.click()调用
        clickWithoutScroll(threadlines[level]);

        return true;
    }

    return false;
}

其他可选方案（特定场景适用） #

• 模拟鼠标事件派发
  通过dispatchEvent手动构造派发点击事件，不会触发浏览器默认的滚动对齐行为，但部分依赖原生真实点击的默认交互（如链接跳转、表单提交、部分第三方组件的内置逻辑）可能失效，仅适合确认点击元素只绑定了自定义JS事件的场景：

  function simulateClick(element) {
    if (!element) return;
    const event = new MouseEvent('click', {
      view: window,
      bubbles: true,
      cancelable: true
    });
    element.dispatchEvent(event);
  }
  

• 临时拦截滚动事件
  点击前添加非被动模式的scroll监听，调用preventDefault()阻止滚动，点击后移除监听，该方案在现代浏览器中可能抛出性能相关的警告，且容易误拦截其他正常的滚动逻辑，不推荐优先使用。

不推荐使用临时设置overflow: hidden的方案，该方案会改变页面布局计算，容易导致元素位置错乱、交互异常。

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