32

在移动设备上（Safari、webviews、任何地方）， overflow:scroll并overflow-scrolling: touch提供非常流畅的滚动，这很酷。

但是，它使页面“反弹”（下面圈出的区域），当您不使用它时情况并非如此，但这会使体验变得不那么“原生”（更简单地说，据我所知关于它的意见，绝对没有用）

有没有办法防止它发生？

那种suxx

4

5 回答 5

22

这里有一篇很棒的博客文章：

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 内向上滚动时，它会向上滚动页面而不是向上滚动 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 上的问题列表是寻找替代方案的好地方。本期讨论了一些替代方法。

博文中也提到了其他替代方案，即Scrollability和iScroll

于 2013-09-20T15:36:16.313 回答
11

我已经设法找到一种 CSS 解决方法来防止视口反弹。关键是将内容包装在 3 个 div 中，并对其应用 -webkit-touch-overflow:scroll。最终 div 的最小高度应为 101%。此外，您应该在代表设备尺寸的 body 标签上明确设置固定宽度/高度。我在 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 是考虑到移动 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>
于 2013-09-16T12:07:43.357 回答
3

你可以试试

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

如有必要，添加

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

请注意，除了#div 之外的所有内容都是固定的

于 2014-10-24T23:46:23.563 回答
1

这个答案似乎已经过时了，不适合现在的单页应用程序。就我而言，由于这篇文章 提出了一个简单但有效的解决方案，我找到了解决方案：

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

如果您的身体是滚动容器，则此解决方案不适用。

于 2019-04-17T15:54:53.157 回答
0 
body {
  position: fixed;
  height: 100%;
}
于 2016-04-20T13:25:56.913 回答