垂直父母和水平孩子？答案

【问题标题】：Vertical Parent and horizontal child?垂直父母和水平孩子？
【发布时间】：2013-12-20 04:49:18
【问题描述】：

我已经看到了一些与具有选择性滚动功能的容器元素的统一相关的示例，但它们都不是我真正想要的。

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

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

<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）将处理溢出-是的。而且我希望在与内容交互时滚动页面，而不是在触摸屏设备上使用两根手指。

有人遇到过这种情况，可以带领我走上正确的道路吗？

提前谢谢你。

【问题讨论】：

为什么要使用表格进行布局？这是一种不好的做法。
@Diodeus ：但我喜欢这张桌子。它做错了什么？
表格用于表格数据，而不是布局。对于不了解 CSS 工作原理的人来说，它们是一个拐杖。
那么，你说的 overflow: auto 对你不起作用？
@Diodeus 我知道表格元素用于表格数据。我提供的是一个基本示例，说明如何在 OOB 页面布局中布置 Web 部件，以便更容易区分我正在使用的内容。

标签： jquery html css

【解决方案1】：

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

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

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

【讨论】：