如何在input/textarea内容变更时阻止页面滚动到聚焦元素？

核心结论 #

可以实现内容变更时阻止页面自动滚动到聚焦的textarea元素，关键是通过监听输入事件并动态控制滚动位置，或是利用浏览器事件机制抑制滚动触发逻辑。

实现方案 #

方案1：记录滚动位置，输入后恢复 #

当textarea处于聚焦状态且完全移出视口时，先记录当前页面滚动位置，输入事件触发后立刻将页面滚回原位置：

const topTextarea = document.querySelector("#input1");
let savedScrollTop;

// 监听页面滚动，判断textarea是否在视口外
window.addEventListener('scroll', () => {
  const rect = topTextarea.getBoundingClientRect();
  // 元素完全不在视口内时记录滚动位置
  if (rect.bottom < 0 || rect.top > window.innerHeight) {
    savedScrollTop = window.scrollY;
  }
});

// 监听输入事件，恢复滚动位置
topTextarea.addEventListener('input', () => {
  if (typeof savedScrollTop !== 'undefined') {
    window.scrollTo({
      top: savedScrollTop,
      behavior: 'instant'
    });
  }
});

// 保留原按钮的focus逻辑
const btn = document.querySelector("button")
btn.addEventListener("click", () => {
  topTextarea.focus({
    preventScroll: true
  });
})

方案2：通过beforeinput事件手动处理输入（部分浏览器支持） #

beforeinput事件在内容即将变更时触发，可通过阻止默认行为避免滚动，同时手动更新textarea内容：

const topTextarea = document.querySelector("#input1");

topTextarea.addEventListener('beforeinput', (e) => {
  const rect = topTextarea.getBoundingClientRect();
  // 仅当元素在视口外时执行逻辑
  if (rect.bottom < 0 || rect.top > window.innerHeight) {
    e.preventDefault();
    // 手动插入输入内容
    const start = topTextarea.selectionStart;
    const end = topTextarea.selectionEnd;
    topTextarea.value = `${topTextarea.value.slice(0, start)}${e.data || ''}${topTextarea.value.slice(end)}`;
    // 恢复光标位置
    topTextarea.selectionStart = topTextarea.selectionEnd = start + (e.data?.length || 0);
  }
});

// 保留原按钮的focus逻辑
const btn = document.querySelector("button")
btn.addEventListener("click", () => {
  topTextarea.focus({
    preventScroll: true
  });
})

原沙箱逻辑说明 #

你提供的沙箱中，按钮触发focus({ preventScroll: true })能阻止聚焦时的滚动，但输入内容时的滚动是浏览器默认行为——当聚焦元素不在视口内时，输入操作会自动滚动到元素位置。上面两种方案分别通过滚动位置回滚和手动处理输入+阻止默认行为来规避该逻辑。

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