Question

问题：

在iOS上，使用z-index时会忽略可滚动区域的-webkit-overflow-scrolling。如果两个-webkit-overflow-scrolling的对象重叠，则较低的一个对象滚动而不是上面显示的对象。

如何重现：

创建两个相互重叠的元素（例如position: absolute），其中一个元素具有更高的z-index并添加

.selector
{
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

他们两个。这两个元素都应该有足够的内容可以滚动。

另外添加

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes"> 
<meta name="apple-mobile-web-app-status-bar-style" content="black">

到<head>。然后将页面添加到主屏幕并从那里启动它。

如果您尝试滚动上部元素，则会滚动下面的元素。

MCVE：

或者只需查看 this pen 。从您的iOS设备启动 full 版本，将其添加到主屏幕并从那里启动。

环境：

使用 iOS 9.1 和 iOS 9.3.2

在 iPhone 5 和 iPhone 6 上进行测试

观察：

只有从主屏幕（固定应用）或Xamarin Webview内部启动页面/应用程序时才会出现此问题（可能与UIWebView和WKWebView有关）
在页面加载后更改设备方向（纵向/横向）后问题得到解决，直到页面重新加载（可能重新触发布局固定它？）
通过JS将较低元素overflow-y更改为hidden可以解决问题，但切换overflow会导致重新绘制导致性能问题
从height: 100%; width: 100%删除html, body也可以解决问题，但是必须将这些问题设置为百分比值才能正常工作

需要一个正确的解决方案/解决方法来解决此问题，而不会造成任何麻烦的副作用。此外，还要解释为什么会发生这种情况。

Answer 1

基本上，您遇到的是create or replace view result_feed as SELECT f.*,i.TOT_AMOUNT - NVL(SUM(S_AMOUNT) OVER(PARTITION BY f.ID ORDER BY f.S_DATE),0) AS tot_rem FROM FEED f, INFORMATION i WHERE f.ID = i.id ORDER BY f.ID, f.S_DATE; -- used NVL to prevent side-effect of null values SELECT * from RESULT_FEED;的iOS错误。为了解决这个错误，根据this answer，只需将以下CSS样式添加到可滚动的-webkit-overflow-scrolling: touch;：

div

总而言之，如果将上述样式添加到CSS中-webkit-transform: translateZ(0px); -webkit-transform: translate3d(0,0,0); -webkit-perspective: 1000;类的样式中，它应该可以工作。在运行iOS 9的iPhone 5s上测试过。请注意，如果向下滚动到可滚动部分的顶部或顶部，它将开始滚动正文。

我相信这些额外风格的功能是诱骗iPhone使用GPU，但请记住，由于Safari的错误，它们只是必要的 - 这不是你的错，这些额外的风格不应该和真的需要包括在内。但是将它们放入你的CSS中它应该像梦一样工作！

Answer 2

假设你面对像他们这样的问题。请看一下这些帖子：

希望这有帮助！

Answer 3

一个非常简单的解决方法是在滚动时将类切换到正文并定位可滚动窗口。如果你正在滚动.scrollA然后将类scrollB切换到body并应用类似这个Javascript / css的东西，或者你可以用你的选择javascript来完成。

<强>的Javascript

$('#targetDivA').on('scroll touch', function(){
   $('body').toggleClass('scrollB);

   //or use this to navigate to it
   //$(this).siblings().toggleClass(\'scrollB\')
})

<强> CSS

body.scrollB .targetDivB {
    pointer-events: none;
    /*this eliminates the device from using any event until removed*/
}

希望这有助于你交配！

Answer 4

在需要时动态删除此属性。它不那么复杂，并且不会引起副作用。

iOS不使用-webkit-overflow-scrolling来尊重z-index

问题：

如何重现：

MCVE：

环境：

观察：

4 个答案: