我正在使用 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; } };
要求是在 DOM 中一次只保留 10 个元素,并且所有元素都来自局部变量。 Transform(翻译)将有助于在添加新元素时停止跳转行为。
当添加新元素时,它也会自动调用向上移动。
最佳答案
引用 https://github.com/kamilkp/angular-vs-repeat
vsRepeat 指令代表虚拟滚动重复。它将可滚动容器中的标准 ngRepeated 元素集变成一个组件,用户认为他已经呈现了所有元素,他需要做的就是滚动(没有任何类型的分页 - 大多数用户厌恶)并且同时时间浏览器没有被那么多元素/Angular 绑定(bind)等重载。该指令仅呈现可以适合当前容器的 clientHeight/clientWidth 的那么多元素。
关于javascript - 如何使用转换 :translateY() "AngularJS"? 创建垂直滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51234613/