Angular scrolling doesn't work when content is inside a container
I am using an Angular plugin called duScroll ( https://github.com/oblador/angular-scroll/ ) to scroll when href is pressed. All sections are contained within a 500px high container called "scroll-container". But the scroll doesn't happen.
I was able to get it at least by scrolling by changing the line in duScroll.js
proto.scrollToElement = function() {...
...
return angular.element(document.querySelector('.scroll-container')).scrollTo(0, top-45, duration, easing);
}
However, the scroll is incompatible and does not work as expected. Where am I going wrong?
source to share
You are better off using the directives du-smooth-scroll
and du-scroll-container
described in the documentation .
In your case, something like this will work:
<nav du-scroll-container="scroll-container">
<ul>
<li><a du-smooth-scroll href="#section-1" >Section 1</a></li>
…
</ul>
</nav>
<div id="scroll-container" class="scroll-container">
…
</div>
source to share
I have the same problem and I narrowed it down to setting the height causing the problem. I suspect the listeners are being bombarded, so click clicks never occur after setting the height. In my case, commenting out the JQuery line giving the height makes it work, but that's not an option for me.
Do you have a better solution?
By the way, using du-scroll-container doesn't work in my case either. I do not know why. Here's my code:
...
<nav du-scroll-container="scrollContainer">
<ul class="nav nav-pills">
<li><a du-smooth-scroll="current" du-scrollspy>Current</a></li>
<li><a du-smooth-scroll="forecast" du-scrollspy>Forecast</a></li>
<li ng-if="launch.webcams"><a href="#webcams" du-smooth-scroll du-scrollspy>Webcams</a></li>
<li><a href="#details" du-smooth-scroll du-scrollspy>Details</a></li>
</ul>
</nav>
</div>
<div id="scrollContainer">
<section id="current">
...
source to share