移动端浏览器中如何阻止textarea获取焦点时滚动到顶部？

我完全懂你遇到的糟心情况——移动端浏览器里，点了高度超出视口的textarea后，页面会自动滚到textarea顶部，打乱了用户原本的浏览位置。你之前试的click事件处理没戳中核心问题，我给你两个更靠谱的解决方案：

方案一：用JavaScript精准拦截滚动行为 #

浏览器的自动滚动是在focus事件触发后异步执行的，所以我们要等它完成默认滚动后，再把页面拉回原来的位置。试试这段代码：

$(document).ready(function() {
  $('textarea').on('focus', function() {
    // 先记录当前页面的滚动位置
    const currentScroll = window.pageYOffset || document.documentElement.scrollTop;
    // 用requestAnimationFrame确保在浏览器自动滚动后执行回滚
    requestAnimationFrame(() => {
      window.scrollTo(0, currentScroll);
    });
  });
});

为什么你的旧代码没生效？因为click事件触发时，浏览器还没启动焦点滚动逻辑，而且event.preventDefault()也拦不住后续的默认滚动行为。换成监听focus事件，再配合异步回滚，就能精准覆盖浏览器的自动操作。

方案二：CSS禁用滚动锚定（更简洁） #

如果你的目标浏览器支持现代CSS特性，一行CSS就能搞定：

body {
  overflow-anchor: none;
}

这个属性会直接禁用浏览器的「滚动锚定」功能——也就是元素获焦时，浏览器不会自动调整滚动位置让元素进入视口。它不需要写任何JS，代码更轻量，而且Chrome、Safari 15.4+、Firefox等主流移动端浏览器都支持。

小提示 #

• 优先试CSS方案，高效又省心；如果要兼容旧版浏览器，再用JS方案兜底。
• 记得在目标移动端设备上测试，不同浏览器的细节行为可能略有差异。

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