Angular-Scroll: same as example, but not working (Plunker)

Question

I'm trying to use Angular-Scroll (https://github.com/oblador/angular-scroll) to simply scroll to an <a> link on the same page, but do it nicely and smoothly. When I couldn't get it to work, I made a super simple setup in Plunker.

Plunker: https://plnkr.co/edit/w1GBTAjxtHL3H4LAuHoO

If you download the zip of the GitHub, there's an example I'm trying to do in the folder location angular-scroll-master/example/container.html. There's really nothing complex, the angular script is basically just finding the container id for the directive to use.

I cannot figure out why my page will not scroll.

HTML

  <div class="medium-6 columns" du-scroll-container="container">
    <a href="#junk" du-smooth-scroll="" du-scrollspy="">Link</a>
  </div>

  <div id="container" class="medium-6 columns" du-scroll-container="">
    <div id="junk">LINK JUNK HERE YAY!!</div>
  </div>

</div>

JS

angular.module('scrollDemo', ['duScroll']).
  controller('myCtrl', function($scope) {
    var container = angular.element(document.getElementById('container'));
});

Open your browser console and look at errors. Script dependency loading order is wrong in demo. Can't load plugins and code that are dependent on a library before the library is loaded — charlietfl
– charlietfl, Commented Oct 11, 2016 at 14:10

Guilherme Meireles · Accepted Answer · 2016-10-11 14:16:57Z

3

I edited your plunker and it seems to be working now. Here is the link.

The problem was that the container div is not the scrollable container that would be the body element to make it work as the scrollable element you can set the max-height of the container so that it will become the scrollable element or remove the du-scroll-container="container" atribute so that it will use the body as the scrollable element.

edited Oct 11, 2016 at 14:16

answered Oct 11, 2016 at 14:08

Guilherme Meireles

7,9492 gold badges23 silver badges16 bronze badges

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

2 Comments

Kenny Over a year ago

Thanks so much for the context, I moved the du-scroll-container="container" to another location in my original file and it started working.

Tomer Cagan Over a year ago

Thanks for this answer! I was facing a similar no-scrolling issue and this answer helped me realize I have to put du-scroll-container on a different div... You have to be careful where it is located - if I get it correctly, it should in the container of the scroll-able content.

Collectives™ on Stack Overflow

Angular-Scroll: same as example, but not working (Plunker)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related