Question

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

我可以通过更改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

您最好使用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>

Answer 2

我有同样的问题，我已将其缩小到设置导致问题的高度。我怀疑听众被轰炸，因此在设置高度后，选项卡点击永远不会发生。在我的例子中，注释掉JQuery行设置高度使它工作，但这不是我的选择。

你有更好的解决方案吗？

顺便说一句，使用du-scroll-container在我的情况下也不起作用。我不知道为什么。这是我的代码：

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

当内容在容器内时，角度滚动不起作用

2 个答案: