在HTML开发页面项目中，我们经常会遇到滚动列表——当实际需要显示的内容的长度或高度超过容器的长度或高度时，设置CSS
overflow-x:auto;
overfow-y:auto;当滚动列表中的内容比较小时，我们可以将所有内容一次性加载到列表容器中进行显示。
当滚动列表内容较多时，使用分页加载逐步加载数据，2种形式
1、通过在列表末尾添加标签元素指示器，并添加列表的滚动波浪来监听指示器元素是否可见，如果可见，则提交请求加载下一页数据并追加到列表内容的末尾。 通过这种方法，可以实现无限制的数据加载，而且数据依然取到。
2、列表上方添加分页工具栏。 用户通过请求获取指定页面的数据，并替换为当前列表中的内容。
对于模式 1，我们希望用户友好。 加载的数据不会重复加载，请求的资源小。 当量较大时html列表横向显示，页面上的DOM元素数量会不断减少html列表横向显示，消耗的显存也会增加。
模式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;
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 documentFragment=document.createDocumentFragment();
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(&
