Scroll -webkit溢出滚动：触摸；打破苹果'；s iOS8

我正在开发一个web应用程序，它使用

-webkit overflow scrolling:touch

在多个位置提供overflown divs惯性滚动

自从更新到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*/
} 

---

我对一个嵌套的可滚动div也有类似的问题，它在ios5、6和7中滚动良好，但在ios8.1中间歇性地无法滚动

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

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

通过这样做，'-webkit溢出滚动：touch；'仍然可以包括在内，并且仍然可以正常工作

这确实意味着牺牲（对我来说，值得怀疑）上述黑客在早期版本的iOS中提供的滚动性能，但在这和惯性滚动之间的选择中，惯性滚动被认为更重要（并且我们不再支持iOS 5）

在现阶段，我不能说为什么会存在这种冲突；这可能是因为这些特性的实现不好，但我怀疑CSS中有更深层次的原因。我目前正在尝试创建一个精简的HTML/CSS/JS配置来演示它，但是可能需要大量的标记结构和动态数据才能实现

---

附录：但是，我必须向我们的客户指出，即使使用此修复程序，用户开始尝试在不可滚动的元素上滚动，她也必须在停止后等待一秒钟才能滚动可滚动的元素。这是天生的行为。

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

我的div有惯性，没有任何问题

我有一个简单的JSFIDLE，您可以在其中查看

---

希望有帮助。

我在Cordova web应用程序中遇到了同样的问题。对我来说，问题是我有一个父级

是动画的，并且具有属性

动画填充模式：forwards

删除此属性解决了问题并修复了损坏的溢出滚动。
我遇到了此问题并找到了解决方案。解决方案是，您必须将内容放入两个容器中，例如：（.dashboardScroll>.dashboardScroll-inner），并将内部容器“.dashboardScroll-inner”的高度比父级高1倍。“dashboardScroll”通过此css3属性

.dashboardScroll-inner { height: calc(100% + 1px);}

看看这个：


或者，如果无法添加其他容器，请使用以下命令：

.dashboardScroll:after { height: calc(100% + 1px);}

我无法用以前的答案解决这个问题。因此，几个小时后，a尝试了iScroll库。我知道，只为iOS添加一个额外的库（而且相当大）来添加滚动并不好，但这对我来说是有效的。只要遵循自述文件，lite版本就足够了

缺点：


在Android上滚动现在看起来像垃圾，不再是原生的
无法再通过滚动刷新页面
您需要为Android应用另一个修复程序：

我不确定我是否会使用它，但如果您需要，请试一试。
我使用了mohammed Suleiman回答中的最后一种方法（.dashboardScroll:after{height:calc（100%+1px）；}），但结果是我的内容下方有一个100%+1px的空白。我通过在500毫秒后将高度改回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>);
}

render（）{
var样式=“”；
if（window.navigator.standalone&&/*测试iOS*/）{
style=“#content:：在{height:calc（100%+1px）}之后”；
}
返回(
{style}
);
}
我在使用角度引导模式时遇到了这个问题。我通过创建自己的样式表并删除媒体查询中的固定宽度和边距来修复它

原件：

  .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%;
    }  
}

我在这里尝试了各种解决方案，但都没有成功。我可以通过属性-webkit overflow滚动：touch在可滚动div和父容器上

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

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

防止周围元素在DOM中冒泡的触摸事件是另一个潜在的解决方案，您可能会注意到，当周围的DIV元素接收到触摸或拖动事件时，滚动停止。我们的菜单中有一个特殊的问题，需要平滑滚动。关闭这些事件有助于停止可滚动元素的“粘滞”

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

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

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

我通过使用jquery向可滚动div添加一些内联css解决了这个问题。。加载dom后，将css添加到div中可以进行滚动

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

iOS5（iPad1的最终更新）中也存在同样的错误。另外，我在Android AOSP上有一些非常奇怪的触摸滚动错误，这些错误通过使用position:relative；和溢出：隐藏；在内容上（或可滚动的div？！）。错误是以2倍手指移动的速度滚动，而不是滚动、标题抖动和滚动跟踪器阻塞。这肯定与iOS5错误不同，因为如果你看我的代码，我已经修复了它。我认为这与iOS8现在识别滚动事件有关，这对于使用视差的网站来说是非常棒的，但会破坏溢出的滚动。同样的CSS对我也适用。这是在iOS 8 iPad上吗？我的临时解决方案是删除所有这些，但现在我只剩下标准的粘性滚动。现在就可以了，但它确实破坏了应用程序的用户体验，所以我不会说这是修复方法，而更多的是临时措施。@Jamie我可以使用-webkit overflow scrolling:touch；拆下其他部件后
$('.lightbox__scrollable-content').css('overflow-y', 'scroll');