在iPhone中滚动Bug

Question

我在vueJs页面上工作。有几个表可以水平滚动。此表使页面的高度大于视口的高度。我可以滚动水平表并滚动垂直页面而不会出错。但在iPhone中，如果触摸桌面，我无法滚动垂直页面（其他部分滚动正常）。

Answer 1

您可以尝试将您的表格包含在另一个div中，例如：

<div class="outer">
  <div class="inner table"></div>
</div>

和样式：

.outer {
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

.inner {
  height: calc(100% + 1px);
}

Answer 2

我得到了答案。我发现页面上有风格height: 100%的包装器。这导致body的高度等于视口的高度，但该部分包含的表的高度比视口高。 在ios中，我们应该用两根手指滚动局部滚动。 最终解决方案是删除包装上的样式height:100%