如何使用transform创建一个垂直滚动条:translateY()"AngularJS"？

Question

我在我的应用程序中使用无限滚动,我想实现目前在指令中不支持的双向滚动效果.

我添加了滚动检测方法,可以找到滚动的向上/向下移动,因此我正在进行基于此的计算.我添加了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也一样

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

添加新元素时,它也会自动调用向上移动.

Answer 1

请参阅 https://github.com/kamilkp/angular-vs-repeat

vsRepeat 指令代表虚拟滚动重复。它将可滚动容器中的一组标准 ngRepeated 元素转换为一个组件，用户认为他已经渲染了所有元素，而他所需要做的就是滚动（没有任何类型的分页 - 大多数用户讨厌），同时时间浏览器不会因太多元素/角度绑定等而过载。该指令仅渲染可以适合当前容器的 clientHeight/clientWidth 的元素。