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

Posted 2021-05-04

我正在开发一个在几个地方使用-webkit-overflow-scrolling:touch的web应用程序，以给出溢出的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在iOS 5,6和7中滚动得很好，但是间歇性地无法在iOS 8.1中滚动。

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

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

通过这样做，'-webkit-overflow-scrolling：touch;'仍然可以包括在内，仍然可以正常运作。

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

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

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

另一答案

我有这个问题，并找到了解决方案。解决方案是，你必须将你的内容放入两个容器中，用于ex :(。dashboardScroll> .dashboardScroll-inner）并给内部容器“.dashboardScroll-inner”比父级“.dashboardScroll”高1px这个css3属性

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

看看这个：

http://patrickmuff.ch/blog/2014/10/01/how-we-fixed-the-webkit-overflow-scrolling-touch-bug-on-ios/

或者如果你不能添加另一个容器，请使用：

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

另一答案

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

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

另一答案

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

缺点：

• 在android上滚动现在看起来像垃圾，它不再是原生的。
• 无法通过滚动刷新页面
• 你需要为Android应用另一个修复：Clicks not working

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

另一答案

我在这里尝试了所有解决方我能够通过使用属性-webkit-overflow-scrolling来实现它的工作：触摸;在可滚动的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 );

另一答案

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

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

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

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

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

希望能帮助到你。

另一答案

我在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>);
}

另一答案

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

原版的：

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