我遇到了一个问题，该问题专门影响iOS上的Safari。
我正在构建一个页面，该页面具有一个固定位置的标题，即视口的宽度。页面内容是一系列图像（数量可变），应向右滚动。用户滚动时，标题应保留在原位。
在iOS Safari上，固定标头比视口稍大，并且滚动的速度与内容的其余部分不同。
我将代码简化为以下内容，但仍然无法解决该问题-下列代码在我测试过的所有其他浏览器中均能正常工作。（我的目标是IE8 +）
我在这里托管了此问题的示例。
感谢您的任何建议和帮助。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<style>
html {
font-size: 10px;
height:100%;
white-space: nowrap;
}
body {
height:100%;
padding:0;
margin:0;
}
#dgs2 {
height:75%;
display:inline-block;
}
img{
height: 100%;
}
#pad{
height:6em;
padding-bottom:1px;
}
#header{
position:fixed;
width:100%;
height:6em;
border-bottom:1px solid;
}
.menuRight{
float:right;
}
</style>
</head>
<body>
<div id="header">
<div class="menuRight"><h2>Menu</h2></div>
<h1>Testing scroll on iPhone</h1>
</div>
<div id="pad"></div>
<div id="dgs2">
<img src='img/red.png'/><img src='img/blue.png'/><img src='img/red.png'/><img src='img/blue.png'/><img src='img/red.png'/><img src='img/blue.png'/><img src='img/red.png'/><img src='img/blue.png'/>
</div>
</body>
</html>
我知道这个问题目前已经存在一年了，但是这个问题在iOS中仍然存在，并且我遇到了同样的问题，固定元素在不断漂移，这真让我发疯。答案很简单：只需将div＃bgs2（或任何上面带有“ white-space：nowrap”的元素）包装在div.wrapper中（显然，该类并不重要），然后将溢出设置为auto：
.wrapper {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
我还添加了webkit-overflow-scrolling，它有助于避免重绘。
将来一定有人会发现这个奇怪的问题，因此希望对您有所帮助。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句