草庐IT

html - 防止 iOS 上的溢出/橡皮筋滚动

coder 2023-07-26 原文

SO 上已经有多个关于溢出/橡皮筋滚动主题的问题，但是

  1. 它们都没有提供适用于 iOS 9.3.2 上所有情况的解决方案
  2. 他们都没有提供关于问题本身的广泛而完整的信息

这就是我创建这篇文章作为知识体系的原因。

问题:

在任何其他帖子中从未提及的是 iOS 溢出滚动实际上是一个两部分行为。

1。使用 overflow: auto/scroll 溢出内容滚动

这是具有 -webkit-overflow-scrolling: touch 的元素的众所周知且最需要的行为连续/动量滚动行为经过元素容器以平滑地减慢滚动内容。

当您以足够高的动量滚动元素的内容以使动量滚动超过滚动内容的长度时，就会发生这种情况。

有了这种行为，element.scrollTop属性根据元素滚动位置而变化，小于 0 或大于最大滚动 (element.scrollHeight - element.offsetHeight)。

2。 <body> 的溢出滚动

如果您尝试将任何已经处于其最小/最大滚动位置的元素滚动到比该位置更远的位置(顶部向上的元素或底部向下的元素)，则会发生此行为。然后卷轴似乎“冒泡”到<body>。标签和整个视口(viewport)滚动。

与上面相反的是 element.scrollTop属性没有改变但是document.body.scrollTop而是更改。

焦点锁定和行为切换(1.5s延迟)

在此上下文中最令人恼火的是，上述两种类型之间的切换不会立即切换。

在您输入两者之一后，您无法将焦点切换到任何其他元素(可滚动元素、按钮、链接...)，因此滚动行为也不会改变。

For instance: if you scroll a element already at its top position upwards you enter overflow scrolling type 2 and the most natural reaction for a user is to then try to scroll back down. Because the focus is locked to the body scroll instead of going to overflow scrolling type 1 it stays in type 2 and the whole body is scrolled downwards. The typical user then starts to arbitrarily starts to scroll up and down frequently without ever breaking out of type 2.

焦点的切换和滚动行为的改变只能发生在溢出动画结束并且元素静止不动(甚至比那长一点[大约 0.5 秒])之后。

thus going back to the previous example the correct reaction of the user would be to stop touching the screen for around 1s - 1.5s and then try to scroll downwards again.

最佳答案

解决方案:

类型 1:

防止元素本身溢出滚动的最基本解决方案是防止触摸事件默认。

document.body.addEventListener('touchmove', function(e) { 
    e.preventDefault(); 
});

然而，此方法会禁用浏览器的 native 动量滚动，因此不适用于大多数应用程序。然而，通过一些改进(只有在顶部向上滚动或底部向下滚动时才能防止......)这种方法解决了大多数问题。许多可能的实现可以在 this SO post 中找到.

类型 2:

然而，上面描述的方法并不能阻止 body 上的溢出滚动。

一个看似合理的可能解决方案是防止元素位于其顶部或底部位置，如 mentioned question 上描述的最佳解决方案| .

anElement.addEventListener('touchstart', function( event ){
    if( this.scrollTop === 0 ) {
        this.scrollTop += 1;
    } else if( this.scrollTop + this.offsetHeight >= this.scrollHeight ) {
        this.scrollTop -= 1;
    }
}

然而，这在 iOS 9.3.2 上并不可靠。

但是起作用的是设置 position: fixed在 <body> 上防止 body 移动的元素。 不过请注意这仍然没有完全停止type 2避免发生，这就是为什么有时您无法滚动/聚焦任何元素，因为在后台 type2它的焦点锁定仍在发生(同样，在您停止触摸屏幕片刻后它再次按预期工作)。

虽然这还远不是最佳解决方案，但它似乎是我们目前所能获得的最佳解决方案。

编辑:请注意，我不确定将 position: fixed 是否安全在 <body> 上元素。跟踪我创建的可能问题 following SO post .显然，创建一个包装元素作为 body 的子元素并将该元素设置为 position: fixed 可能会更好。以避免缩放问题。

编辑 2:定解

脚本iNoBounce创造奇迹。只需将其加载到页面，即可体验无弹跳的 Web 应用程序。到目前为止，我还没有发现这个解决方案有任何问题。

关于html - 防止 iOS 上的溢出/橡皮筋滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37586286/

橡皮筋htmlcodebodysectionioscssscrolloverflow

有关html - 防止 iOS 上的溢出/橡皮筋滚动的更多相关文章

  1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  2. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  3. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  4. ruby-on-rails - date_field_tag，如何设置默认日期？ [ rails 上的 ruby ] - 2

    我想设置一个默认日期，例如实际日期，我该如何设置？还有如何在组合框中设置默认值顺便问一下，date_field_tag和date_field之间有什么区别？ 最佳答案 试试这个:将默认日期作为第二个参数传递。youcorrectlysetthedefaultvalueofcomboboxasshowninyourquestion. 关于ruby-on-rails-date_field_tag，如何设置默认日期？[rails上的ruby]，我们在StackOverflow上找到一个类似的问

  5. ruby-on-rails - openshift 上的 rails 控制台 - 2

    我将我的Rails应用程序部署到OpenShift，它运行良好，但我无法在生产服务器上运行“Rails控制台”。它给了我这个错误。我该如何解决这个问题？我尝试更新ruby​​gems，但它也给出了权限被拒绝的错误，我也无法做到。railsc错误:Warning:You'reusingRubygems1.8.24withSpring.UpgradetoatleastRubygems2.1.0andrun`gempristine--all`forbetterstartupperformance./opt/rh/ruby193/root/usr/share/rubygems/rubygems

  6. ruby-on-rails - 相关表上的范围为 "WHERE ... LIKE" - 2

    我正在尝试从Postgresql表(table1)中获取数据，该表由另一个相关表(property)的字段(table2)过滤。在纯SQL中，我会这样编写查询:SELECT*FROMtable1JOINtable2USING(table2_id)WHEREtable2.propertyLIKE'query%'这工作正常:scope:my_scope,->(query){includes(:table2).where("table2.property":query)}但我真正需要的是使用LIKE运算符进行过滤，而不是严格相等。然而，这是行不通的:scope:my_scope,->(que

  7. ruby - 如何验证 IO.copy_stream 是否成功 - 2

    这里有一个很好的答案解释了如何在Ruby中下载文件而不将其加载到内存中:https://stackoverflow.com/a/29743394/4852737require'open-uri'download=open('http://example.com/image.png')IO.copy_stream(download,'~/image.png')我如何验证下载文件的IO.copy_stream调用是否真的成功——这意味着下载的文件与我打算下载的文件完全相同，而不是下载一半的损坏文件？documentation说IO.copy_stream返回它复制的字节数，但是当我还没有下

  8. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

  9. Ruby 文件 IO 定界符？ - 2

    我正在尝试解析一个文本文件，该文件每行包含可变数量的单词和数字，如下所示:foo4.500bar3.001.33foobar如何读取由空格而不是换行符分隔的文件？有什么方法可以设置File("file.txt").foreach方法以使用空格而不是换行符作为分隔符？ 最佳答案 接受的答案将slurp文件，这可能是大文本文件的问题。更好的解决方案是IO.foreach.它是惯用的，将按字符流式传输文件:File.foreach(filename,""){|string|putsstring}包含“thisisanexample”结果的

  10. ruby-on-rails - capybara ::ElementNotFound:无法找到 xpath "/html" - 2

    我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'

随机推荐