HTML邮件移动端双向水平滚动初始布局实现（无JavaScript）

我懂你遇到的痛点了——当子元素宽度超过容器时，默认的overflow-x: scroll会把内容钉在最左端，用户只能往右滚，没法直接向左操作。而且因为是HTML邮件，不能用JS，还得适配移动触摸操作。下面给你一个纯内联CSS的解决方案，完美适配邮件客户端：

核心思路 #

通过给滚动容器添加左右各50%的内边距，让滚动内容的两侧都留出足够的空白区域。这样浏览器加载时会自动把内容居中显示，用户打开就能直接向任意方向滚动，不用先滚到边界。同时加上触摸滚动优化属性，保证移动端体验流畅。

完整代码示例 #

<table width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td>
      <!-- 滚动容器 -->
      <div style="
        width: 100%;
        overflow-x: scroll;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-left: 50%;
        padding-right: 50%;
        box-sizing: border-box;
      ">
        <!-- 你的横向滚动内容（支持多个子元素） -->
        <div style="
          display: inline-block;
          width: 800px;
          height: 200px;
          background-color: #f0f0f0;
          text-align: center;
          line-height: 200px;
          margin: 0;
        ">
          宽于容器的滚动内容
        </div>
        <div style="
          display: inline-block;
          width: 200px;
          height: 200px;
          background-color: #ccc;
          text-align: center;
          line-height: 200px;
          margin: 0;
        ">
          子元素2
        </div>
      </div>
    </td>
  </tr>
</table>

关键细节拆解 #

• width: 100%: 让容器占满父元素宽度，适配不同移动端屏幕
• overflow-x: scroll: 明确开启水平滚动功能
• white-space: nowrap: 强制子元素横向排列，避免自动换行
• -webkit-overflow-scrolling: touch: 给移动端添加惯性滚动效果，触摸体验更自然（iOS和多数安卓邮件客户端都支持）
• padding-left: 50%; padding-right: 50%: 在滚动内容左右各添加容器宽度一半的空白，让内容初始居中，支持双向滚动
• box-sizing: border-box: 确保内边距不会撑开容器宽度，保持布局稳定
• display: inline-block: 让子元素横向排列，支持多个元素连续滚动

兼容性说明 #

这个方案在主流移动端邮件客户端（iOS Mail、Gmail App、Outlook Mobile）都能正常工作。桌面端Outlook可能不支持overflow-x: scroll，但桌面用户可以通过鼠标拖动滚动，且初始位置依然保持居中状态。

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