这是一个示例布局.假设截面高度大于或等于用户的视口.
+----------+ | 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 });
但这种方式并不安静,网址也不友好.还有一个bug,当我点击ui-sref链接时,第一次页面跳转,更改inview部分一段时间并触发上面提到的代码,所以实际上它根据ui-sref导航.但是下次我点击 – 一切运行良好(这在页面重新加载后发生).
如果有可能,有人可以建议如何做得更好吗?
解决方法
当你$state.go($state.current)时,你为什么要改变状态?也许使用anchorScroll,不确定html5.
https://docs.angularjs.org/api/ng/service/$anchorScroll
编辑:
对不起,我错过了鼠标滚动.检查此答案https://stackoverflow.com/a/14717011/1603188和$location.hash(id)的用法;
原文地址:https://www.jb51.cc/js/157554.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。