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

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 property to get the scroll position before setting the card to fullscreen, then use that value to set the scollTop property after returning the card to its regular size. 在将卡片设置为全屏之前，使用 .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;
}