防止iOS反弹而不禁用滚动function
我试图实现一个解决scheme，以防止iOS的Safari浏览器中的网页内容大于视口的反弹效果。
我正在处理的页面在结构上非常具体，与本页面非常相似http://new.salt.ch/
- 基本结构是基于bootstrap的。
- 它顶部有一个固定的导航栏。
- 它有一个全屏幕的幻灯片背景。
- 幻灯片具有固定在视口底部的叠加层。
- 有一个页脚元素加载非canvas，只有在滚动内容时才可见。
- 内容在导航栏后面滚动。
- 位于导航栏下方20px的标题的内容consistes和位于视口上方20px的一系列button。
- 滚动时，button和标题都向上移动屏幕以显示页脚。
我遇到的问题与http://new.salt.ch/页面上的问题相同，因为当您向上滚动时，屏幕底部会显示反弹效果，并显示背景和叠加层。
我已经尝试了各种解决scheme，包括iNoBounce.js，Nonbounce.js和我在其上发现的一些其他build议。
我总是有同样的问题…当我尝试禁用反弹，所有滚动被禁用。 我猜这是因为内容（除了页脚）总是足够大，滚动是不需要的，所以滚动被禁用，页脚不再可以在滚动访问。
此代码应该停止反弹，因为它是反弹的HTML标记
html { height : 100%; overflow: hidden; } body { height : 100%; overflow: auto; } 如果我正确地解释你的问题，我们多年来一直在开发跨平台移动networking应用程序的问题，试图让所有不同的专有滚动function在每个设备上正常工作：Apple iOS，Google Android，Windows手机，笔记本电脑Chrome浏览器，笔记本电脑Safari，IE和笔记本电脑边
jQuery Mobile继续尝试并在框架的范围内解决这个问题，但是每个设备制造商/操作系统制造商都会不断更新，这太过分了。
是的，我们为每个移动设备都提供了解决scheme。 我们已经testing了，但没有认真考虑为每个器件开发器件select性分页框架，要求我们检测每个器件，并为每个器件提供一个稍微不同的框架。 疯狂的坏主意，基本上保持至less3和真正多达十几个不同版本的代码。
解决scheme：通过将您的持久性页眉和页脚放在页面框架之上，我们获得了最多的运气。 以下是使用内联样式进行简化的一般解决scheme：
<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>
所以，Body可以是任何jQuery Mobile页面集合。 实际上，在理论上，身体几乎可以来自任何框架的任何内容。
特别注意，高度线：calc（100％ – 1px）; 对魔法至关重要。
这个问题看似无限的组合或排列，几乎成了我们这些年来的一场讨伐，试图find最纯粹，最简单，最普遍兼容的解决scheme。 所以，在为这个话题专门投入了大量的工时之后，这不仅是我们最好的解决scheme，而且也是我们发现的唯一一个通用兼容的方法，它也允许您仅使用一个单一的代码库。 它已经在最新版本的iOS，Windows Phone，Android，笔记本电脑Chrome，笔记本电脑Safari，PhoneGap，笔记本电脑Firefox，IE 9-11和Windows Edge上成功通过testing。
标签：移动应用程序，网页应用程序，固定页眉，固定页脚，持久页眉，持久页脚，滚动问题，iOS滚动反弹，Chrome浏览器反弹，Android滚动反弹，webkit滚动问题，webkit触摸滚动，iOS触摸滚动问题
我经历了几个关于这个问题的答案，事情看起来很黯淡，直到偶然发现这个代码。
html { position: fixed; height: 100%; overflow: hidden; } body { width: 100vw; height: 100vh; overflow-y: scroll; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
body的样式声明可以放在任何你想要滚动的元素上。 您也可以根据需要更改overflow-x和overflow-y 。 我个人需要它不滚动到双方，所以我宣布如此。
更新2017年9月15日：我不得不使用这个修复程序的另一个项目，我能够做到没有这些声明position: fixed和height: 100%; 在htmlselect器上。 因人而异
我设法解决了大部分支持overflow: auto问题overflow: auto和overflow: scroll在移动Safari上overflow: scroll ：
- 在列表开头触摸之后不需要挂住滚动视图，然后向下移动然后向上移动（在这种情况下，移动Safari运行其整个页面的默认弹跳行为）
- 支持顶部的固定头部/动作栏，而不会由滚动条造成难看的重叠
window.addEventListener('DOMContentLoaded', function () { var atTop = true; var atBottom = false; var body = document.getElementById('fixedBody'); body.addEventListener('touchmove', function(event){ event.preventDefault(); }); body.addEventListener('touchstart', function(event){ event.preventDefault(); }); body.addEventListener('touchend', function(event){ event.preventDefault(); }); var scrollingDiv = document.getElementById('scrollDiv'); if (scrollingDiv.scrollHeight <= scrollingDiv.clientHeight) { atBottom = true; } scrollingDiv.addEventListener('scroll', function(event){ if (event.target.scrollTop === 0) { atTop = true; } else { atTop = false; } if (event.target.scrollHeight - event.target.scrollTop === event.target.clientHeight) { atBottom = true; } else { atBottom = false; } }); var lastY = 0; var topLock = false; var bottomLock = false; scrollingDiv.addEventListener('touchmove', function(event){ event.stopPropagation(); var currentY = event.touches[0].clientY; if (currentY > lastY) { // moved down if (atTop) { event.preventDefault(); topLock = true; } if (bottomLock) { bottomLock = false; // TODO: Emulate finger remove and touch again here } } else if(currentY < lastY){ // moved top if (atBottom) { event.preventDefault(); bottomLock = true; } if (topLock) { topLock = false; // TODO: Emulate finger remove and touch again here } } lastY = currentY; }); scrollingDiv.addEventListener('touchstart', function(event){ lastY = event.touches[0].clientY; event.stopPropagation(); }); scrollingDiv.addEventListener('touchend', function(event){ event.stopPropagation(); }); });
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> </head> <body id="fixedBody" style="overflow: hidden;"> <div style="position: fixed; height: 64px; width:100%; top:0; left:0; background-color: green; z-index: 1;"> Header </div> <div id="scrollDiv" style="position: absolute; width: 100%; top: 64px; bottom: 0px; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; background-color: white;"> <div style="height: 150px; background-color: blue;"> First </div> <div style="height: 150px; background-color: red;"> Second </div> <div style="height: 150px; background-color: green;"> Third </div> <div style="height: 150px; background-color: black;"> Another </div> </div> </body> </html>
我用iNoBounce https://github.com/lazd/iNoBounce ，它完美的作品！
如果您还需要允许水平滚动，那么在https://github.com/lazd/iNoBounce/pull/36上有santi6291的pull请求，