x轴的webkit-overflow-scrolling问题？

Question

我有一个可滚动的 div，其 CSS 如下：

overflow-x:hidden;
overflow-y:auto;
-webkit-overflow-scrolling: touch;
width:200px;
height:500px;

然而，在iOS设备上，当div内的内容比div本身宽时，将启用x轴滚动。我该如何禁用x轴滚动？

- Ninjiangstar

---

这可能会提供一些见解。 - kyletaylored

Answer 1

我一直遇到同样的问题，但很遗憾看起来-webkit-overflow-scrolling没有x/y选项。我通常使用的解决方法是将可滚动的

包装在一个overflow-x: hidden 的

中，这样问题就可以解决了。

标记：

<div class="scroll-container">
  <div class="scroll-wrapper">
    <div class="scroll-body">
    </div>
  </div>
</div>

样式：

.scroll-container {
  -webkit-overflow-scrolling: touch;
  overflow: auto;
  width: 200px;
  width: 500px;
}
.scroll-wrapper {
   width: 200px;
   overflow-x: hidden;
 }

- Steve8708

Answer 2

一个非常简单的解决方法是确保你的元素不要比视口更宽。可以通过在CSS顶部放置一个“catchall”来实现这一点：

div, span, h1, h2, h3, h4, h5, p, img, ul, li, ... ETC ...
{
    max-width: 100%;
}

- Scott Lieberman

---

那太可怕了，而且以后会对你造成麻烦。 - ShrekOverflow

虽然只适用于特定的类，但这是一个好主意。解决了我的Ionic问题。谢谢你。 - Louis LC

哈哈，我赚了很多钱来解决由这样的代码引起的问题。 - Markus Bucher