我有一个奇怪的问题，很难解释。我仍然会继续尝试。发生的事情是我有一个无限滚动逻辑，当用户滚动到页面底部时我会加载更多内容，如果 DOM 元素的数量增加超过一定限制，我会从顶部删除等量的 DOM 元素 block ，保持页面中 DOM 元素的数量不变并控制内存。现在，当我在底部添加新元素并从顶部删除旧元素时，我必须明确设置可滚动元素(父容器)的 scrollTop 位置，以保持用户的滚动位置。我现在正在使用 Jquery 的 scrollTop() 方法调用来设置滚动位置。一旦我通过调用 scrollTop() 更新滚动位置，页面就会闪烁，我可以在 iOS 设备上短暂地看到一个白色补丁。即使使用 native Javacript scrollTop 属性也会发生这种情况。该问题仅在 iOS webkit 浏览器(设备上的 webview 和浏览器以及模拟器)上出现，我在 Android webview 上没有看到同样的问题。即使在桌面浏览器上，它也能正常运行，包括 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 类也在其他系统上应用。不要应用类，而是仅在需要它的系统上直接更改元素样式 Prop (element.style.overflowX =“hidden”等)。也许可以进行浏览器嗅探。您也可以在同一个调用中直接应用您的 scrollTop，这样您就不必在滚动设置周围打开然后关闭类，并节省多个昂贵的 DOM 操作。
滚动事件触发很多，DOM 操作非常慢，尤其是改变 DOM 树。您可以设置一个标志 (changingDOM = true)，然后直接从对滚动处理程序的后续调用返回，直到您完成并将其设置回 false。
想一想，这就是androidfix的原因吗？设置 scrollTop 递归调用滚动处理程序，除非你 overflow=hidden?在那种情况下，我会首先尝试后者的改变。
关于javascript - 明确设置 scrollTop 时 iOS webkit 浏览器上的无限滚动闪烁，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24864034/