jQuery Mobile IOS只有弹性滚动发生而不是页的底部问题 [英] jQuery Mobile IOS Only Elastic Scrolling Happening While Not At Bottom of Page issue
问题描述
TLDR;
一切正常，除非我尝试向下滚动页面，我的触摸开始在水平滚动的div，因为页面有弹性滚动效果，而不是在底部，最佳。删除jQuery Mobile修复了这个问题。这只是发生在IOS，Android是好的。 TLDR;
我遇到了关于jQuery Mobile的问题并进行滚动。
I'm having an issue with jQuery Mobile and scrolling.
我有一个大于我的屏幕的页面（在iPhone 5s上）。这个页面有2个水平滚动的div与图像。
I have a page that is greater than my screen (on iPhone 5s). This page has 2 horizontally scrolling divs on it with images.
滚动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中的一个 时，在屏幕上向上拉，以向下滚动页面，该页面具有弹性滚动效果（见图像）。
This scrolling works fine horizontally, but when I touch inside one of these divs and pull up on the screen to scroll down the page, the page has the elastic scrolling effect(see images). Scrolling down the page works find if my touch starts outside the horizontal div.
- 第一页视图
- 页面不在底部时弹性滚动
img src =https://i.stack.imgur.com/9HrE2.pngalt =页面不在底部时弹性滚动发生>
- 在页面底部
- 当页面不在顶部时弹性滚动
只有当触摸在水平滚动的div之外时，才能向上和向下滚动页面。如果我删除jQuery Mobile这个问题不再发生。我相信它与jQuery Mobile的vmouse事件有关。但我不能确定是否可以删除那些事件处理程序，并让页面仍然使用jQuery Mobile。
Scrolling up and down the page is only possible when the touch starts outside of the horizontally scrolling div. If I remove jQuery Mobile this issue no longer happens. I believe it has something to do with jQuery Mobile's vmouse events. But I haven't been able to tell for certain and I'm not sure if I can remove those event handlers and have the page still work with jQuery Mobile.
表单据我可以告诉这只是发生在IOS。我试过，android手机和一切正常工作。
Form as far as I can tell this is only happening on IOS. I've tried and android phone and everything works as expected.
我一直困在这一段时间，不知道还能做些什么来解决它。任何想法都是有帮助的。感谢您查找！
I've been stuck on this for a while and can't figure out what else I can do to fix it. Any ideas are helpful. Thanks for looking!
对于任何想要演示的人来说，我都是我的主人。我会把它们放在jsfiddle，但jsfiddle不支持设置视口为移动页面正确渲染。
For anyone that would like a demo here are some I'm hosting. I would have put them on jsfiddle but jsfiddle doesn't support setting viewport for the mobile page to render properly.
- Page with jQuery Mobile which doesn't work
- Same page without jQuery Mobile which does work
推荐答案
问题似乎是由以下CSS样式。
The problem appears to be caused by the below CSS styles.
#cover-builder-page, #page-builder-page {
width:100%;
height:100%;
}
当您设置页面 height 到100％，它会根据视口中的可用空间设置高度。如果你将 min-height 设置为100％，它会工作，或者只是将它们一起删除。
When you set page's height to 100%, it sets height according to available space in viewport. If you set min-height to 100% it will work, or just remove it all together.
演示 （1）
（1）在iPhone 5 - Safari上测试
(1) Tested on iPhone 5 - Safari
这篇关于jQuery Mobile IOS只有弹性滚动发生而不是页的底部问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
