javascript - jQuery Mobile IOS 只有 flex 滚动发生而不在页面底部问题

Question

TLDR；一切正常，除非我尝试在水平滚动的 div 内使用我的触摸开始向下滚动页面，因为页面具有 flex 滚动效果，而不是在底部或顶部。删除 jQuery Mobile 可以修复此问题。这只发生在 IOS 中，Android 没问题。 TLDR；

我在使用 jQuery Mobile 和滚动时遇到问题。

我的页面比我的屏幕大(在 iPhone 5s 上)。此页面上有 2 个带有图像的水平滚动 div。

滚动的div如下

HTML:

<div class="list">
    <input type="radio" name="cover" value="26" id="Cover26" data-role="none" class="offScreen">
    <label for="Cover26">
        <span class="check"></span>
        <img src="http://placehold.it/110x170" class="background">
    </label>
</div>

CSS:

.list{width:auto;height:190px;overflow:hidden;overflow-x:auto;overflow-y:visible;white-space:nowrap;-webkit-overflow-scrolling:touch;}
    .list label{width:110px;height:170px;margin:0 8px 5px;padding:0;position:relative;overflow:hidden;vertical-align:top;display:inline-block;}
    .list input{position:absolute;top:-999px;left:-999px;}

水平滚动效果很好，但是当我触摸这些 div 之一的 内部 并在屏幕上向上拉以向下滚动页面时，页面具有 flex 滚动效果(参见图片)。向下滚动页面可以找到我的触摸是否从水平 div 之外开始。

• 页面的第一次浏览

• 当页面不在底部时发生 flex 滚动

• 在页面的实际底部

• 当页面不在顶部时发生 flex 滚动

只有当触摸开始于水平滚动的 div 之外时，才能上下滚动页面。如果我删除 jQuery Mobile，此问题将不再发生。我相信它与 jQuery Mobile 的 vmouse 事件有关。但我无法确定，我不确定我是否可以删除这些事件处理程序并让页面仍然使用 jQuery Mobile。

据我所知，这只发生在 IOS 上。我试过 android 手机，一切都按预期工作。

我已经被困在这个问题上一段时间了，想不出我还能做些什么来解决它。任何想法都是有帮助的。感谢您的关注!

对于任何想要演示的人来说，这里有一些我正在主持的演示。我会把它们放在 jsfiddle 上，但 jsfiddle 不支持为移动页面设置视口(viewport)以正确呈现。

• Page with jQuery Mobile which doesn't work
• Same page without jQuery Mobile which does work

Answer 1

问题似乎是由以下 CSS 样式引起的。

#cover-builder-page, #page-builder-page { 
  width:100%;
  height:100%;
}

当您将页面的高度 设置为 100% 时，它会根据视口(viewport) 中的可用空间设置高度。如果将 min-height 设置为 100%，它将起作用，或者将其全部删除。

Demo ⁽¹⁾

⁽¹⁾ 在 iPhone 5 - Safari 上测试