我正在尝试使用这个修复方法在iOS 5上支持网页的原生滚动。我想要在页面滚动时更新元素的位置,但是scrollTop
返回的位置似乎与页面上元素的实际位置略有不同。
我创建了一个示例,试图保持一段文本与页面滚动时处于相同位置。如果您在iOS设备上尝试,您会发现文本实际上会抖动而不是保持在完全相同的位置。这很令人不快,因为使用touchmove
事件直接可以完全无抖动地完成此操作。但显然,使用内置滚动算法更可取。
是否有人知道解决方法?
示例:演示
<!DOCTYPE html>
<html>
<head>
<title>Scrolling test</title>
<meta charset="utf8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<style type="text/css" media="screen">
* {
margin: 0px;
padding: 0px;
-webkit-backface-visibility: hidden;
}
#outer, #wrapper {
position: absolute;
height: 100%;
width: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$.event.props.push("touches");
$(function() {
$("#wrapper").on("touchmove", function(e) {
$("#thing").css("-webkit-transform", "translateY(" + ($(this).scrollTop()) + "px)");
});
});
</script>
</head>
<body>
<div id="outer">
<div id="wrapper">
<div id="thing">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</div>
</body>
</html>