Using same ID for scroll container across different views breaks scrolling

[astynax777]

I'm using AngularJS with ngRoute and when I move from one view to another, I found that if the two consecutive views each have a scroll container with the same ID, the scrolling breaks.

<div layout="row" layout-align="space-between" du-scroll-container="scroll-container">
</div>
<md-content layout="column" flex id="scroll-container">
</md-content>

The workaround is easy - make sure that each of your scroll containers have unique IDs.

I determined this was the issue by stepping through this function:

proto.duScrollTo = function (left, top, duration, easing) {
    var aliasFn;
    if (angular.isElement(left)) {
        aliasFn = this.duScrollToElement;
    } else if (angular.isDefined(duration)) {
        aliasFn = this.duScrollToAnimated;
    }
    if (aliasFn) {
        return aliasFn.apply(this, arguments);
    }
    var el = unwrap(this);
    if (isDocument(el)) {
        return $window.scrollTo(left, top);
    }
    el.scrollLeft = left;
    el.scrollTop = top; // <-- this was not updating probably because el is referencing an object that's not likely on the DOM anymore
};