Question

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

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

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

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

Answer 2

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

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

x轴的webkit溢出滚动问题？

2 个答案: