css - 上的垂直滚动在 overflow-x : hidden Is Given On Touch Phone 时不起作用

Question

当我给 overflow: hidden到 <div> & 垂直滑动我的手指滚动，它不会在 UC 浏览器和 Android 默认浏览器的触摸设备上滚动。

我们可以通过 JavaScript 解决这个问题吗？

编辑

我不想在 <div> 中滚动.我想在文档中垂直滚动。 但是，当 <div> 中有水平滚动条时, & 我尝试垂直滚动，文档没有垂直滚动。

如何解决这个问题？

Answer 1

嗯，这很正常，因为 overflow: hidden 正是这样做的:告诉浏览器不要显示溢出元素的内容，也不要让内容滚动。

如果您希望您的内容不会溢出元素，但能够滚动，请执行以下操作:

overflow: auto;

或

overflow: scroll;

区别是什么？ auto 将在需要时显示滚动条(当内容比容器更宽或更高时)，而 scroll 将显示滚动条始终。当然，在触摸设备中没有区别。

如果你想要垂直滚动，而不是水平滚动，你可以使用特定的属性:

overflow-x: hidden;  /*don't scroll, nor show the overflow content horizontally*/
overflow-y: auto;    /*allow scrolling vertically when needed */