changing scroll top inside angular directive doesn't work

Question

In my directive I wrote my logic for dynamic pagination (lazy loading), each time the user scroll to the bottom of the page I append more elements to it , this works fine but I want to to change the scroll position after that but it doesn't work.
This is my code :

 link: function(scope, element) {

            var usersArea = $(".usersArea");

            usersArea.bind("scroll", function() {

                var scrollHeight = $(this)[0].scrollHeight;
                var scrollTop = $(this)[0].scrollTop;
                var clientHeight = $(this)[0].clientHeight;
                var downloadMore = scrollHeight - scrollTop - clientHeight < 50;

                if (downloadMore) {
                    var childScope = scope.$new();    

                    usersContainer = scope.displayPortion(usersContainer);
                    if (usersContainer) {
                        $compile(usersContainer)(childScope);
                        //This doesn't work !!
                        $(this)[0].scrollTop = 500;
                    }
                }
            });    
}

I tried to change the scroll position using native javascript and with JQuery but nothings seem to work, any suggestions ?

Do you have fiddle/plunker demo? try also to pospone that set via for example var self = this; setTimeout(function(){ $(self)[0].scrollTop = 500; })... — dhilt
– dhilt, Commented Oct 29, 2017 at 12:52
sorry I don't have any fiddle for that, my code can't be applied on it, and the code is very big to be posted, I will try this , thanks. — Mahmoud Abd AL Kareem
– Mahmoud Abd AL Kareem, Commented Oct 29, 2017 at 13:01
You are really awesome !!! the timeout did the trick thanks ! — Mahmoud Abd AL Kareem
– Mahmoud Abd AL Kareem, Commented Oct 29, 2017 at 13:05
can you add this in an answer ?, just to let others benefit from that. — Mahmoud Abd AL Kareem
– Mahmoud Abd AL Kareem, Commented Oct 29, 2017 at 13:06
Sorry, I posted the answer to another question :) let me re-make this one.. — dhilt
– dhilt, Commented Oct 29, 2017 at 13:16

dhilt · Accepted Answer · 2017-10-29 13:23:59Z

Since the compile is not immediate procedure I would suggest to postpone any operations with the result of compiling. The easiest (but not the best) way is to use simple timer:

  var elt = $(this)[0];
  var scrollHeight = elt.scrollHeight;
  var scrollTop = elt.scrollTop;
  var clientHeight = elt.clientHeight;
  var downloadMore = scrollHeight - scrollTop - clientHeight < 50;

  if (downloadMore) {
      var childScope = scope.$new();    
      usersContainer = scope.displayPortion(usersContainer);
      if (usersContainer) {
          $compile(usersContainer)(childScope);
          setTimeout(function() {
            elt.scrollTop = 500;
          });
      }
  }

Collectives™ on Stack Overflow

changing scroll top inside angular directive doesn't work

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related