使用iscroll 底部被遮住(异步加载DOM造成的高度问题造成iScroll不能滚动)怎么解决

$(document).ready(function () {

App.Current = {

Page: {

PageAt: 1,

PageCount: 3,

reset: function () {

this.PageAt = 1;

}

}

};

function initScroller() {

var pullDown = document.querySelector("#PullDown"),

pullUp = document.querySelector("#PullUp"),

isPulled = false; // 拉动标记

var myScroll = new IScroll('#wrapper', {

probeType: 3,

mouseWheel: true,

scrollbars: true,

preventDefault: false,

fadeScrollbars: true

});

var direction = '';

myScroll.on('scroll',

function () {

var height = this.y,

bottomHeight = this.maxScrollY - height;

// 控制下拉显示

if (height >= 60) {

pullDown.style.display = "block";

isPulled = true;

return;

} else if (height < 60 && height >= 0) {

direction = 'up';

pullDown.style.display = "none";

return;

}

// 控制上拉显示

if (bottomHeight >= 60) {

pullUp.style.display = "block";

isPulled = true;

return;

} else if (bottomHeight < 60 && bottomHeight >= 0) {

direction = 'down';

pullUp.style.display = "none";

return;

}

});

myScroll.on('scrollEnd', function () { // 滚动结束

if (isPulled) { // 如果达到触发条件,则执行加载

isPulled = false;

if (direction === 'up') {

//下拉刷新

loadList( 0, direction);

}

else {

//加载更多

loadList((App.Current.Page.PageAt) * App.Current.Page.PageCount, direction);

}

myScroll.refresh();

}

});

window.myScroll = myScroll;

}

initScroller();

function loadList( skipCount, direction) {

$.ajax({

type: "Post",

url: App.ApiAddress.GetComments,

data: JSON.stringify({

skipCount: skipCount,

maxResultCount: App.Current.Page.PageCount,

userId:null,

activityId:null,

venueId:null

}),

contentType: "application/json; charset=utf-8",

dataType: "json",

success: function (response) {

if (response.success && response.result) {

var items = response.result.items;

if (items && items.length > 0) {

var html = '';

var template = $('#listItem').html();

for (var i = 0; i < items.length; i++) {

var images=(function(){

var html='';

if(items[i].images&&items[i].images.length>0){

for(var j=0;j

html+='

';

}

}

return html;

})();

html += template

.replace(/{{creationTime}}/g, moment(items[i].creationTime).format('YYYY-MM-DD HH:mm'))

.replace(/{{content}}/g, items[i].content)

.replace(/{{activity.coverUrl}}/g, items[i].activityArticle.coverUrl)

.replace(/{{activity.name}}/g, items[i].activityArticle.name)

.replace(/{{activity.place}}/g, items[i].activityArticle.place)

.replace(/{{images}}/g, images)

}

if (direction === 'up') {

$('#index_list').empty().append(html).fadeIn(500);

App.Current.Page.reset();

}

else {

$('#index_list').append(html);

App.Current.Page.PageAt++;

}

$('#index_list').fadeIn(500);

lazyLoadImage();

window.myScroll.refresh();

}

else {

if (direction === 'up')

$('#index_list').fadeOut(500).empty();

}

}

else {

if (direction === 'up')

$('#index_list').fadeOut(500).empty();

}

},

error: function (msg) {

}

});

}

loadList(0,'up');

function lazyLoadImage() {

Echo.init({

offset: 0,

throttle: 50 //延迟时间

});

}

lazyLoadImage();

});

相关阅读:

sublime的光标变成这样的了咋办?

关于python中的Queue与daemon进程?

移动端使用webp格式图片效果怎么样?

SQL like语句问题和PATINDEX

java关于文件目录操作

smarty字符串取整怎么没有效果{$card.ori|string_format:"%d"}

jsPlumb 每次在连接端点的时候,排成一个串联的顺序格式。

spring+quatz 配置 design.xml 里面的 messageKey 的作用是什么

一个微信开发URL转跳的问题

如何解决vuejs不能把后面增加、改动的元素渲染出来

gulp-htmlone运行后生成的html文件运行报错

为什么 npm intall 安装的包无法运行

JDK6中String的subString方法内存泄露及溢出问题

关于并发的一个问题

boostrap下拉插件的li元素会换行

请问我这样用jq写的轮播图 淡入淡出的切换效果为什么没用啊 而且自动轮播也有问题

phpstorm怎么修改FTP文件

关于js简单模块加载器的问题

怎么控制网页中iframe里的js执行问题?

antd npm start 后访问报错

Logo

Agent 垂直技术社区,欢迎活跃、内容共建。

更多推荐