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个元素，并且所有这些元素都来自局部变量。添加新元素后，变换（translate）将有助于阻止跳转行为。

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

Answer 1

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

vsRepeat指令表示虚拟滚动重复。它将可滚动容器中的一组标准ngRepeated元素转换为一个组件，在该组件中，用户认为他已经渲染了所有元素，而他所需要做的就是滚动（没有任何分页功能-大多数用户讨厌）并且在同一位置当浏览器不会被那么多元素/角度绑定等所重载时。伪指令仅渲染可以容纳当前容器的clientHeight / clientWidth的元素。

如何使用transform：translateY（）“ AngularJS”创建垂直滚动条？

1 个答案: