html - iphone 向下滚动带有水平滚动元素的页面

Question

我有一个页面有一个水平滚动元素(一行可以横向滚动的图像)，它非常简单。
我的问题是，在 iPhone 上，如果我尝试垂直滚动页面并从水平滚动元素的区域开始滚动，则页面不会滚动。

在 Android 设备上它运行良好，知道为什么会发生这种情况以及如何解决这个问题吗？

更新:我发现我的主题 css 的罪魁祸首有以下 html,body {height: 100%;}，我仍然有兴趣了解它为什么会导致这个以及我如何在不删除该行的情况下修复它，(我没有设计主题，不能确定不需要 css)

div {min-height: 2000px}
ul {white-space: nowrap; overflow-x: scroll;}
li {display: inline-block; margin: 5px; background: #555;}
html,body {height: 100%;}

<div>
stuff<br> stuff<br> stuff<br> stuff<br>
<ul><li>side sliding elemntts</li><li>side sliding elemntts</li><li>side sliding elemntts</li><li>side sliding elemntts</li><li>side sliding elemntts</li><li>side sliding elemntts</li><li>side sliding elemntts</li><li>side sliding elemntts</li><li>side sliding elemntts</li><li>side sliding elemntts</li><li>side sliding elemntts</li><li>side sliding elemntts</li><li>side sliding elemntts</li><li>side sliding elemntts</li><li>side sliding elemntts</li><li>side sliding elemntts</li><li>side sliding elemntts</li><li>side sliding elemntts</li><li>side sliding elemntts</li><li>side sliding elemntts</li></ul>
stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br>
</div>

Answer 1

你必须确保 height 的 html 和 body 样式没有设置