Angular scroll state ui-router on scroll

Question

Here is an example layout. Assuming the section height is greater than or equal to the custom viewport.

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

All these sections are placed in one view. And I want to dynamically change the browser URL on the user's scroll page and reaches one of the sections: The first time the user sees http://example.com/#/section1 (angular without using html5 mode), then he scrolls the page and should see http://example.com/#/section2 when section2 becomes visible in the user's viewport. Also, if the user copies the link when it opens, i.e. http://example.com/#/section2 I need to scroll to this section.

To determine which section the user is currently viewing, I use angular-inview .

Now I have done it through the parameter:

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

But this method is not very good, and the URL does not look friendly. In addition, it has an error when I click on the link to ui-sref, for transitions for the first time the page changes the viewing section for some time and the trigger code mentioned above, so in fact it does not move according to ui-sref . But next time I click - everything works fine (this happens right after the page reloads).

Can anyone suggest how to do this better if this is really possible?

Answer 1

Why do you want to change state when you are $ state.go ($ state.current)? Perhaps use anchorScroll instead, not sure about html5.

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

EDIT:

Sorry, I missed the scroll of the mouse. Check this answer fooobar.com/questions/19774 / ... and use $ location.hash (id);