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 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
– Lansana Camara, Commented Aug 2, 2017 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
– Beny, Commented Aug 2, 2017 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
– Lansana Camara, Commented Aug 2, 2017 at 12:19
@Lansana, thank you. you can mark as answer i will accept it. — Beny
– Beny, Commented Aug 2, 2017 at 13:03

Lansana Camara · Accepted Answer · 2017-08-02 13:37:01Z

1

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.

answered Aug 2, 2017 at 13:37

Lansana Camara

9,90112 gold badges54 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Scroll Bottom Angularjs Directive

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related