似乎如果你有一个带水平滚动的 div，在一个定位固定的 div 内，它会阻止 IOS 上的垂直滚动。 I.E - 如果我通过将手指放在水平滚动的 div 上开始滚动，然后尝试垂直滚动，什么也没有发生。
在我同事的 Andriod 设备上似乎没问题。
我已经创建了一个测试用例，在这里演示了这个问题:
这是html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
some content underneath
<div class="pop-up">
<p>I'm some other content</p>
<div class="scrollable">
<div class="item">hi</div>
<div class="item">hi</div>
<div class="item">hi</div>
<div class="item">hi</div>
<div class="item">hi</div>
<div class="item">hi</div>
<div class="item">hi</div>
<div class="item">hi</div>
<div class="item">hi</div>
<div class="item">hi</div>
<div class="item">hi</div>
</div>
<div class="somemoretext">
hello there, I am some text to make things scrollable
</div>
</div>
</body>
</html>
这是CSS
p {
font-size:22px;
}
.item {
display:inline-block;
width:80px;
height:60px;
font-size:78px;
}
.scrollable {
width:350px;
white-space: nowrap;
overflow-x:scroll;
overflow-y:hidden;
}
.pop-up {
position:fixed;
height:300px;
background:red;
border: 1px solid #000;
width:100%;
top:0;
overflow-y:scroll;
z-index:9999;
}
.somemoretext {
padding-top:600px;
}
感谢您的帮助。
最佳答案
下面的 css 解决了你的问题
html,body{height:100%}
body{background:red}
p {
font-size:22px;
}
.item {
display:inline-block;
width:80px;
height:60px;
font-size:78px;
}
.scrollable {
width:350px;
white-space: nowrap;
overflow-x:scroll;
overflow-y:hidde;
position: relative;
-webkit-transform: translateZ(0);
}
.pop-up {
position:fixed;
height:300px;
background:blue;
border: 1px solid #000;
width:100%;
top:0;
overflow-y:scroll;
z-index:9999;
-webkit-overflow-scrolling: touch;
}
.somemoretext {
padding-top:600px;
}
包含 -webkit- 的行是在 Safari 中实现滚动的关键。
在 .pop-up DIV 中，您需要 overflow-y: scroll 和 –webkit-overflow-scrolling: touch 来强制滚动。在 .scrollable 你需要 –webkit-transform: tranzlateZ(0);上下移动实际的 html 内容，否则 DIV 将滚动但不会显示溢出的内容。
关于html - '溢出-x : scroll' inside a fixed div prevents vertical scrolling on ios，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41681251/