Kątowa zmiana stanu routera na przewijanie

Question

Oto przykładowy układ. Zakładając, że wysokość przekroju jest większa lub równa szerokości widoku użytkownika.

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

Wszystkie te sekcje są umieszczone w jednym widoku. Chcę dynamicznie zmieniać adres URL przeglądarki po przewinięciu strony użytkownika i przechodzi do jednej z sekcji: Za pierwszym razem użytkownik widzi http://example.com/#/section1 (kątowo bez trybu html5), a następnie przewija w dół stronę i powinien zobaczyć http://example.com/#/section2, gdy element stanie się widoczny w oknie roboczym użytkownika . Również jeśli użytkownik kopiuje link, gdy otwiera, tj. http://example.com/#/section2, muszę przewinąć stronę do tej sekcji.

Aby wykryć, która sekcja jest obecnie oglądana przez użytkownika, używam dyrektywy angular-inview.

Teraz zrobiłem to przez parametr:

$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 
}); 

Ale w ten sposób nie jest dobry i spokojny url nie szuka przyjaźni. Ma też błąd, gdy klikam na link z ui-srefem, po raz pierwszy przeskakuje na stronę, zmienia sekcję inview na jakiś czas i wyzwala kod wspomniany powyżej, więc w rzeczywistości nie nawiguje zgodnie z ui-sref. Ale następnym razem klikam - wszystko działa dobrze (dzieje się to zaraz po przeładowaniu strony).

Czy ktoś może zasugerować, jak to zrobić lepiej, jeśli to rzeczywiście możliwe?

Answer 1

Dlaczego chcesz zmienić stan, kiedy $ state.go ($ state.current)? Może zamiast tego użyj anchorScroll, nie wiesz o html5.

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

EDIT:

Niestety, brakowało mi o przewijania myszy. Sprawdź tę odpowiedź: https://stackoverflow.com/a/14717011/1603188 i użycie $ location.hash (id);