Scroll Bottom Angularjs Directive

Question

I am working on chat app, and the problem seems to be that directive for scroll bottom, to the last item in ng-repeat is not working properly when there are images in messages. So it just doesn't scroll all the way bottom. I think the reason is that directive scrolls before the image is fully loaded.

                  // Scroll to bottom directive
                    .directive('schrollBottom', function ($timeout) {
                      return {
                        scope: {
                          schrollBottom: "="
                        },
                        link: function (scope, element) {
                          scope.$watchCollection('schrollBottom', function (newValue) {
                            if (newValue)
                            {
                             $timeout(function() { 

                          $(element[0]).scrollTop($(element)[0].scrollHeight);
                         }, 0, false);



                            }
                          });
                        }
                      }
                    })

Check [here](https://stackoverflow.com/questions/12354865/image-onload-event-and-browser-cache) to see how to wait for an image to load before doing something. You can add a class to all images and wait for all images with that class to load before scrolling. — Lansana Camara, Aug 02 '17 at 11:49
@Lansana, Thanks is there is a way to have things in one directive, one is watch the collection and second condition if image loaded? — Beny, Aug 02 '17 at 12:12
I would keep what logic you have, and put it inside of an `img.onload` callback handler. Then any scrolling to the bottom will only occur once all images have loaded. — Lansana Camara, Aug 02 '17 at 12:19
@Lansana, thank you. you can mark as answer i will accept it. — Beny, Aug 02 '17 at 13:03

score 1 · Accepted Answer · answered Aug 02 '17 at 13:37

Check here to see how to wait for an image to load before doing something. You can add a class to all images and wait for all images with that class to load before scrolling.

I would keep what logic you have, and put it inside of an img.onload callback handler. Then any scrolling to the bottom will only occur once all images have loaded.

Scroll Bottom Angularjs Directive

1 Answers1