x轴的webkit-overflow-scrolling问题？答案

【问题标题】：webkit-overflow-scrolling issue with x-axis?x轴的webkit-overflow-scrolling问题？
【发布时间】：2014-08-17 20:05:05
【问题描述】：

我有一个带有以下 css 的可滚动 div：

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

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

【问题讨论】：

这可能会显示一些见解。 stackoverflow.com/questions/12845892/…

标签： ios css webkit

【解决方案1】：

我遇到了同样的问题，不幸的是，-webkit-overflow-scrolling 似乎没有 x/y 选项。我通常使用的解决方法是将滚动 div 包装在 overflow-x: hidden div 中，问题应该得到解决。

标记：

<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;
 }

【讨论】：

【解决方案2】：

解决这个问题的一个非常简单的方法就是确保没有任何元素比视口更宽。这可以通过在 CSS 顶部放置一个“catchall”来实现：

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

【讨论】：

那太可怕了，以后会咬你的。
不过对于特定课程来说是个好主意。为我解决了一个离子问题。谢谢。
哈哈，我赚了很多钱来解决由这样的代码引起的问题。