如何防止自定義全屏重置滾動位置？

Question

我創建與顯示類似Facebook的信息卡的網頁，我已經改變了類使用模擬全屏CSS添加定製的「全屏」（見下文）

.full-screen { 
    z-index: 9999; 
    width: 100%; 
    height: 100%; 
    position: fixed; 
    top: 0; 
    left: 0; 
    background-color: white; 
    margin: 0; 
    padding: 0; 
} 

然而，我注意到當卡處於「全屏」模式時，背景容器不再有滾動，因爲頁面沒有任何溢出。因此，當我將卡片製作爲常規尺寸時，滾動將重置爲頂部。無論如何，我可以防止這種情況發生嗎？

Answer 1

使用元素 .scrollTop屬性設置卡到全屏之前得到滾動條的位置，然後使用該值將卡返回到它的正常大小後的scollTop屬性設置。

var top = 0; 
function getScrollPosition(){ //call this function before setting card to fullscreen 
    top = document.getElementById("container").scrollTop;//make sure you give the background container an id 
} 
function setScrollPosition(){ //call this function after returning card to normal size 
    document.getElementById("container").scrollTop = top; 
}