滾動上的角度UI路由器更改狀態

以下是一個佈局示例。假設截面高度大於或等於用戶的視口。滾動上的角度UI路由器更改狀態

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

所有這些部分都放在一個視圖中。我想在用戶滾動頁面上動態更改瀏覽器網址，並達到以下某個部分：第一次用戶看到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的鏈接時，首次跳轉頁面，在一段時間內改變視圖部分並觸發上面提到的代碼，所以實際上它不根據ui-sref進行導航。但下次我點擊 - 一切正常（這種情況發生在頁面重新加載後）。

有人可以建議如何更好地做到這一點，如果它真的有可能嗎？

來源

2014-12-03 m03geek

爲什麼你想改變狀態，當你$ state.go（$ state.current）？也許使用anchorScroll，而不是關於html5。

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

編輯：

抱歉，我沒有關鼠標的滾動。檢查這個答案https://stackoverflow.com/a/14717011/1603188和$ location.hash（id）;

來源

2014-12-09 08:26:43 Terafor

錨點滾動的使用並不能解決用鼠標滾輪，鍵盤等改變自然滾動狀態的問題。它只會在點擊某個鏈接或按鈕時改變狀態。 – m03geek 2014-12-09 09:16:37

是的，位置散列可以做到這一點，但它會在url中產生另一個＃，如果我切換到html5mode它（散列）也將保留在url中。我的主要目標是實現狀態改變，並最終擺脫URL中的散列。但據我現在的理解，這是不可能的，所以如果沒有新的答案出現，我會接受你的，因爲它至少部分解決了這個問題。謝謝。 – m03geek 2014-12-12 08:16:57

滾動上的角度UI路由器更改狀態

回答

相關問題