Question

我正在开发一个在多个地方使用-webkit-overflow-scrolling:touch的网络应用，以提供溢出的div惯性滚动。

自更新到IOS8后，-webkit-overflow-scrolling: touch停止了您无法滚动的任何内容，而我迄今为止唯一可以解决此问题的方法是删除标准粘性滚动的-webkit-overflow-scrolling: touch。请帮忙！

以下是在iOS5,6和7中使用的标准类之一的示例：

.dashboardScroll {
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch; /*MAKES OVERFLOWN OBJECTS HAVE INERTIA SCROLLING*/
    -webkit-transform: translateZ(0px); /*HELPS THE ABOVE WORK IN IOS5*/
}

Answer 1

我有一个类似的问题，一个（非常复杂的）嵌套的可滚动div在iOS 5,6和7中滚动得很好，但在iOS 8.1中间歇性地无法滚动。

我找到的解决方案是删除使用GPU欺骗浏览器的所有CSS：

-webkit-transform: translateZ(0px);
-webkit-transform: translate3d(0,0,0);
-webkit-perspective: 1000;

通过这样做，＆＃39; -webkit-overflow-scrolling：touch;＆＃39;仍然可以包括在内并且仍能正常运作。

这确实意味着牺牲了（对我来说，可疑的）上述黑客在早期版本的iOS中所提供的滚动性能，但是在惯性滚动之间的选择中，惯性滚动被认为更重要（我们不知道＃39; t不再支持iOS 5了。

我现阶段无法说出为什么存在这种冲突;它可能是这些功能的一个糟糕的实现，但我怀疑在CSS中有一些更深层次的东西导致它。我目前正在尝试创建一个简化的HTML / CSS / JS配置来演示它，但可能需要大量的标记结构和大量的动态数据才能实现。

附录但是，我确实必须向我们的客户指出，即使使用此修复程序，用户也开始尝试滚动不可滚动的元素，她将不得不等待一秒钟后在能够滚动可滚动元素之前停止。这是本机行为。

Answer 2

我在Cordova网络应用程序中遇到了同样的问题。对我来说，问题是我有一个动画的父<div>并拥有属性animation-fill-mode: forwards;

删除此属性解决了问题并修复了损坏的溢出滚动。

Answer 3

我无法用以前的答案解决问题。所以几个小时之后，我试了一下iScroll库iScroll。我知道包括一个额外的库（并且相当大）为iOS添加滚动并不是很好但是这对我有用。只需按照自述文件，精简版就足够了。

缺点：

在Android上滚动现在看起来像垃圾，它不再是原生的。
无法通过滚动刷新页面
您需要为Android应用其他修补程序：Clicks not working

我不确定我是否会使用它，但是如果你需要的话可以试一试。

Answer 4

我在这里尝试了所有解决方案而没有成功。我能够通过在父容器上的可滚动div AND上使用属性 -webkit-overflow-scrolling：touch; 来使其工作。

div.container {
    -webkit-overflow-scrolling: touch;
}

div.container > div.scrollable {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
}

Answer 5

防止来自周围元素的触摸事件冒泡DOM是另一种可能的解决方案，您可能会注意到当围绕DIV元素接收触摸或拖动事件时滚动停止。我们在需要顺畅滚动的菜单中遇到了这个特殊问题。关闭这些事件有助于阻止＆＃34;坚持＆＃34;可滚动元素的。

$html.bind('touchmove', scrollLock );

var scrollLock = function(e) {
        if( $body.hasClass('menu-open') ){
                e.stopPropagation();
                e.preventDefault();
        }
};

$html.unbind('touchmove', scrollLock );

Answer 6

我也遇到了一些问题，但情况略有不同。

我确实有惯性的div没有任何问题。

我有一个简单的JSFiddle，你可以看看。

https://jsfiddle.net/SergioM/57f2da87/17/

.scrollable {
    width:100%;
    height:200px;
    -webkit-overflow-scrolling:touch;
    overflow:scroll;
}

希望它有所帮助。

Answer 7

我在mohammed Suleiman的答案中使用了最后一种方法（.dashboardScroll：在{height：calc（100％+ 1px）;}之后）但结果是我在我的下面有一个100％+ 1px的空白空间内容。我通过在500ms后将高度改回1px来修复此问题。丑陋，但它确实有效。

这是一个react.js应用程序，所以我的代码是这样的：

componentDidUpdate() {
    if (window.navigator.standalone && /* test for iOS */) {
        var self = this;
        setTimeout(function(){
            self.refs.style.innerHTML = "#content::after { height: 1px}";
        }, 500);
    }
}

并渲染：

render() {
    var style = '';
    if (window.navigator.standalone && /* test for iOS */) {
        style = "#content::after { height: calc(100% + 1px)}";
    }
    return (<div>
                <style type="text/css" ref="style">
                    {style}
                </style>
                <div id="content"></div>
            </div>);
}

Answer 8

使用角度自举模式时遇到了这个问题。我通过创建自己的样式表并删除媒体查询中固定的宽度和边距来修复它。

ORIGINAL：

  .modal-dialog {
    position: relative;
    width: auto;
    margin: 10px;
  }

@media (min-width: 768px) {
  .modal-dialog {
      width: 600px;
      margin: 30px auto;
  }
    .modal-content {
        -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    }
    .modal-sm {
        width: 300px;
    }
}
@media (min-width: 992px) {
    .modal-lg {
        width: 900px;
    }
}

变化：

.modal-dialog {
    margin: 0px;
    margin-top: 30px;
    margin-left: 5%;
    margin-right: 5%;
}

@media (min-width: 768px) {
    .modal-dialog {
        width: auto;
        margin-left: 10%;
        margin-right: 10%;
    }
    .modal-content {
       -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
       box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    }
}

@media (min-width: 992px) {
    .modal-dialog {
        width: auto;
        margin-left: 15%;
        margin-right: 15%;
    }  
}

Answer 9

我通过使用jquery向可滚动div中添加一些内联CSS来解决了我的问题。在加载dom后，将css添加至div可以使滚动工作正常。

$('.lightbox__scrollable-content').css('overflow-y', 'scroll');

-webkit-overflow-scrolling：touch; Apple的iOS8中断了

9 个答案: