我有一个简单的 HTML，其中标题是固定的，只有正文内容应该有 flex 滚动。现在问题来了，当您向上滚动并等到滚动条被隐藏并尝试再次滚动时，它会卡住滚动并且不会让您滚动几秒钟。或者无论如何都没有 position:fixed 我可以使 div 静态。它刚刚出现在移动 iOS 设备上。
请检查video
<html>
<head>
<title>Sohail</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<style type="text/css">
body {
height: 100%;
-webkit-overflow-scrolling: touch;
background-color: red;
}
div {
overflow-y: scroll;
height: 100%;
background-color: green;
}
</style>
</head>
<body>
<div style="position:fixed;width:100%">
<div style="height: 20%;background-color: yellow;">
Header
</div>
<div>
Sohail Hussain<br/><br/><br/><br/><br/><br/><br/><br/>
FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/>
FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/>
FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/>
FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/>
FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/>
FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
ABCDEFGHI
</div>
</div>
</body>
</html>最佳答案
Sohail，使用此代码。我相信它会解决问题:
* {
padding: 0;
margin: 0;
}
.scrollDivWrap {
z-index: 1;
width: 100%;
}
.scrollDiv {
overflow: auto;
background-color: green;
-webkit-overflow-scrolling: touch;
z-index: 1;
position: absolute;
padding: 0;
top: 50px;
width: 100%;
}
header {
height: 50px;
background-color: yellow;
position: fixed;
width: 100%;
z-index: 2;
top: 0;
left: 0;
text-align: center;
}<html>
<head>
<title>Sohail</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
</head>
<body>
<header>
Header
</header>
<div class="scrollDivWrap">
<div class="scrollDiv">
Sohail Hussain<br/><br/><br/><br/><br/><br/><br/><br/>
FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/>
FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/>
FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/>
FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/>
FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/>
FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
ABCDEFGHI
</div>
</div>
</body>
</html>关于html - 使用 webkit 溢出滚动在移动设备上固定卡住的位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37435718/