angularjs - 当内容在容器内时， Angular 滚动不起作用

Question

我正在使用名为 duScroll ( https://github.com/oblador/angular-scroll/ ) 的 Angular 插件在单击 href 时进行滚动。所有部分都在一个高度为 500 像素的容器内，称为“滚动容器”。但是滚动没有发生。

我至少可以通过更改 duScroll.js 中的一行来让它滚动

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

但滚动仍然不一致并且无法正常工作。我哪里出错了？

请联系:http://plnkr.co/edit/UVh4cjCdMuD9kBMgTgJB?p=preview

Answer 1

您最好使用 the documentation 中概述的指令 du-smooth-scroll 和 du-scroll-container .

在你的情况下，这样的事情会起作用:

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