Javascript 动态替换大列表的内容

如果元素在视图中，我将尝试呈现该元素的子元素；如果不在视图中，我将删除该元素的内容，如下图所示，在滚动事件中，如下图所示

    list.addEventListener('scroll', function () {
        var elements = document.querySelectorAll('.aBox');
        var toBe = counter - 1 - elements.length;
        for (var i = 0; i < elements.length; i++) {
            var inView = visibleY(elements[i]),
                ele = elements[i].querySelector('.item');
            if (inView === false && ele) {
                console.log("Not in visible, keeping it none");
                var height = elements[i].clientHeight;
                elements[i].style.height = height + "px";
                elements[i].innerHTML = "";
            } else if(!ele){
                console.log('Placing the content');
                var minArray = arr[toBe + 1 + i],
                    str = "";
                for (var j = 0; j < minArray.length; j++) {
                    str += "<div class='item'>" + minArray[j] + "</div>";
                }
                elements[i].innerHTML = str;
            }
        }
    });

list.addEventListener（'scroll'，函数（）{
var elements=document.querySelectorAll（'.aBox'）；
var toBe=计数器-1-元素长度；
对于（var i=0；i

它似乎在工作，但如果我看一下DOM，它并没有像预期的那样工作。有人请帮我找到问题

更新

函数更新数据（回调）{
var elements=document.querySelectorAll（'.aBox'）；
elements=Array.prototype.slice.call（元素）；
var toBe=计数器-1-元素长度；
async.each（元素，函数）（元素，cb）{
var inView=$（元素），
ele=element.querySelector（'.item'）；
if（inView==false&&ele）{
log（“不可见，保持不可见”）；
变量高度=element.clientHeight；
element.style.height=高度+px；
element.innerHTML=“”；
}else if（！ele&&inView）{
console.log（“放置内容”）；
var minArray=arr[toBe+1+i]，
str=“”；
if（minArray的类型==“对象”）{
对于（var j=0；j

---

嗨，我已经解决了这个问题。在这里发布，这样对于想要在手机上工作的人来说，通过虚拟滚动显示非常大的列表会更有帮助

  var arr = new Array(10000);
    for (var i = 0; i < arr.length; i++) {
        arr[i] = "Hello Dudes..." + i;
    }

    Array.prototype.chunk = function (chunkSize) {
        var array = this;
        return [].concat.apply([],
        array.map(function (elem, i) {
            return i % chunkSize ? [] : [array.slice(i, i + chunkSize)];
        }));
    }

    arr = arr.chunk(50);

    var list = document.getElementById('longList');
    var button = document.getElementById('loadMore');

    var counter = arr.length,
        aBoxLen = 1;

    function appendBox() {
        var div = document.createElement('div'),
            str = "";
        div.className = "aBox";
        var minArray = arr[counter - aBoxLen];
        for (var i = 0; i < minArray.length; i++) {
            str += "<div class='item'>" + minArray[i] + "</div>";
        }
        div.innerHTML = str;
        div.setAttribute('index', counter - aBoxLen);
        var box = document.querySelector('.aBox');
        if (box) {
            list.insertBefore(div, box);
        } else {
            list.appendChild(div);
        }
        aBoxLen += 1;
    }

    appendBox();

    button.addEventListener('click', function () {
        appendBox();
    });

    $.fn.is_on_screen = function () {

        var win = $(window);

        var viewport = {
            top: win.scrollTop(),
            left: win.scrollLeft()
        };
        viewport.right = viewport.left + win.width();
        viewport.bottom = viewport.top + win.height();

        var bounds = this.offset();
        bounds.right = bounds.left + this.outerWidth();
        bounds.bottom = bounds.top + this.outerHeight();

        return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));

    };




    function updateData(callback) {
        var elements = document.querySelectorAll('.aBox');
        elements = Array.prototype.slice.call(elements);
        var toBe = counter - 1 - elements.length;
        async.each(elements, function (element, cb) {
            var inView = $(element).is_on_screen(),
                ele = element.querySelector('.item');
            if (inView == false && ele) {
                console.log("Not in visible, keeping it none");
                var height = element.clientHeight;
                element.style.height = height + "px";
                element.innerHTML = "";
            } else if (!ele && inView) {
                console.log('Placing the content');
                console.log(element.getAttribute('index'));
                var minArray = arr[element.getAttribute('index')],
                    str = "";
                for (var j = 0; j < minArray.length; j++) {
                    str += "<div class='item'>" + minArray[j] + "</div>";
                }
                element.innerHTML = str;

            }
            cb();
        }, function () {
            // callback()
        });
    }


    var delay = false;
    var timeout = null;

    list.addEventListener('touchmove', function () {
        clearTimeout(timeout);
        timeout = setTimeout(function () {
            updateData();
        }
        }, delay);
    });

var-arr=新阵列（10000）；
对于（变量i=0；ibounds.right | | viewport.bottombounds.bottom））；
};
函数updateData（回调）{
var elements=document.querySelectorAll（'.aBox'）；
elements=Array.prototype.slice.call（元素）；
var toBe=计数器-1-元素长度；
async.each（元素，函数）（元素，cb）{
var inView=$（元素），
ele=element.querySelector（'.item'）；
if（inView==false&&ele）{
log（“不可见，保持不可见”）；
变量高度=element.clientHeight；
element.style.height=高度+px；
element.innerHTML=“”；
}else if（！ele&&inView）{
console.log（“放置内容”）；
log（element.getAttribute（'index'））；
var minArray=arr[element.getAttribute（'index'），
str=“”；
对于（var j=0；j

没有一个解决方案是专门为手机设计的，所以我已经实现了这一点

我认为这方面还有很大的改进空间。如果有人想

  var arr = new Array(10000);
    for (var i = 0; i < arr.length; i++) {
        arr[i] = "Hello Dudes..." + i;
    }

    Array.prototype.chunk = function (chunkSize) {
        var array = this;
        return [].concat.apply([],
        array.map(function (elem, i) {
            return i % chunkSize ? [] : [array.slice(i, i + chunkSize)];
        }));
    }

    arr = arr.chunk(50);

    var list = document.getElementById('longList');
    var button = document.getElementById('loadMore');

    var counter = arr.length,
        aBoxLen = 1;

    function appendBox() {
        var div = document.createElement('div'),
            str = "";
        div.className = "aBox";
        var minArray = arr[counter - aBoxLen];
        for (var i = 0; i < minArray.length; i++) {
            str += "<div class='item'>" + minArray[i] + "</div>";
        }
        div.innerHTML = str;
        div.setAttribute('index', counter - aBoxLen);
        var box = document.querySelector('.aBox');
        if (box) {
            list.insertBefore(div, box);
        } else {
            list.appendChild(div);
        }
        aBoxLen += 1;
    }

    appendBox();

    button.addEventListener('click', function () {
        appendBox();
    });

    $.fn.is_on_screen = function () {

        var win = $(window);

        var viewport = {
            top: win.scrollTop(),
            left: win.scrollLeft()
        };
        viewport.right = viewport.left + win.width();
        viewport.bottom = viewport.top + win.height();

        var bounds = this.offset();
        bounds.right = bounds.left + this.outerWidth();
        bounds.bottom = bounds.top + this.outerHeight();

        return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));

    };




    function updateData(callback) {
        var elements = document.querySelectorAll('.aBox');
        elements = Array.prototype.slice.call(elements);
        var toBe = counter - 1 - elements.length;
        async.each(elements, function (element, cb) {
            var inView = $(element).is_on_screen(),
                ele = element.querySelector('.item');
            if (inView == false && ele) {
                console.log("Not in visible, keeping it none");
                var height = element.clientHeight;
                element.style.height = height + "px";
                element.innerHTML = "";
            } else if (!ele && inView) {
                console.log('Placing the content');
                console.log(element.getAttribute('index'));
                var minArray = arr[element.getAttribute('index')],
                    str = "";
                for (var j = 0; j < minArray.length; j++) {
                    str += "<div class='item'>" + minArray[j] + "</div>";
                }
                element.innerHTML = str;

            }
            cb();
        }, function () {
            // callback()
        });
    }


    var delay = false;
    var timeout = null;

    list.addEventListener('touchmove', function () {
        clearTimeout(timeout);
        timeout = setTimeout(function () {
            updateData();
        }
        }, delay);
    });