如果div被隐藏，如何在div上使用angularjs $ anchorScroll？

Question

我正在使用angularjs来开发Web应用程序。我有几个嵌套div。它们中的每一个对应于用户可以选择的项目。
div显示的一个很好的例子是官方的angularJs文档：
http://plnkr.co/edit/qncMfyJpuP2r0VUz0ax8?p=preview

在我的代码中，每个div都有ng-click="gotoAnchor(x)"个事件，因此当我点击div时，如果它被部分隐藏，则会将其拉到页面上，用户可以看到所有点击的{ {1}}。
但是我的页面中有一个标题，因此带有锚点和点击事件的第一个div不会直接位于页面顶部。如果我点击第一个div，它将滚动并且标题将不可见。

所以我的问题是，只有当div没有完全显示在屏幕上时，有没有办法激活锚点？

如果你有其他解决方案而不是锚，我会接受它。

提前谢谢。

Answer 1

如果我正确理解您的问题，则问题是当您使用$anchorScroll标题时

a ：由div滚动到框架中，

或

b 部分遮盖滚动到框架中的div。

无论哪种方式，您都应该检查两种解决方案：

第一

确保您使用CSS正确分层元素，标题（如果已修复）应该有z-index取代您的div。

.header  { position: fixed; top:0; width: 100%; z-index: 99}
.content { position: relative; margin-top: 10px; z-index: 1;}

记住 Z-index仅适用于位置元素（参见ref）

第二

使用$anchorScroll.yOffset确保缩小滚动距离以补偿标题高度。如Angular文档中所示，您可以在应用程序中使用此方法：

.run(['$anchorScroll', function($anchorScroll) {
  $anchorScroll.yOffset = 50;   // always scroll by 50 extra pixels
}])

将50更新为标题的像素高度。

关于可见性

有一些很好的库和指令可用于检查元素的可见性 - 尝试https://github.com/thenikso/angular-inview，因为您可以指定当只有顶部，底部或没有div可见时是否要启用操作。

注意在页面上正确选择第一个div将阻止任何滚动，如plunkr所示。