在不禁用滚动功能的情况下防止iOS反弹

Question

在不禁用滚动功能的情况下防止iOS反弹

Ali*_*mii 19 html javascript css jquery ios

我正在尝试实现一种解决方案,以防止当网页内容大于视口时在Safari for iOS中出现iOS反弹效果.

我正在处理的页面在结构上非常具体,与此页面非常相似http://new.salt.ch/

基本结构是基于bootstrap的.
它顶部有一个固定的导航栏.
它有一个全屏背景幻灯片.
幻灯片显示有一个固定在视口底部的叠加层.
有一个页脚元素可以在画布外加载,只有在滚动内容时才可见.
内容滚动导航栏后面.
内容包含一个位于导航栏下方20px的标题和一系列位于视口上方20px的按钮.
滚动时,按钮和标题都会向上移动以显示页脚.

我遇到的问题与页面http://new.salt.ch/上的问题相同,当你向上滚动时,你会在屏幕底部获得一个反弹效果,并显示背景和叠加层.

我尝试了各种解决方案,包括iNoBounce.js,Nonbounce.js以及我在SO上发现的一些其他建议.

我总是有同样的问题...当我尝试禁用反弹时,所有滚动都被禁用.我猜这是因为内容(除页脚之外)总是足够大以至于不需要滚动,因此滚动被禁用并且滚动时不再可以访问页脚.

Answer 1

小智 17

如果我正确地解释您的问题,我们多年来一直在开发跨平台移动网络应用程序,尝试让所有不同的专有滚动功能在每台设备上正常运行:Apple iOS,Google Android,Windows手机,笔记本电脑Chrome,笔记本电脑Safari,IE和笔记本电脑Edge.

jQuery Mobile继续尝试在他们的框架范围内修复这个问题,但是由于每个设备制造商/操作系统制造商不断更新,所以这太过分了.

是的,我们为每个移动设备提供了解决方案.我们已经测试过,但没有认真考虑开发针对每个设备设备选择性寻呼框架,要求我们检测每个设备并提出每个稍有不同的框架.基本上维护至少3个以及最多十几个不同版本的代码,这是一个非常糟糕的主意.

解决方案:只需将持久性页眉和页脚放在页面框架之上,我们就能获得最大的收益.以下是使用内联样式简化的一般解决方案:

<html>
<head>
  <title>Fixed Header and Footer on All Mobile Web Apps</title>
  <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0" />
  <style>
    html, body { height:100%; width:100%; }
  </style>
</head>
<body>
<div style="position: fixed; height:100%; width:100%; top:0; left:0;">
  <div style="height:calc(100% - 1px); width:100%; margin-top: 60px; z-index: 1; overflow-y: scroll; -webkit-overflow-scrolling: touch;">
    [Body Content That Can Scroll if it extends beyond screen...]

  </div>
  <div style="position: absolute; top:0; left:0; width:100%; height: 60px; background:#dddddd; z-index:10;">
    [Header Content...]

  </div>
  <div style="position: absolute; bottom:0; left:0; width:100%; height: 40px; background:#cccccc; z-index:11;">
    [Footer Content...]

  </div>
</div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

因此,Body可以是任何jQuery Mobile页面集.事实上,从理论上讲,Body几乎可以是来自任何框架的任何内容.

特别说明,高度线:calc(100% - 1px); 对魔术至关重要.

这个看似无限的组合或排列几乎已经成为我们多年来的一个讨伐,试图找到最纯粹,最简单,最普遍兼容的解决方案.因此,在为这个主题投入了令人尴尬的工时后,这不仅是我们最好的解决方案,它也是我们发现的唯一普遍兼容的方法,也允许您坚持只有一个单一的代码库.它已经在最新版本的iOS,Windows Phone,Android,笔记本电脑Chrome,笔记本电脑Safari,PhoneGap,笔记本电脑Firefox,IE 9-11和Windows Edge上成功通过测试.

标签:移动应用程序,网络应用程序,固定标题,固定页脚,持久标题,持久页脚,滚动问题,iOS滚动弹跳,Chrome滚动弹跳,Android滚动弹跳,webkit滚动问题,webkit触摸滚动,iOS触摸滚动问题

你刚刚给我节省了整整一个下午调试@Jeremy Whitt Real的伟大工作!!!!! (2认同)

Answer 2

Jam*_*ell 15

此代码应该停止反弹,因为它是反弹的HTML标记

html {
    height  : 100%;
    overflow: hidden;
}
body {
    height  : 100%;
    overflow: auto;
}

Run Code Online (Sandbox Code Playgroud)

这个修复似乎已经过时了.bouncefix.js似乎不能正常工作. (2认同)

Answer 3

Sgn*_*gnl 15

我在SO上做了几个答案,看起来很惨淡,直到发现这个代码.

html {
  position: fixed;
  height: 100%;
  overflow: hidden;
}

body {
  width: 100vw;
  height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

Run Code Online (Sandbox Code Playgroud)

样式声明body可以放在您想要滚动的任何元素上.您还可以改变overflow-x和overflow-y需要.我个人需要它不要滚动到两侧,所以我声明它.

更新2017年9月15日:我不得不使用此修补另一个项目,我能够没有这些声明做position: fixed和height: 100%;上html选择.因人而异

更新2018年4月12日(在评论中提到):如果您在页面上使用固定元素,那么这些元素在滚动时可能会出现视觉上的"晃动".

Answer 4

Zho*_*wen 5

我使用了iNoBounce https://github.com/lazd/iNoBounce，它运行完美！

如果您还需要允许水平滚动，则santi6291在https://github.com/lazd/iNoBounce/pull/36处有一个拉取请求，该请求可以解决该问题

归档时间：	10 年，4 月前
查看次数：	46889 次
最近记录：	5 年，10 月前