css - 在移动设备上滚动/滑动鼠标不起作用

Question

我在滚动/滑动磁贴时遇到问题。我使用 css 网格，我有一个 div 容器，它有几个子 div。

.container {
display: grid;
grid-template-rows: repeat(1, 89%);
grid-template-columns: repeat(4, 50%);
overflow-x: scroll;
grid-auto-flow: column;
align-items: center;
}

<div class="container">
 <div class="child">child</div>
 <div class="child">child</div>
 <div class="child">child</div>
 <div class="child">child</div>
</div>

在 Chrome 中的 iPhone 和移动模式下，滚动不起作用。有趣的是，水平滚动仅在我使用键盘上的箭头键时才有效。

有什么建议吗？

在 gif 上，我首先尝试用鼠标滑动，然后我使用键盘。

标签： cssmobilescrollswipecss-grid