Html 同时向上/向下-左/右滚动在iphone上不起作用

关于那件事，我有一个如下的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>

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

问题：虽然它在安卓和台式机上工作得很好，但无法在iphone和safari上运行（无法在chrome for iOS上测试，无法访问该设备）。iphone不会滚动容器，而是滚动整个页面（请尝试左右滚动，同时将手指保持在蓝色矩形上）。请在iphone上查看

我自己阅读stackoverflow并测试它与css

overflow

属性有关，但仍然无法找到解决方案

---

有什么想法吗？

所以解决方案再次是添加

-webkit溢出滚动：touch位于代码的正确位置。在本例中，它是最顶层的
主
容器，并消除了不必要的
溢出
属性：

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

在模拟器上测试过，但现在看起来可以工作了

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