6

我在我的应用程序中使用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

要求是在 DOM 中一次只保留 10 个元素，并且所有元素都来自一个局部变量。变换（translate）将有助于在添加新元素时停止跳跃行为。

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

4

1 回答 1

0

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

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

于 2018-07-18T03:16:40.783 回答