Question

关注那件事：我有一个以下的div结构：

<div class="main">
    <div class="container">
        <div class="column">        
            <div class="content">
                <div class="block"></div> (repeat 4 times)
            </div>
        </div>
        <div class="column">
            <div class="content">
                <div class="block"></div> (repeat 4 times)
            </div>
        </div>
        <div class="column">
            <div class="content">
                <div class="block"></div> (repeat 4 times)
            </div>
        </div>
    </div>
</div>

CSS：

.main {
    overflow-x: scroll;
    width: 400px;        
}

.block {
    display: block;
    width: 300px;
    height: 80px;
    background-color: blue;
    margin: 5px;
}

.container {
    width: 1000px;
}

.column {
    float: left;
    height: 300px;
}

.content {
    height: 300px;
    overflow: scroll;
}

这种布局的想法是它有一个大容器，水平滚动，包含垂直滚动的较小容器。

问题：虽然它在Android和桌面上完美运行，但无法让它在带有safari的iphone上工作（虽然无法在iOS上测试Chrome，但无法访问设备）。 iphone不是滚动容器，而是滚动整个页面（请尝试向左滚动，同时保持手指在蓝色矩形上）。请参阅iphone上的this jsfiddle。

我确实读过stackoverflow并自己测试它与css overflow属性有关，但仍然无法找到解决方案。

有什么想法吗？

Answer 1

因此，解决方案再一次是在代码的正确位置添加-webkit-overflow-scrolling:touch;。在这种情况下，它是最顶层的main容器，并删除了不必要的overflow属性：

.main {
    overflow-x: scroll;
    width: 300px;
    -webkit-overflow-scrolling:touch;
}

在模拟器上测试过，但现在看起来像是在工作。 JSFiddle

同时向上/向下 - 左/右滚动无法在iphone

1 个答案: