如何獲得一致的ScrollIntoView行爲

所以我一直在使用ScrollIntoView（）跳轉到作爲Web應用程序的一部分的反應組件中的錨點。對於小頁面，它可以正常工作，進入正確的位置並按照預期行事。我有一個更大的頁面，其行爲很奇怪。在加載時，跳轉到錨點的位置應低於它應該在半頁以上的位置。第一次點擊鏈接到任何錨點時，包括同一個錨點，錨點會在類似的數量之上結束。只要頁面沒有重新加載，每次後續點擊都可以正常工作。這是我的函數代碼。它有一個setTimeout，因爲我認爲這個問題與頁面加載有關，但沒有效果。這是我的功能：如何獲得一致的ScrollIntoView行爲

scrollToAnchor: function() { 
    let anchorName = this.props.location.hash || window.location.hash; 
    if (anchorName) { 
     anchorName = anchorName.replace("#", ""); 
     let anchorElement = document.getElementById(anchorName); 
     if (anchorElement) { 
      window.setTimeout(anchorElement.scrollIntoView(true), 0); 
     } 
    } else { 
     window.scrollTo(0, 0); 
    } 
},

來源

2016-03-07 suntruth

這是否發生在所有瀏覽器？你有沒有檢查重繪的時間表？ – enjoylife

我已經在Chrome和Firefox中測試過，並且兩者都存在問題。至於時間表，重新加載的第一個畫面是第一次顯示錨點太高的地方。在第一次點擊時，錨點對齊到正確的位置，但隨後重新繪製到另一個點。 – suntruth

我在我的Mac上的最新版本的Chrome（不在Windows上）上遇到了同樣的問題，並且在Edge上出現了更奇怪的問題。任何解決方法？ –

在我的情況下，我不得不手動添加默認參數，以便它在一些瀏覽器中工作。該block和inline PARAMS有關聯的默認值，但我不得不手動將它們放在這樣的：

my_element.scrollIntoView(
    { behavior: 'smooth' , block: 'start', inline: 'nearest'} 
);

有一次，我在scrollIntoViewOptions定義它們，這在所有的瀏覽器工作得很好。

PS：不要忘記polyfill平滑滾動。

來源

2017-10-02 22:42:01

如何獲得一致的ScrollIntoView行爲

回答

相關問題