Угловая прокрутка не работает, когда содержимое находится внутри контейнера

Question

Я использую Angular plugin под названием duScroll (https://github.com/oblador/angular-scroll/) для прокрутки при нажатии href. Все разделы находятся внутри контейнера высотой 500 пикселей, называемого «scroll-container». Но свиток не происходит.

Я был в состоянии получить его по крайней мере прокрутки, изменив строку в duScroll.js

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

Но все же свитка противоречива и не работает должным образом. Где я иду не так?

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

Answer 1

Вы бы лучше использовать директивы du-smooth-scroll и du-scroll-container, изложенные в the documentation.

В вашем случае что-то вроде этого будет работать:

<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> 

Answer 2

У меня такая же проблема, и я сузили его до установки высоты вызывает проблему. Я подозреваю, что слушатели подвергаются бомбардировке, поэтому клики по кликам никогда не возникают после установки высоты. В моем случае, комментируя строку JQuery, устанавливающую высоту, она работает, но это не вариант для меня.

У вас есть лучшее решение?

Кстати, использование контейнера du-scroll не работает в моем случае. Я не знаю, почему. Вот мой код:

... 
    <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"> 
    ...