如何在iOS移动端浏览器中禁用input及contenteditable元素的自动屏幕居中功能

这个问题确实是iOS Safari内置的无障碍特性——当聚焦可编辑元素时，浏览器会自动将元素滚动到视口中央，确保用户能清晰看到编辑区域，但在矩阵布局场景下确实会破坏体验。下面是两种可靠的解决方法：

方法一：使用CSS scroll-margin 调整滚动对齐目标 #

通过给聚焦的contenteditable元素设置scroll-margin，改变浏览器滚动时的对齐基准，让它不再将元素居中，而是保持当前滚动位置的对齐：

p[contenteditable="true"]:focus {
  background-color: fuchsia;
  /* 设置scroll-margin为0，让浏览器滚动到元素的左上角对齐，而非居中 */
  scroll-margin: 0;
  /* 如果需要更精准的控制，可以分别设置上下左右 */
  /* scroll-margin-top: 0;
  scroll-margin-left: 0; */
}

补充说明 #

scroll-margin定义了元素与滚动容器边缘的“滚动边距”，浏览器在滚动到聚焦元素时，会以这个边距为基准对齐，而不是默认的居中对齐。这个方法纯CSS实现，没有抖动问题，是首选方案。

方法二：JavaScript 强制恢复滚动位置 #

如果CSS方案不生效（比如某些旧版本iOS Safari），可以通过监听focus事件，在浏览器自动滚动后强制恢复到原来的滚动位置：

// 给所有contenteditable元素绑定焦点事件
document.querySelectorAll('[contenteditable="true"]').forEach(cell => {
  cell.addEventListener('focus', () => {
    // 记录当前滚动位置
    const currentScrollX = window.scrollX;
    const currentScrollY = window.scrollY;
    // 用setTimeout确保在浏览器自动滚动后执行
    setTimeout(() => {
      window.scrollTo(currentScrollX, currentScrollY);
    }, 0);
  });
});

注意事项 #

这个方法可能会有轻微的视觉抖动，因为浏览器会先执行自动滚动，再被我们强制拉回原位置，但在CSS方案无效时可以作为备选。

修改后的完整代码 #

下面是整合了CSS方案的完整代码，你可以直接测试：

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body {
      text-align: center;
      margin: 0;
      padding: 0;
    }
    #container {
      width: 100%;
      margin-left: auto;
      margin-right: auto;
    }
    .row {
      height: 100px;
    }
    p[contenteditable="true"] {
      display: inline-block;
      text-align: center;
      vertical-align: middle;
      line-height: normal;
      height: 80px;
      width: 80px;
      background-color: blue;
      border: 1px solid white;
      font-size: 50px;
      color: white;
    }
    p[contenteditable="true"]:focus {
      background-color: fuchsia;
      /* 核心CSS：禁用自动居中滚动 */
      scroll-margin: 0;
    }
  </style>
</head>
<body>
  <div id="container">
    <div class="row">
      <p contenteditable="true"></p>
      <p contenteditable="true"></p>
      <p contenteditable="true"></p>
      <p contenteditable="true"></p>
      <p contenteditable="true"></p>
    </div>
    <div class="row">
      <p contenteditable="true"></p>
      <p contenteditable="true"></p>
      <p contenteditable="true"></p>
      <p contenteditable="true"></p>
      <p contenteditable="true"></p>
    </div>
    <div class="row">
      <p contenteditable="true"></p>
      <p contenteditable="true"></p>
      <p contenteditable="true"></p>
      <p contenteditable="true"></p>
      <p contenteditable="true"></p>
    </div>
    <div class="row">
      <p contenteditable="true"></p>
      <p contenteditable="true"></p>
      <p contenteditable="true"></p>
      <p contenteditable="true"></p>
      <p contenteditable="true"></p>
    </div>
    <div class="row">
      <p contenteditable="true"></p>
      <p contenteditable="true"></p>
      <p contenteditable="true"></p>
      <p contenteditable="true"></p>
      <p contenteditable="true"></p>
    </div>
    <div class="row">
      <p contenteditable="true"></p>
      <p contenteditable="true"></p>
      <p contenteditable="true"></p>
      <p contenteditable="true"></p>
      <p contenteditable="true"></p>
    </div>
  </div>
</body>
</html>

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