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 和滚动时遇到问题.

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

滚动div如下

HTML:

<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">

CSS:

.list{width:auto;height:190px;overflow:hidden;overflow-x:auto;overflow-y:visible;white-space:nowrap;-webkit-overflow-scrolling:touch;}.list 标签{width:110px;height:170px;margin:0 8px 5px;padding:0;position:relative;overflow:hidden;vertical-align:top;display:inline-block;}.list输入{位置:绝对；顶部:-999像素；左:-999像素；}

此滚动在水平方向上运行良好，但是当我触摸里面其中一个 div 并向上拉屏幕以向下滚动页面时，页面具有弹性滚动效果(参见图片).向下滚动页面可以找到我的触摸是否在水平 div 之外开始.

• 第一次查看页面

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

• 在页面的实际底部

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

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

据我所知，这仅发生在 IOS 上.我试过安卓手机，一切都按预期工作.

我已经被这个问题困住了一段时间，不知道我还能做些什么来解决它.任何想法都有帮助.感谢观看！

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

• 带有不起作用的jQuery Mobile页面
• 相同页面没有 jQuery Mobile，它工作

解决方案

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

#cover-builder-page, #page-builder-page {宽度:100%；高度:100%；}

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

<块引用>

演示 ⁽¹⁾

⁽¹⁾ 在 iPhone 5 - Safari 上测试

TLDR; Everything works fine unless I try to scroll down the page with my touch start inside of a horizontally scrolling div, because page has the elastic scrolling effect while not at bottom or top. Removing jQuery Mobile fixes this problem. This is only happening in IOS, Android is fine. TLDR;

I'm having an issue with jQuery Mobile and scrolling.

I have a page that is greater than my screen (on iPhone 5s). This page has 2 horizontally scrolling divs on it with images.

The scrolling divs are as follows

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

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.

• 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

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.

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!

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

解决方案

The problem appears to be caused by the below CSS styles.

#cover-builder-page, #page-builder-page { 
  width:100%;
  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.

Demo ⁽¹⁾

⁽¹⁾ Tested on iPhone 5 - Safari

这篇关于jQuery Mobile IOS 仅发生弹性滚动而不是在页面底部问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！