iOS设备上表格滚动优化：实现overflow-x:auto与-webkit-overflow-scrolling:touch的结合使用以解决水平滚动问题

一、引言

你知道吗，在移动设备上浏览网页时，有时候我们会遇到这样的问题：设置了`overflow-x:auto`的表格上下却无法滑动。这个问题在iOS设备上尤为常见，相信很多开发者都曾遭遇过。

二、问题分析

为什么会出现这样的问题呢？
首先，我们需要明确一下`overflow-x:auto`的作用。当你把一堆内容塞进一个容器里，结果发现这堆内容宽度太大，超过了容器本身的大小，这时候就会蹦出个滚动条来帮忙。这个滚动条的出现，就是`overflow-x`属性在背后施展的魔法。auto”这个设置呢，就像是在和浏览器悄咪咪地说：“喂，老兄，如果内容太多放不下了，你是不是该考虑秀出滚动条来帮忙啊？它会聪明地根据内容的多少自动判断，需要的话就显示出来，不需要就不显摆。
接下来我们再来看看iOS设备的特点。你知道吗，iOS设备的屏幕尺寸相对窄一些，大家平时也更习惯于竖直握着手机操作。因此，在设计网页时，我们这些设计师往往会脑洞大开，选择把表格或者那些长长的列表以横排布局的方式展示出来，这样一来，不仅符合用户的使用习惯，也让页面看起来更加直观、易读~然而，当表格里面的东西太多太长，以至于塞满整个屏幕还绰绰有余的时候，你就得借助那个滚动条小家伙，滑动它才能看到表格下面藏着的其他行内容啦。
这就涉及到另一个问题：iOS设备上的滚动条是如何处理的？我们知道，网页中的滚动条是由浏览器控制的，而在iOS设备上，浏览器使用的其实是WebKit内核，也就是Safari的渲染引擎。在WebKit中，有一个名为`-webkit-overflow-scrolling`的样式属性，可以用来改变滚动条的行为。
这个属性的取值有三种：`touch`、`auto`和`momentum`。这其中呢，"touch"这个选项意味着你要通过手指触摸滚动条来让它滚动起来，就像滑手机屏幕那样。"auto"这个模式就比较智能了，它让系统自动判断并决定滚动条啥时候该出现、啥时候该滚动，一切都交给系统自己做主。而"momentum"这个设定就更有意思啦，就像是滚动条有了自己的“冲劲儿”，一旦滚动起来就会保持一定的速度滑动下去，有点像物理中的惯性滚动效果~
所以，如果我们想要在iOS设备上正常显示`overflow-x:auto`的滚动条，就需要同时满足两个条件：

1. 设置`overflow-x:auto`

2. 使用`-webkit-overflow-scrolling:touch`样式属性

三、代码示例

接下来，我们就来看几个具体的例子，分别演示如何在不同的情况下使用这两个属性。
首先是不设置`-webkit-overflow-scrolling:touch`的情况：

<div style="width: 200px; height: 200px; overflow-x: auto;">
    <table>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
        <tr><td>5</td><td>6</td><td>7</td><td>8</td></tr>
        <tr><td>9</td><td>10</td><td>11</td><td>12</td></tr>
    </table>
</div>

这段代码会在一个200px宽的`div`中创建一个表格，表格的每列都有四个单元格，这样当表格内容超出宽度时，就会出现滚动条。
然后是只设置了`-webkit-overflow-scrolling:touch`的情况：

<div style="width: 200px; height: 200px; overflow-x: auto; -webkit-overflow-scrolling: touch;">
    <table>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
        <tr><td>5</td><td>6</td><td>7</td><td>8</td></tr>
        <tr><td>9</td><td>10</td><td>11</td><td>12</td></tr>
    </table>
</div>

这段代码与上面的例子基本相同，只是多了一个`-webkit-overflow-scrolling:touch`样式属性。
最后是同时设置了`overflow-x:auto`和`-webkit-overflow-scrolling:touch`的情况：

<div style="width: 200px; height: 200px; overflow-x: auto; -webkit-overflow-scrolling: touch;">
    <table>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
        <tr><td>5