移动设备溢出:滚动和溢出滚动:触摸//防止视口“反弹"； [英] Mobile overflow:scroll and overflow-scrolling: touch // prevent viewport "bounce"
问题描述
在移动设备(野生动物园，Web浏览器，无论在何处)上，overflow:scroll和overflow-scrolling: touch滚动都非常流畅，非常酷.
On a mobile (safari, webviews, wherever), overflow:scroll and overflow-scrolling: touch give a pretty smooth scroll, wich is cool.
但是，它会使页面反弹"(在下面圈出区域)，在您不使用页面时不是这种情况，但是这会使体验少一些本机"(就我而言，更简单些)可以对此有意见，绝对没有用)
But, it makes the page "bounce" (area circled below), which is not the case when you are not using it, but which makes the experience a little less "native" (and more simply, as far as I can have an opinion about it, is absolutely unuseful)
有没有办法防止它发生? 非常感谢您的帮助/提示/回复
Is there a way to prevent it to happen ? Thanks a lot for your help/hints/replies
推荐答案
我设法找到一种CSS解决方法来防止视口反弹.关键是使用-webkit-touch-overflow:scroll将内容分为3个div.最后一个div的最小高度应为101％.此外，您应该在表示设备尺寸的body标签上显式设置固定的宽度/高度.我在主体上添加了红色背景，以表明正在弹跳的是内容而不是移动Safari视口.
I've managed to find a CSS workaround to preventing bouncing of the viewport. The key was to wrap the content in 3 divs with -webkit-touch-overflow:scroll applied to them. The final div should have a min-height of 101%. In addition, you should explicitly set fixed widths/heights on the body tag representing the size of your device. I've added a red background on the body to demonstrate that it is the content that is now bouncing and not the mobile safari viewport.
下面的源代码，这里是一个插件(也已在iOS7 GM上进行了测试). http://embed.plnkr.co/NCOFoY/preview
Source code below and here is a plunker (this has been tested on iOS7 GM too). http://embed.plnkr.co/NCOFoY/preview
如果您打算在iPhone 5上将其作为全屏应用程序运行，请将高度修改为1136px(当apple-mobile-web-app-status-bar-style设置为"black-translucent"或1096px时)设置为黑色").一旦考虑到移动Safari的浏览器，视口的高度即为920x.
If you intend to run this as a full-screen app on iPhone 5, modify the height to 1136px (when apple-mobile-web-app-status-bar-style is set to 'black-translucent' or 1096px when set to 'black'). 920x is the height of the viewport once the chrome of mobile safari has been taken into account).
<!doctype html>
<html>
<head>
<meta name="viewport" content="initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no" />
<style>
body { width: 640px; height: 920px; overflow: hidden; margin: 0; padding: 0; background: red; }
.no-bounce { width: 100%; height: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; }
.no-bounce > div { width: 100%; height: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; }
.no-bounce > div > div { width: 100%; min-height: 101%; font-size: 30px; }
p { display: block; height: 50px; }
</style>
</head>
<body>
<div class="no-bounce">
<div>
<div>
<h1>Some title</h1>
<p>item 1</p>
<p>item 2</p>
<p>item 3</p>
<p>item 4</p>
<p>item 5</p>
<p>item 6</p>
<p>item 7</p>
<p>item 8</p>
<p>item 9</p>
<p>item 10</p>
<p>item 11</p>
<p>item 12</p>
<p>item 13</p>
<p>item 14</p>
<p>item 15</p>
<p>item 16</p>
<p>item 17</p>
<p>item 18</p>
<p>item 19</p>
<p>item 20</p>
</div>
</div>
</div>
</body>
</html>
这篇关于移动设备溢出:滚动和溢出滚动:触摸//防止视口“反弹"；的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
