我有一个奇怪的问题，很难解释。不过我还是要试试。正在发生的事情是，我有一个无限滚动逻辑，当用户滚动到页面底部时，我加载更多的内容，如果DOM元素的数量增加超过一定的限制，我从顶部删除一个相等的DOM元素块，以保持页面中DOM元素的数量不变，并保持内存检查。现在，当我在底部添加新元素并从顶部删除旧元素时，我必须显式地设置可滚动元素(父容器)的scrollTop位置，以保持用户的滚动位置。我使用Jquery的scrollTop()方法调用来设置当前的滚动位置。只要我调用scrollTop()来更新滚动位置，页面就会闪烁，我可以在iOS设备上看到一个短暂的白色补丁。即使使用原生javascript scrollTop属性也会发生这种情况。这个问题只在iOS webkit浏览器上看到(设备上的webviews和浏览器以及模拟器)，我在Android webviews上没有看到同样的问题。即使在包括Safari在内的桌面浏览器上，它也运行得很好。
我写的代码是一个双向无限滚动，但对于这个问题，我只发布向下滚动的代码。
下面是代码片段-<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no" />
<style type="text/css">
html, body {
margin: 0;
padding: 0;
height: 100%;
background: #fff;
}
#holder {
overflow-x: hidden;
overflow-y: scroll;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
ul {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
padding: 20px;
border-bottom: 1px solid #9a9a9a;
background: #e5e5e4;
}
.androidFix {
overflow: hidden !important;
overflow-y: hidden !important;
overflow-x: hidden !important;
}
</style>
</head>
<body>
<div id="holder">
<div id="container">
</div>
</div>
<!-- Script goes here -->
<script type="text/javascript" src="jquery-2.0.3.js"></script>
<script type="text/javascript" src="handlebars.js"></script>
<!-- Sample data -->
<script type="text/javascript">
var data = [{slno: '1', amount: '250', name: 'DAG Account', date: '16/07/2014'},
{slno: '2', amount: '250', name: 'DAG Account', date: '16/07/2014'},
{slno: '3', amount: '250', name: 'DAG Account', date: '16/07/2014'},
{slno: '4', amount: '250', name: 'DAG Account', date: '16/07/2014'},
{slno: '5', amount: '250', name: 'DAG Account', date: '16/07/2014'},
{slno: '6', amount: '250', name: 'DAG Account', date: '16/07/2014'},
{slno: '7', amount: '250', name: 'DAG Account', date: '16/07/2014'},
{slno: '8', amount: '250', name: 'DAG Account', date: '16/07/2014'},
{slno: '9', amount: '250', name: 'DAG Account', date: '16/07/2014'},
{slno: '10', amount: '250', name: 'DAG Account', date: '16/07/2014'}];
</script>
<!-- Handlebars template -->
<script id="template" type="text/x-handlebars-template">
{{#each data}}
<li>
<div>
<span><b>sl no {{slno}}</b></span>
<span>{{amount}}</span>
</div>
<div>
<span>{{name}}</span>
<span>{{date}}</span>
</div>
</li>
{{/each}}
</script>
<!-- App logic -->
<script type="text/javascript">
var source = $("#template").html();
var template = Handlebars.compile(source);
var html = template({data: data});
//console.log(html);
var holderRef = $("#holder");
var holderHeight = $("#holder").height();
var newChunk = $("<ul class='list-chunk' />");
newChunk.append(html);
var containerRef = $("#container");
containerRef.append(newChunk); //initial data load
var chunkHeight = $(".list-chunk").height();
$("#holder").scroll(function() {
//test for bottom
var scrollTopVal = this.scrollTop;
var containerHeight = containerRef.height();
//console.log('test', scrollTopVal);
if(scrollTopVal + holderHeight >= containerHeight) {
console.log('bottom');
var newChunk = $("<ul class='list-chunk' />");
newChunk.append(html);
containerRef.append(newChunk);
//if($("#container").children().size() > 2) {
if(containerRef.children().size() > 2) {
var viewTop = $("#holder").scrollTop();
var oldChunk = containerRef.children().first();
var oldChunkHeight = oldChunk.height();
console.log(chunkHeight);
oldChunk.remove();
setScrollTop(viewTop - chunkHeight);
}
}
function setScrollTop(amount) {
$("#holder").addClass("androidFix").scrollTop(amount).removeClass("androidFix"); //******* - the problem lies here
}
});
</script>
</body>
</html>
一些建议/猜测，按照我尝试的顺序:
你的androidFix类也被应用在其他系统上。而不是应用一个类，直接改变元素的样式props (element.style. properties)。overflowX = "hidden"等)只在需要它的系统上。也许可以做浏览器嗅探。您也可以在同一个调用中直接应用scrollTop，这将节省您必须在滚动设置周围切换类的打开和关闭，并节省多次昂贵的DOM操作。
滚动事件触发很多，DOM操作非常慢，尤其是改变DOM树。您可以设置一个标志(changingDOM = true)，然后直接从后续调用滚动处理程序返回，直到您完成并将其设置回false。
仔细想想，这是androidfix的原因吗?设置scrollTop递归调用滚动处理程序，除非溢出=hidden?在这种情况下，我会首先尝试后一种改变。