還記得在HTML/CSS表

Question

可能有人幫助我得到這個工作的滾動條位置？我想我需要爲此使用JS，但是我對它的經驗很少......所以我認爲一些代碼示例可能會有用。我簡單的表像這樣（爲簡化起見我沒有複製表的內容，因爲它有很多的代碼，而不是相關

<div style="overflow:auto; height:600px; border:2px solid black; border-radius:5px; background:white"> 
<table style="width:100%; border-collapse:collapse"> 
<thead> 
</thead> 
<tbody> 
</tbody> 
</table> 
</div> 

Answer 1

在jQuery中（這將節省與滾動位置的餅乾）：

// When document is ready... 
$(document).ready(function() { 

    // If cookie is set, scroll to the position saved in the cookie. 
    if ($.cookie("scroll") !== null) { 
     $(".yourTableContainerDIV").scrollTop($.cookie("scroll")); 
    } 

    // On window unload, save cookie 
    $(window).unload(function() { 
     $.cookie("scroll", $(".yourTableContainerDIV").scrollTop()); 
    }); 
}); 

從this answer採取了一些微小的改動

編輯：

所以不起作用。

第一個問題是，如果您使用的是this table，那麼您需要閱讀的不是容器DIV的scrollTop，而是您需要查看的tbody。

以及第二個問題是，$(".scrollContent").scrollTop()值變爲0之前$(window).unload()被調用。當我修改這樣的代碼：

// When document is ready... 
$(document).ready(function() { 

    // If cookie is set, scroll to the position saved in the cookie. 
    if ($.cookie("scroll") !== null) { 
     $(".yourTableContainerDIV").scrollTop($.cookie("scroll")); 
    } 

    // Set i to the current scroll position every 100 milliseconds. 
    var i; 
    window.setInterval(function(){i=$(".scrollContent").scrollTop()}, 100); 

    // On window unload, save cookie. 
    $(window).unload(function() { 
     $.cookie("scroll", i); 
    }); 
}); 

它很好用！但是，接下來你會調用一個函數，並且每十分之一秒設置一個值，這對性能來說不算太好。另一種方法是使用window.beforeUnload像這樣：

// When document is ready... 
$(document).ready(function() { 
    // If cookie is set, scroll to the position saved in the cookie. 
    if ($.cookie("scroll") !== null) { 
     $(".yourTableContainerDIV").scrollTop($.cookie("scroll")); 
    } 
}); 

window.onbeforeunload = function(){ 
    $.cookie("scroll", $(".scrollContent").scrollTop()); 
    return; 
} 

這適用於大多數的瀏覽器大，不涉及間隔，但它不能在Opera工作。

希望這會有所幫助...