手机溢出：滚动和溢出滚动：触摸//防止视“反弹”(Mobile overflow:scroll an

在移动（Safari浏览器，网页视图，地方）， overflow:scroll和overflow-scrolling: touch给予相当平滑滚动，至极凉爽。

但是，它使页面的“反弹”（区域盘旋下文），当你不使用它这是不是这样的，但是这使得经验少一点“原生”（更简单地说，只要我能有一个关于它的意见，绝对是无用的）

有没有一种方法，以防止这样的情况发生？非常感谢您的帮助/提示/回复

Answer 1:

我设法找到一个解决办法CSS防止视口的弹跳。的关键是包裹在内容3周的div -webkit-触摸溢出：滚动施加到它们。最后DIV应该有101％一个最小高度。此外，你应该明确地设定在代表你的设备的尺寸body标签固定宽度/高度。我已经添加了对身体有红色背景，以证明它是目前弹跳内容，而不是移动Safari视窗。

下面这里的源代码是plunker（这已经在iOS7 GM测试过）。 http://embed.plnkr.co/NCOFoY/preview

如果您打算运行，这个是iPhone 5的全屏应用程序，修改高度1136px（当苹果移动web应用程序状态栏样式设置为“黑色半透明”或1096px设置为“时黑色'）。 920x是视一旦移动Safari浏览器的Chrome浏览器已考虑）的高度。

<!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>

Answer 2:

有一个关于这个在这里一个伟大的博客文章：

http://www.kylejlarson.com/blog/2011/fixed-elements-and-scrolling-divs-in-ios-5/

随着这里演示：

http://www.kylejlarson.com/files/iosdemo/

总之，您可以使用包含你的主要内容股利如下：

.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的问题清单是寻找替代品的好地方。一些替代方法在讨论这个问题。

其他的替代品，在博客文章中还提到，有滚动性和iScroll

Answer 3:

你可以尝试

$('*').not('#div').bind('touchmove', false);

如有必要，添加此

$('#div').bind('touchmove');

注意，一切都是固定的，除了#div

Answer 4:

body {
  position: fixed;
  height: 100%;
}

Answer 5:

这个答案似乎很不合时宜，不能适应现今用于单页的应用程序。在我的情况下，我找到了解决方案，以感谢这aricle这里提出了一个简单而有效的解决方法是：

 html, body { position: fixed; overflow: hidden; }

该解决方案，如果你的身体是你的滚动容器，它不适用。

文章来源: Mobile overflow:scroll and overflow-scrolling: touch // prevent viewport “bounce”