在移动设备(野生动物园,网页浏览,无论在哪里),overflow:scroll
和overflow-scrolling: touch
给出了一个非常流畅的卷轴,这很酷。
但是,它使页面“反弹”(下面圈出的区域),当你不使用它时不是这种情况,但这使得体验不那么“原生”(更简单地说,就我可以有一个关于它的意见,绝对没有用)
有没有办法防止它发生?非常感谢您的帮助/提示/回复
我设法找到一个CSS解决方法来防止视口的弹跳。关键是用-webkit-touch-overflow:滚动应用于它们来将内容包装在3个div中。最终div的最小高度应为101%。此外,您应在body标签上明确设置固定宽度/高度,以表示设备的大小。我在身体上添加了一个红色背景,以证明它是现在弹跳的内容,而不是移动的safari视口。
下面的源代码和这里是一个plunker(这已经在iOS7 GM上测试过)。 http://embed.plnkr.co/NCOFoY/preview
如果您打算在iPhone 5上将其作为全屏应用程序运行,请将高度修改为1136px(当apple-mobile-web-app-status-bar-style设置为'black-translucent'或1096px时设置为'黑色')。一旦考虑了移动野生动物园的铬,920x就是视口的高度)。
<!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>
这里有一篇很棒的博客文章:
http://www.kylejlarson.com/blog/2011/fixed-elements-and-scrolling-divs-in-ios-5/
随着这里的演示:
http://www.kylejlarson.com/files/iosdemo/
总之,您可以在包含主要内容的div上使用以下内容:
.scrollable {
position: absolute;
top: 50px;
left: 0;
right: 0;
bottom: 0;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
我认为你所描述的问题是当你尝试在已经位于顶部的div中向上滚动时 - 它然后向上滚动页面而不是向上滚动并在页面顶部产生反弹效果。我想你的问题是如何摆脱这个?
为了解决这个问题,作者建议您使用ScrollFix自动增加可滚动div的高度。
还值得注意的是,您可以使用以下内容来阻止用户向上滚动,例如在导航元素中:
document.addEventListener('touchmove', function(event) {
if(event.target.parentNode.className.indexOf('noBounce') != -1
|| event.target.className.indexOf('noBounce') != -1 ) {
event.preventDefault(); }
}, false);
不幸的是,ScrollFix仍然存在一些问题(例如,在使用表单字段时),但ScrollFix上的问题列表是寻找备选方案的好地方。 this issue讨论了一些替代方法。
博客文章中也提到的其他替代方案是Scrollability和iScroll
你可以试试
$('*').not('#div').bind('touchmove', false);
如有必要,添加它
$('#div').bind('touchmove');
请注意,除#div外,一切都已修复
body {
position: fixed;
height: 100%;
}
这个答案似乎已经过时了,不适应现在的单页应用程序。在我的情况下,我发现解决方案感谢this aricle,其中提出了一个简单但有效的解决方案:
html,
body {
position: fixed;
overflow: hidden;
}
如果您的身体是您的滚动容器,则此解决方案不适用。