如何防止自定义全屏重置滚动位置？

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; 
}