AngularJS directive to scroll to a given item

Question

I have a scope variable $scope.first_unread_id which is defined in my controller. In my template, I have:

<div id="items" >
  <ul class="standard-list">
    <li ng-repeat="item in items" scroll-to-id="first_unread_id">
    <span class="content">{{ item.content }}</span>
    </li>
  </ul>
</div>

and my directive looks like:

angular.module('ScrollToId', []).
directive('scrollToId', function () {
  return function (scope, element, attributes) {
    var id = scope.$parent[attributes["scrollToId"]];
    if (id === scope.item.id) {
      setTimeout(function () {
        window.scrollTo(0, element[0].offsetTop - 100)
      }, 20);
    }
  }

});

it works, however, two questions:

Is there a better way of getting the "first_unread_id" off the controller scope into the direct than interrogating scope.$parent? This seems a bit 'icky'. I was hoping I could pass that through the view to the direct as a parameter w/o having to repeat that on ever li element.
Is there a better way to avoid the need of the setTimeout() call? Without it, it works sometimes - I imagine due to difference in timing of layout. I understand the syntax I have used is defining a link function - but it isn't clear to me if that is a pre or post-link by default - and if that even matters for my issue.

have you checked out Angular's AnchorScroll? AnchorScroll Service — Arnold.Krumins
– Arnold.Krumins, Commented Oct 7, 2014 at 5:46

Andrew Joslin · Accepted Answer · 2012-10-09 00:20:05Z

40

You shouldn't need the scope.$parent - since it will inherit the value from the parent scope, and when it changes in the parent scope it will be passed down.
The default is a post-link function. Do you have some images or something loading that would make the page layout change shortly after initial load? Have you tried a setTimeout with no time on it, eg setTimeout(function(){})? This would make sure this would go 'one after' everything else is done.
I would also change the logic of your directive a bit to make it more general. I would make it scroll to the element if a given condition is true.

Here are those 3 changes:

html:

<div id="items" >
  <ul class="standard-list">
    <li ng-repeat="item in items" scroll-if="item.id == first_unread_id">
      <span class="content">{{ item.content }}</span>
    </li>
  </ul>
</div>

JS:

app.directive('scrollIf', function () {
  return function (scope, element, attributes) {
    setTimeout(function () {
      if (scope.$eval(attributes.scrollIf)) {
        window.scrollTo(0, element[0].offsetTop - 100)
      }
    });
  }
});

answered Oct 9, 2012 at 0:20

Andrew Joslin

43k21 gold badges102 silver badges75 bronze badges

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

6 Comments

alalonde Over a year ago

Why not use $timeout? Also, why $eval rather than $parse? Wouldn't $parse be more angular-y?

Andrew Joslin Over a year ago

We're doing a one-time thing here, so $eval seems to work. $parse is usually used to parse something then save it to use repeatedly later. And $timeout is usually used to call a digest when it fires, which we don't actually need here.

Roman M. Koss Over a year ago

$timeout(fn, delay, false) - and no dirty checking!

Roman M. Koss Over a year ago

Also use: scope.scrollIf with scope: {scrollIf: '='} instead of using scope.$eval

Andrew Joslin Over a year ago

That's not good to do; it creates an isolate scope that we don't need :-)

|

Uri · Accepted Answer · 2013-12-15 09:00:58Z

11

Assuming that the parent element is the one where we scroll, this works for me:

app.directive('scrollIf', function () {
  return function(scope, element, attrs) {
    scope.$watch(attrs.scrollIf, function(value) {
      if (value) {
        // Scroll to ad.
        var pos = $(element).position().top + $(element).parent().scrollTop();
        $(element).parent().animate({
            scrollTop : pos
        }, 1000);
      }
    });
  }
});

answered Dec 15, 2013 at 9:00

Uri

27.1k12 gold badges49 silver badges81 bronze badges

1 Comment

Bastien Jansen Over a year ago

Thanks for $watch(), in my case the condition was set dynamically.

Mat · Accepted Answer · 2015-02-06 15:51:34Z

I ended up with the following code (which does not depend on jQ) which also works if the scrolling element is not the window.

app.directive('scrollIf', function () {
    var getScrollingParent = function(element) {
        element = element.parentElement;
        while (element) {
            if (element.scrollHeight !== element.clientHeight) {
                return element;
            }
            element = element.parentElement;
        }
        return null;
    };
    return function (scope, element, attrs) {
        scope.$watch(attrs.scrollIf, function(value) {
            if (value) {
                var sp = getScrollingParent(element[0]);
                var topMargin = parseInt(attrs.scrollMarginTop) || 0;
                var bottomMargin = parseInt(attrs.scrollMarginBottom) || 0;
                var elemOffset = element[0].offsetTop;
                var elemHeight = element[0].clientHeight;

                if (elemOffset - topMargin < sp.scrollTop) {
                    sp.scrollTop = elemOffset - topMargin;
                } else if (elemOffset + elemHeight + bottomMargin > sp.scrollTop + sp.clientHeight) {
                    sp.scrollTop = elemOffset + elemHeight + bottomMargin - sp.clientHeight;
                }
            }
        });
    }
});

bob · Accepted Answer · 2016-09-02 07:29:24Z

4

Same as accepted answer, but uses the javascript built-in method "scrollIntoView":

angular.module('main').directive('scrollIf', function() {
    return function(scope, element, attrs) {
        scope.$watch(attrs.scrollIf, function(value) {
            if (value) {
                element[0].scrollIntoView({block: "end", behavior: "smooth"});
            }
        });
    }
});

answered Sep 2, 2016 at 7:29

bob

8,0232 gold badges50 silver badges44 bronze badges

1 Comment

DirtyMind Over a year ago

I was looking for this answer...

Michal Moravcik · Accepted Answer · 2015-08-21 18:02:32Z

1

In combination with UI Router's $uiViewScroll I ended up with the following directive:

app.directive('scrollIf', function ($uiViewScroll) {
    return function (scope, element, attrs) {
        scope.$watch(attrs.scrollIf, function(value) {
            if (value) {
                $uiViewScroll(element);
            }
        });
    }
});

answered Aug 21, 2015 at 18:02

Michal Moravcik

2,34920 silver badges18 bronze badges

Comments

CR Rollyson · Accepted Answer · 2016-02-10 21:33:22Z

0

In combo with @uri, this works for my dynamic content with ui-router and stateChangeSuccess in .run:

$rootScope.$on('$stateChangeSuccess',function(newRoute, oldRoute){

        setTimeout(function () {
            var postScroll = $state.params.postTitle;
            var element = $('#'+postScroll);
            var pos = $(element).position().top - 100 + $(element).parent().scrollTop();
            $('body').animate({
                scrollTop : pos
            }, 1000);
        }, 1000);

    });

answered Feb 10, 2016 at 21:33

CR Rollyson

1,6011 gold badge14 silver badges12 bronze badges

Comments

Aryeh Beitz · Accepted Answer · 2017-06-26 09:42:35Z

For an answer taking the best of the answers here, in ES6:

File: scroll.directive.js

export default function ScrollDirective() {
    return {
        restrict: 'A',
        scope: {
            uiScroll: '='
        },
        link: link
    };

    function link($scope, $element) {
        setTimeout(() => {
            if ($scope.uiScroll) {
                $element[0].scrollIntoView({block: "end", behavior: "smooth"});
            }
        });
    }
}

File scroll.module.js

import ScrollDirective from './scroll.directive';

export default angular.module('app.components.scroll', [])
    .directive('uiScroll', ScrollDirective);

After importing it in your project, you can use it in the your html:

<div id="items" >
  <ul class="standard-list">
    <li ng-repeat="item in items" ui-scroll="true">
    <span class="content">{{ item.content }}</span>
    </li>
  </ul>
</div>

Collectives™ on Stack Overflow

AngularJS directive to scroll to a given item

7 Answers 7

6 Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

6 Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related