如何使用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的元素。