How to create a vertical scroll bar with transform:translateY() "AngularJS"?

Question

I am using Infinite Scroll in my application, and I want to achieve a bidirectional scrolling effect which is not supported currently in the directive.

I added the scroll detect method which finds upward/downward movement of scrolling and so I am performing calculations basing on that. I have added translateY so new element can be added easily and removed.

So ideally on downward movement, a new element should be added while upward old elements should be removed.

Somehow scrolling is not happening smoothly, it gets stuck.

All elements are dynamic and can be of different height.

Updated this method

         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

The requirement is to keep only 10 elements at a time in the DOM, and all of them are coming from a local variable. Transform (translate) will help to stop jump behaviour when new elements are added.

When new elements are added it automatically calls upward movement too.

Pentangular

You should only request "Looking for an answer drawing from credible and/or official sources" when you're asking about a principle or mechanism and you want the answers to display links to official or at least credible documentation as per why the mechanism works the way it does. Which is totally not the case here. This is a request for programming services. It's a feature request. There is no official or credible source for this feature, as it has not yet been coded. – Gaslit

The pattern you are looking for is called "Virtual scrolling". There are several virtual scroll modules for AngularJS on Github, you should look them up and see if they fit your needs before implementing your own solution. – Confined

Answer 1

Refer https://github.com/kamilkp/angular-vs-repeat

vsRepeat directive stands for Virtual Scroll Repeat. It turns a standard ngRepeated set of elements in a scrollable container into a component, where the user thinks he has all the elements rendered and all he needs to do is scroll (without any kind of pagination - which most users loath) and at the same time the browser isn't overloaded by that many elements/angular bindings etc. The directive renders only so many elements that can fit into current container's clientHeight/clientWidth.

Ritchey

It doesn't work for cell structure and different size content block – Pentangular