javajs滑动列表_JS+HTML实现列表动态⽆限滚动
JS+HTML实现列表动态⽆限滚动
问题
在HTML开发页⾯⼯程中，经常会遇到滚动列表-当实际需要显⽰的内容宽度或⾼度超过容器的宽度或⾼度时，设置CSS
overflow-x:auto;
overfow-y:auto;
当滚动列表中的内容⽐较少时，我们可以⼀次性加载所有的内容到列表容器中显⽰。
当滚动列表中的内容⽐较多，使⽤分页加载的⽅式逐步加载数据,2种⽅式
1.通过在列表的末尾添加⼀个标别元素indicator，和添加列表的scroll事件来监听indicator元素是否可见，如果可见那么提交请求加载下⼀页数据，append到列表内容的尾部。通过这个⽅式可以实现数据的⽆限加载，⼀直到数据取完。
2.在列表下部添加分页⼯具条，⽤户通过请求获取指定页的数据并且替换到当前列表⾥的内容
对于⽅式1对⽤户想对友好，加载过的数据不会重复加载，请求的资源少，但是当量多时，页⾯上的DOM元素量很不断增加，消耗的内存也会加⼤
⽅式2⽤户每翻⼀页都要重新请求数据，即使对于翻过看过的数据想要重新看也是如此，请求资源多，好处是页⾯DOM元素数量固定，占⽤内存资源少
那么有没有⼀种⽅式结合⽅式1和⽅式2的优点，摒弃缺点，融合优化下呢？
～～有！有⽅法～～
解决⽅案：
对当前列表的宽⾼固定，对列表包含的内容⾼度固定，列表滚动满⾜条件时动态删除或添加元素，保持元素数量的固定已经内容在列表可视区域的正确显⽰。
列表能够⽆限滚动，数据能够⽆限加载，DOM元素保持⼀定数量
先放出实现的代码吧
Title
.infinity-scroll{
width: 300px;
height: 500px;
position: absolute;
left:10px;
top:10px;
background-color: #ffffff;
box-sizing: border-box;
border:1px solid green;
overflow-x: hidden;
overflow-y: auto;
}
.main-content{
position: absolute;
left: 0px;
html滚动效果代码top: 0px;
width: 100%;
box-sizing: border-box;
background-color: #cccccc;
border: 1px solid #ffffff;
}
.
item{
width: 100%;
height: 50px;
background-color: #ffffff;
}
.item:nth-child(2n+1){
background-color: green;
}
.scroll-wrapper{
width: 100%;
background-color: red;
height: 2000px;
}
.hide{
display: none;
}
$(function(){
var infinity_scroll_height;
var infinity_scroll_top;
var isLoading=false;
var lastMaxItemIndex=parseInt($(".item.last-item").last().attr("data-items-index"),10); function appendNewItems(prev_main_content_height,scroll_top){ requestAnimationFrame(function(){
var ateDocumentFragment();
var i,item;
var lastIndex=parseInt($(".item.last-item").attr("data-items-index"),10);
$(".item.last-item").removeClass("last-item");
for(i=0;i<10;i++){
lastIndex++;
item=$('
2
');
$(item).attr("data-items-index",(lastIndex));
$(item).html(lastIndex+1);
if(i===9){
$(item).addClass("last-item");
}
documentFragment.appendChild($(item)[0]);
}
//更新此字段，作为是否 需要更新main-content的 height 的标志
//lastMaxItemIndex=Math.max(lastMaxItemIndex,lastIndex);
//同时removefirst-item后⾯的10个元素
$(".item").slice(0,10).remove();
$(".item").first().addClass("first-item");
var mainContentPaddingTop=$(".main-content").css("padding-top"); mainContentPaddingTop=parseFloat(mainContentPaddingTop.split("px")[0]||0); $(".main-content").append(documentFragment);
if(lastMaxItemIndex
$(".main-content").css({
"height":prev_main_content_height+10*50,
"padding-top":mainContentPaddingTop+10*50
});
lastMaxItemIndex=lastIndex;
}else{
$(".main-content").css({
"padding-top":mainContentPaddingTop+10*50
});
}
$('.infinity-scroll').off("scroll",infinity_scrollFun);
$('.infinity-scroll').scrollTop(scroll_top);
$('.infinity-scroll').on("scroll",infinity_scrollFun);
isLoading=false;
});
}
function restorePreItems(prev_main_content_height,scroll_top){ requestAnimationFrame(function(){
//删除底部的10个元素
var ateDocumentFragment();
var i,item,mainContentPaddingTop;
var lastIndex=parseInt($(".item.first-item").attr("data-items-index"),10); console.log(".item.first-item lastIndex%s",lastIndex);
if(lastIndex<=0){
isLoading=false;
return ;
}
$(".item.first-item").removeClass("first-item");
for(i=0;i<10;i++){
// lastIndex--;
item=$('
$(item).attr("data-items-index",(lastIndex-10+i));
$(item).html(lastIndex-10+i+1);
if(i===0){
$(item).addClass("first-item");
}
documentFragment.appendChild($(item)[0]);
}
//删除尾部的10个元素
$(".item.last-item").prevAll().slice(0,9).remove();
$(".item.last-item").remove();
$(".item").last().addClass("last-item");
mainContentPaddingTop=$(".main-content").css("padding-top"); mainContentPaddingTop=parseFloat(mainContentPaddingTop.split("px")[0]||0); $(".main-content").css({
"padding-top":mainContentPaddingTop-10*50
});
$(".main-content").prepend(documentFragment);
$('.infinity-scroll').off("scroll",infinity_scrollFun);
$('.infinity-scroll').scrollTop(scroll_top);
$('.infinity-scroll').on("scroll",infinity_scrollFun);
isLoading=false;
//头部添加新的10个元素
});
}
function infinity_scrollFun(){
var last_item_top,first_item_top;
if(!infinity_scroll_height){
infinity_scroll_height=$(".infinity-scroll")[0].getBoundingClientRect().height;
infinity_scroll_top=$(".infinity-scroll")[0].getBoundingClientRect().top;
}
if(isLoading){
return;
}else{
last_item_top=$(".item.last-item")[0].getBoundingClientRect().top;
last_item_top=last_item_top-infinity_scroll_top;
}
console.log("~~~last_item_top=%s, infinity_scroll_height%s~~~",last_item_top,infinity_scroll_height); if(last_item_top<=infinity_scroll_height){
isLoading=true;
appendNewItems($(".main-content")[0].getBoundingClientRect().height,$(this).scrollTop());
return;
}
first_item_top=$(".item.first-item")[0].getBoundingClientRect().top;
first_item_top=first_item_top-infinity_scroll_top;
console.log("~~first_item_top~~~%s",first_item_top);
if(first_item_top>=0){
restorePreItems($(".main-content")[0].getBoundingClientRect().height,$(this).scrollTop());
return;
}
console.log("~~~scrollTop~~~"+$(this).scrollTop());

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。