jquery - 垂直父级和水平子级？

Question

我看过一些关于容器元素与选择性滚动功能的统一的例子，但没有一个是我真正想要的。

基本上我正在使用 SharePoint 并尝试修改 seattle masterpage 以在响应式网页设计中处理未知大小的内容。一个示例是大型数据表。

我认为最好的选择是让内容的宽度固定，并在 x 轴上具有滚动效果，而实际的页面部分将处理垂直滚动。这样我的页眉和页脚就不会受到水平移动的影响，也不会弹出任何奇怪的空格。

示例:JsFiddle.net

<div id='s4-workspace'>
<div id='contentBox'>
    <table>
        <tbody>
            <tr>
                <td><div class='content'></div></td>
                <td><div class='content'></div></td>
            </tr>
            <tr>
                <td><div class='content'></div></td>
                <td><div class='content'></div></td>
            </tr>
        </tbody>
    </table>
</div>
</div>

但在与触摸屏交互时出现问题:在内容容器内交互时，我无法向上或向下滚动，除非我用两根手指滚动。

重申一下:在西雅图母版页上，我希望内容(#contentBox)处理溢出-x，而页面(#s4-workspace)处理溢出- y。我希望页面在我与内容交互时滚动，而无需使用两根手指在触摸屏设备上工作。

任何人都遇到过这种情况，可以引导我走上正确的道路吗？

提前谢谢你。

Answer 1

看起来我已经解决了我自己的问题，这反过来又导致了新的外观问题...... :(

但没关系，那些是不同的缺陷。对于任何想知道这个奇迹如何实现的人:-webkit-overflow-scrolling:touch;。就是这样。将那个样式弹出到父容器上，看看非 iOS 原生的美。

我只希望这适用于 HTC 平板电脑。