ios - x轴的webkit-overflow-scrolling问题？

Question

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

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

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

Answer 1

I've been having the same problem and it seems that there are no x/y options for -webkit-overflow-scrolling unfortunately. The workaround I typically use is to wrap the scrolling div in an overflow-x: hidden div and problem should be solved.

Markup:

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

Styling:

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