Angular scroll not working when the content is within a container

Question

I'm using Angular plugin called duScroll (https://github.com/oblador/angular-scroll/) for scrolling when a href is clicked. All the sections are within a container with height of 500px called 'scroll-container'. But the scroll is not happening.

I was able to get it to atleast scroll by changing a line in duScroll.js

proto.scrollToElement = function() {...
...
  return angular.element(document.querySelector('.scroll-container')).scrollTo(0, top-45, duration, easing);
}

But still the scroll is inconsistent and does not work properly. Where am I going wrong ?

Plnkr : http://plnkr.co/edit/UVh4cjCdMuD9kBMgTgJB?p=preview

oblador · Accepted Answer · 2014-12-22 08:21:53Z

1

You'd be better off using the directives du-smooth-scroll and du-scroll-container outlined in the documentation.

In your case something like this would 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>

answered Dec 22, 2014 at 8:21

oblador

3,00422 silver badges15 bronze badges

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

Comments

Flyingkiwi · Accepted Answer · 2015-07-28 20:32:18Z

I have the same problem, and I have narrowed it down to setting the height causing the problem. I suspect the listeners get bombed, and so the tab clicks never occur after setting the height. In my case, commenting out the JQuery line setting 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'm not sure 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">
    ...

Collectives™ on Stack Overflow

Angular scroll not working when the content is within a container

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related