jjzjj

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

coder 2024-01-11 原文

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)以正确呈现。

最佳答案

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

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

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

Demo (1)

(1) 在 iPhone 5 - Safari 上测试

关于javascript - jQuery Mobile IOS 只有 flex 滚动发生而不在页面底部问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21055360/

javascriptjQuerystrongsection34ioscssjquery-mobile

有关javascript - jQuery Mobile IOS 只有 flex 滚动发生而不在页面底部问题的更多相关文章

  1. ruby-on-rails - form_for 中不在模型中的自定义字段 - 2

    我想向我的Controller传递一个参数，它是一个简单的复选框，但我不知道如何在模型的form_for中引入它，这是我的观点:{:id=>'go_finance'}do|f|%>Transferirde:para:Entrada:"input",:placeholder=>"Quantofoiganho?"%>Saída:"output",:placeholder=>"Quantofoigasto?"%>Nota:我想做一个额外的复选框，但我该怎么做，模型中没有一个对象，而是一个要检查的对象，以便在Controller中创建一个ifelse，如果没有检查，请帮助我，非常感谢,谢谢

  2. ruby - 当使用::指定模块时，为什么 Ruby 不在更高范围内查找类？ - 2

    我刚刚被困在这个问题上一段时间了。以这个基地为例:moduleTopclassTestendmoduleFooendend稍后，我可以通过这样做在Foo中定义扩展Test的类:moduleTopmoduleFooclassSomeTest但是，如果我尝试通过使用::指定模块来最小化缩进:moduleTop::FooclassFailure这失败了:NameError:uninitializedconstantTop::Foo::Test这是一个错误，还是仅仅是Ruby解析变量名的方式的逻辑结果？ 最佳答案 Isthisabug,or

  3. ruby-on-rails - 启用 Rack::Deflater 时 ETag 发生变化 - 2

    在启用Rack::Deflater来gzip我的响应主体时偶然发现了一些奇怪的东西。也许我遗漏了一些东西，但启用此功能后，响应被压缩，但是资源的ETag在每个请求上都会发生变化。这会强制应用程序每次都响应，而不是发送304。这在没有启用Rack::Deflater的情况下有效，我已经验证页面源没有改变。我正在运行一个使用thin作为Web服务器的Rails应用程序。Gemfile.lockhttps://gist.github.com/2510816有没有什么方法可以让我从Rack中间件获得更多的输出，这样我就可以看到发生了什么？提前致谢。 最佳答案

  4. ruby - 当 attr_accessor 在类方法中时会发生什么？ - 2

    所以我想到了这个，想知道当下面的一些事情完成后会发生什么。classTestdefself.abcattr_accessor:Johnendendobject=Test.newputs"beforecallingclassmethodabc:#{object.class.instance_methods(false)}"Test.abcputs"aftercallingclassmethodabc:#{object.class.instance_methods(false)}"这里我检查的是，getter和setter方法是否以这种方式创建。如果是这样，是那些实例方法或类方法。首先我创

  5. ruby - 在 ASP 页面上 Mechanize 中断 - 2

    require'mechanize'agent=Mechanize.newlogin=agent.get('http://www.schoolnet.ch/DE/HomeDE.htm')agent.clicklogin.link_withtext:/Login/然后我得到Mechanize::UnsupportedSchemeError。 最佳答案 Mechanize不支持javascript但您可以将搜索字段添加到表单并为其分配搜索词并使用mechanize提交表单form=page.forms.firstform.add_fie

  6. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  7. ruby-on-rails - 只有当不是 nil 时才执行映射？ - 2

    如果names为nil，则以下中断。我怎样才能让这个map只有在它不是nil时才执行？self.topics=names.split(",").mapdo|n|Topic.where(name:n.strip).first_or_create!end 最佳答案 其他几个选项:选项1(在其上执行map时检查split的结果):names_list=names.try(:split,",")self.topics=names_list.mapdo|n|Topic.where(name:n.strip).first_or_create!e

  8. ruby-on-rails - prawnto 显示新页面时不会中断的表格 - 2

    我有可变数量的表格和可变数量的行，我想让它们一个接一个地显示，但如果表格不适合当前页面，请将其放在下一页，然后继续。我已将表格放入事务中，以便我可以回滚然后打印它(如果高度适合当前页面)，但我如何获得表格高度？我现在有这段代码pdf.transactiondopdf.table@data,:font_size=>12,:border_style=>:grid,:horizontal_padding=>10,:vertical_padding=>3,:border_width=>2,:position=>:left,:row_colors=>["FFFFFF","DDDDDD"]pdf.

  9. ruby - 当你有一个没有参数的 case 语句并且 when 子句是 lambda 时会发生什么？ - 2

    这段代码没有像我预期的那样执行:casewhen->{false}then"why?"else"ThisiswhatIexpect"end#=>"why?"这也不是casewhen->(x){false}then"why?"else"ThisiswhatIexpect"end#=>"why?"第一个then子句在两种情况下都被执行，这意味着我提供给when子句的lambda没有被调用。我知道无论when子句的主题是什么，都应该调用大小写相等运算符===。我想知道当没有为case提供参数时，===的另一边会发生什么。我在想它可能是nil，但它不可能是:->{false}===nil#=>

  10. ruby - 每个页面上的 Jekyll 分页 - 2

    据我们所知，Jekyll默认分页仅支持index.html，我想创建blog.html并在那里包含分页。有什么解决办法吗？ 最佳答案 如果您创建一个名为/blog的目录并在其中放置一个index.html文件，那么您可以向_config.yml表示paginate_path:"blog/page:num"。不是使用根文件夹中的默认index.html作为分页器模板，而是使用/blog/index.html。分页器将根据需要生成类似/blog/page2/和/blog/page3/的页面。这将使您到达yourwebsite.com/b

随机推荐