这个问题有两个部分.

我无法理解滑下时如何反转滑块的方向？

这是相关的codepen – https://codepen.io/bmarcelino/pen/vRYPXV

更新卡的相关功能

function updateUi() {
    requestAnimationFrame(function(){
        elTrans = 0;
        var elZindex = 5;
        var elScale = 1;
        var elOpac = 1;
        var elTransTop = items;
        var elTransInc = elementsMargin;

        for(i = currentPosition; i < (currentPosition + items); i++){
            if(listElNodesObj[i]){
                listElNodesObj[i].classList.add('stackedcards-bottom','stackedcards--animatable','stackedcards-origin-bottom');

                listElNodesObj[i].style.transform ='scale(' + elScale + ') translateX(0) translateY(' + (elTrans - elTransInc) + 'px) translateZ(0)';
                listElNodesObj[i].style.webkitTransform ='scale(' + elScale + ') translateX(0) translateY(' + (elTrans - elTransInc) + 'px) translateZ(0)';
                listElNodesObj[i].style.opacity = elOpac;
                listElNodesObj[i].style.display = 'block';
                listElNodesObj[i].style.zIndex = elZindex;

                elScale = elScale - 0.04;
                elOpac = elOpac - (1 / items);
                elZindex--;
            }
        }

    });

};

我不是特别精通Javascript.
截至目前,当滑动 – 向前滑动时,滑块仅在一个方向上移动.我希望了解向滑块添加向后移动的实现.

2.关于表现

此外,requestAnimationFrame确实有助于在滑动时提供流畅的体验.但是DOM中应该有多少张卡有限制吗？我将调用一个API服务来获取内容,因为它将返回媒体,所以只需将opacity设置为0以帮助减少内存使用？

作者争辩说删除DOM会强制浏览器重新绘制,这会对性能产生重大影响吗？但是不是那个虚拟列表吗？在这种情况下,性价比是多少？