返回動態大小的頁面上的滾動條位置

Question

我有一個網頁，每次刷新時都會動態加載。 如果用戶正在編輯網頁中的條目，則鑽取到鏈接中。 然后嘗試按后退按鈕，或按對應於先前頁面也一個標簽，我怎么能節省垂直滾動條的位置，並將其返回到相同的位置單擊任意一個后退按鈕或對應於同一頁面的標簽時。

我試過這個，但它只適用於非動態加載的頁面。 按下后退按鈕時，如何保留可滾動區域的滾動位置？

Answer 1

您可以在鏈接的問題中使用相同的功能，但是聽取滾動事件而不是頁面卸載事件。 這樣，每次用戶滾動時，滾動位置將被更新和存儲。

由於頁面是動態加載的，因此您可以在加載內容后觸發事件，這將導致頁面滾動：

$.get('/resource').done(function(){
    // Render...
    // Add a trigger after the content is loaded and rendered
    $(window).trigger('content:loaded');
}

var prevScrollHorizontal = 0;
var prevScrollVertical = 0;

$(function() {
   $("div#element").scroll(function() { // Listens for scroll events

      var currentHorizontal = $(this).scrollLeft();
      var currentVertical = $(this).scrollTop();

      if(prevScrollHorizontal != currentHorizontal) {
          prevScrollHorizontal = currentHorizontal;
          localStorage.setItem("scrollPositionHorizontal", currentHorizontal);
          // Scrolled horizontally
      }

      if(prevScrollVertical != currentVertical) {
          prevScrollVertical = currentVertical;
          localStorage.setItem("scrollPositionVertical", currentVertical);
          // Scrolled vertically
      }

   });

   // Listen for the 'content:loaded' event triggered above 
   $(window).on('content:loaded', function() {       
       if(localStorage.scrollPositionVertical) {                 
          $("div#element").scrollTop(localStorage.getItem("scrollPositionVertical"));
       }
       if(localStorage.scrollPositionHorizontal) {                 
          $("div#element").scrollLeft(localStorage.getItem("scrollPositionHorizontal"));
       }
    });
});

您可以使用window.location.pathname值分隔不同的存儲滾動對象以區分它們：

$(function() {
   $(window).scroll(function() { // Listens for scroll events
      var scrollPosition = $("div#element").scrollTop();
      // Uses the pathname to set the scroll value
      localStorage.setItem("scrollPosition_"+window.location.pathname, scrollPosition);
   });

   if(localStorage.scrollPosition) {
      // Uses the pathname to get the scroll value   
      $("div#element").scrollTop(localStorage.getItem("scrollPosition_"+window.location.pathname)); 
   }
});

在此處閱讀有關滾動事件的更多信息
還有更多關於jQuery trigger() 信息