Angular ui-router在滚动时改变状态

Question

这是一个示例布局。 假设截面高度大于或等于用户的视口。

+----------+
| Section1 |
+----------+
| Section2 |
+----------+
| Section3 |
+----------+

所有这些部分都放在一个视图中。 我想在用户滚动页面时动态更改浏览器URL并到达其中一个部分：首次用户看到http://example.com/#/section1 （角度不使用html5模式），然后他向下滚动页面，应该当section2元素在用户的视口中变得可见时，请参阅http://example.com/#/section2 。 此外，如果用户复制链接，当他打开即http://example.com/#/section2我需要滚动页面到该部分。

为了检测用户当前查看了哪个部分，我使用angular-inview指令。

现在我通过参数完成了它：

$state.go($state.current, {
    section: $scope.activeSectionId // e.g. 'section2'
}, {
    notify: false, // do not reload page
    location: 'replace' // do not save as new history entry
});

但这种方式并不安静，网址也不友好。 此外它有一个错误，当我点击链接与ui-sref时，第一次页面跳转，更改inview部分一段时间并触发上面提到的代码，所以实际上它不根据ui-sref导航。 但是下次我点击 - 一切运行良好（这在页面重新加载后发生）。

如果有可能，有人可以建议如何做得更好吗？

Answer 1

当你$ state.go（$ state.current）时，你为什么要改变状态？ 也许使用anchorScroll，不确定html5。

https://docs.angularjs.org/api/ng/service/$anchorScroll

编辑：

对不起，我错过了鼠标滚动。 检查此答案https://stackoverflow.com/a/14717011/1603188并使用$ location.hash（id）;