Question

TLDR; 一切正常，除非我尝试在水平滚动div内部的触摸开始向下滚动页面，因为页面具有弹性滚动效果，而不是在底部或顶部。删除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并向上拉屏幕向下滚动页面时，该页面具有弹性滚动效果（请参见图像）。向下滚动页面可以查找我的触摸是否在水平div之外开始。

第一页视图

First view of page

页面不在底部时发生弹性滚动

Elastic scrolling happening when page isn't at bottom

在实际页面底部

At actual bottom of page

当页面不在顶部时发生弹性滚动

Elastic scrolling happening when page isn't at the top

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

据我所知，这种情况只发生在内部监督办公室。我试过和Android手机，一切都按预期工作。

我已经坚持了一段时间，并且无法弄清楚我还能做些什么来修复它。任何想法都有帮助。谢谢你的期待！

对于任何想要演示的人来说，我正在主持一些演示。我会把它们放在jsfiddle上，但是jsfiddle不支持为移动页面设置视口来正确渲染。

Answer 1

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

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

当您将网页的height设置为100％时，它会根据视口中的可用空间设置高度。如果您将min-height设置为100％，它将起作用，或者只是将它们全部删除。

Demo ^（1）

^（1）在iPhone 5上测试 - Safari

jQuery Mobile IOS仅弹出滚动而不是在页面底部问题

1 个答案: