限制HTML表格在iPad中向一个方向滚动

Question

我有一个基本的HTML表格，宽度和高度都受到限制，因此它可以垂直和水平滚动。

一切正常，但在iPad上，用户可以向各个方向滚动（包括对角线）。这不是很好。我想一次限制滚动到一个方向。是否可以使用HTML / CSS / JS / jQuery？插件很好。

我也在使用KendoUI网格作为表，如果这有任何区别。

JSFiddle示例：http://jsfiddle.net/dmathisen/km6CN/1/

<table>
    <tr>
        <td>Some code so I can post JS Fiddle link</td>
    </tr>
</table>

Answer 1

您可以通过在代码中添加overflow-x:hidden;来使用纯CSS来完成此操作。这会完全禁用左/右滚动。

#restricted {
    width: 400px;
    height: 300px;
    border: 1px solid red;
    overflow-x: hidden;  
}

http://jsfiddle.net/Fizk/Srv7N/

如果你想以编程方式启用/禁用滚动，你可以很好地使用jQuery来执行此操作;

$("#restriceted").css("overflow-x","hidden");
// Restricting to only up/down scroll