javascript - 如何使用转换 :translateY() "AngularJS"? 创建垂直滚动条

Question

我正在使用 Infinite Scroll在我的应用程序中，我想实现指令中当前不支持的双向滚动效果。

我添加了滚动检测方法，它可以发现滚动的向上/向下移动，因此我正在基于此进行计算。我添加了 translateY，因此可以轻松添加和删除新元素。

因此理想情况下，在向下移动时，应该添加一个新元素，同时应该删除向上的旧元素。

滚动不流畅，卡住了。

所有元素都是动态的，可以有不同的高度。

更新了这个方法

         handler = function() {

                var containerBottom, containerTopOffset, elementBottom, remaining, shouldScroll, currentPosition;
                currentPosition = container[0].scrollTop;
                (position === null) && (position = currentPosition);

if(currentPosition > position){
                    scrollPosition = 0;
                }else if(currentPosition === position){
                    scrollPosition = scrollPosition;
                }else{
                    scrollPosition = 1;
                }
                position = currentPosition;
                if(scrollPosition == null){
                    return;
                }


                //console.log('position', scrollPosition);
                if (container === windowElement) {
                    //console.log("windowElement");
                    containerBottom = height(container) + pageYOffset(container[0].document.documentElement);
                    elementBottom = offsetTop(elem) + height(elem);
                    containerTopOffset = offsetTop(container);
                } else {
                    if(scrollPosition){
                        //console.log('Up',  scrollPosition);
                        containerBottom = 0;
                        containerTopOffset = 0;
                        if (offsetTop(container) !== void 0) {
                            containerTopOffset = offsetTop(container);
                        }
                        elementBottom = offsetTop(elem) - 56;
                    }else {
                        //console.log('Down',  scrollPosition);
                        containerBottom = height(container);
                        containerTopOffset = 0;
                        if (offsetTop(container) !== void 0) {
                            containerTopOffset = offsetTop(container);
                        }
                        elementBottom = offsetTop(elem) - containerTopOffset + height(elem);
                    }
                }
                if (useDocumentBottom) {
                    elementBottom = height((elem[0].ownerDocument || elem[0].document).documentElement);
                }
                remaining = scrollPosition ? elementBottom - containerTopOffset   : elementBottom - containerBottom;

                //console.log('scrollPosition ', remaining);
                shouldScroll = remaining <= height(container) * scrollDistance + 1;

                //console.log(shouldScroll);

                //shouldScroll = offsetTop(container) - offsetTop(elem);
                console.log(offsetTop(container) - offsetTop(elem));

                if (shouldScroll) {
                    checkWhenEnabled = true;
                    if (scrollEnabled) {
                        //container[0].children[0].style.transform = "translateY("+containerTopOffset - containerBottom+"px)";
                        if (scope.$$phase || $rootScope.$$phase) {
                            return scope.infiniteScroll({
                                callback:scrollPosition
                            });
                        } else {
                            return scope.$apply(function (){
                                scope.infiniteScroll({
                                    callback:scrollPosition
                                });
                            });
                        }
                    }
                } else {
                    if (checkInterval) {
                        $interval.cancel(checkInterval);
                    }
                    return checkWhenEnabled = false;
                }
            };

Jsfiddle for the same

要求是在 DOM 中一次只保留 10 个元素，并且所有元素都来自局部变量。Transform(翻译)将有助于在添加新元素时停止跳转行为。

当添加新元素时，它也会自动调用向上移动。

Answer 1

引用 https://github.com/kamilkp/angular-vs-repeat

vsRepeat 指令代表虚拟滚动重复。它将可滚动容器中的标准 ngRepeated 元素集变成一个组件，用户认为他已经呈现了所有元素，他需要做的就是滚动(没有任何类型的分页 - 大多数用户厌恶)并且同时时间浏览器没有被那么多元素/Angular 绑定(bind)等重载。该指令仅呈现可以适合当前容器的 clientHeight/clientWidth 的那么多元素。