CODEWITHSUNDEEP
angularjsangularjs-directivescroll
Beny
Beny

Reputation: 165

Scroll Bottom Angularjs Directive

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);



                            }
                          });
                        }
                      }
                    })

Upvotes: 0

Views: 256

Answers (1)

Lansana Camara
Lansana Camara

Reputation: 9873

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.

Upvotes: 1

Related Questions