Javascript 显式设置scrollTop时，iOS webkit浏览器上的无限滚动闪烁
我有一个奇怪的问题，很难解释。但我还是会继续尝试。现在的情况是，我有一个无限滚动逻辑，当用户滚动到页面底部时，我会加载更多的内容，如果DOM元素的数量增加超过某个限制，我会从顶部删除一个相等的DOM元素块，以保持页面中DOM元素的数量不变，并检查内存。现在，当我在底部添加新元素并从顶部删除旧元素时，我必须显式地设置可滚动元素（父容器）的scrollTop位置，以保持用户的滚动位置。我正在使用Jquery的scrollTop（）方法调用来设置当前的滚动位置。只要我通过调用scrollTop（）更新滚动位置，页面就会闪烁，我可以在iOS设备上看到一个白色补丁。即使使用本机JavaScript scrollTop属性也会发生这种情况。这个问题只出现在iOS webkit浏览器上（包括WebView和设备上的浏览器以及模拟器），而我在Android WebView上没有看到同样的问题。即使在桌面浏览器上，它也可以正常运行，包括Safari 我写的代码是双向无限滚动的，但对于这个问题，我只发布向下滚动的代码 以下是代码片段-Javascript 显式设置scrollTop时，iOS webkit浏览器上的无限滚动闪烁,javascript,jquery,ios,scrolltop,Javascript,Jquery,Ios,Scrolltop,我有一个奇怪的问题，很难解释。但我还是会继续尝试。现在的情况是，我有一个无限滚动逻辑，当用户滚动到页面底部时，我会加载更多的内容，如果DOM元素的数量增加超过某个限制，我会从顶部删除一个相等的DOM元素块，以保持页面中DOM元素的数量不变，并检查内存。现在，当我在底部添加新元素并从顶部删除旧元素时，我必须显式地设置可滚动元素（父容器）的scrollTop位置，以保持用户的滚动位置。我正在使用Jquery的scrollTop（）方法调用来设置当前的滚动位置。只要我通过调用scrollTop（）更新
<!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>
html，正文{
保证金：0；
填充：0；
身高：100%；
背景：#fff；
}
#持有者{
溢出x：隐藏；
溢出y：滚动；
位置：绝对位置；
排名：0；
左：0；
底部：0；
右：0；
}
保险商实验室{
保证金：0；
填充：0；
}
ulli{
列表样式：无；
填充：20px；
边框底部：1px实心#9a；
背景：#e5；
}
androidFix先生{
溢出：隐藏！重要；
溢出y：隐藏！重要；
溢出-x：隐藏！重要；
}
风险值数据=[{slno:'1'，金额：'250'，名称：'DAG账户'，日期：'16/07/2014'}，
{slno:'2'，金额：'250'，名称：'DAG账户'，日期：'16/07/2014'}，
{slno:'3'，金额：'250'，名称：'DAG账户'，日期：'16/07/2014'}，
{slno:'4'，金额：'250'，名称：'DAG账户'，日期：'16/07/2014'}，
{slno:'5'，金额：'250'，名称：'DAG账户'，日期：'16/07/2014'}，
{slno:'6'，金额：'250'，名称：'DAG账户'，日期：'16/07/2014'}，
{slno:'7'，金额：'250'，名称：'DAG账户'，日期：'16/07/2014'}，
{slno:'8'，金额：'250'，名称：'DAG账户'，日期：'16/07/2014'}，
{slno:'9'，金额：'250'，名称：'DAG账户'，日期：'16/07/2014'}，
{slno:'10'，金额：'250'，名称：'DAG账户'，日期：'16/07/2014'}]；
{{{#每个数据}
sl no{{slno}
{{amount}}
{{name}}
{{date}}
{{/每个}}
var source=$（“#模板”）.html（）；
var template=handlebar.compile（源代码）；
var html=模板（{data:data}）；
//log（html）；
var holderRef=$（“持有人”）；
var holderHeight=$（“#holder”）.height（）；
var newChunk=$（“
”）；
append（html）；
var containerRef=$（“#container”）；
containerRef.append（newChunk）//初始数据加载
var chunkHeight=$（“.list chunk”）.height（）；
$（“#持有者”）。滚动（函数（）{
//底部测试
var scrollTopVal=this.scrollTop；
var containerHeight=containerRef.height（）；
//console.log（'test'，scrollTopVal）；
如果（scrollTopVal+保持器高度>=容器高度）{
console.log（'bottom'）；
var newChunk=$（“
”）；
append（html）；
containerRef.append（newChunk）；
//if（$（“#容器”）.children（）.size（）>2）{
如果（containerRef.children（）.size（）>2）{
var viewTop=$（“#holder”）.scrollTop（）；
var oldChunk=containerRef.children（）.first（）；
var oldChunkHeight=oldChunk.height（）；
控制台日志（高度）；
oldcunk.remove（）；
setScrollTop（视图顶部-块高度）；
}
}
功能设置Crolltop（金额）{
$（“#holder”）.addClass（“androidFix”）.scrollTop（amount）.removeClass（“androidFix”）；//******-问题就在这里
}
});