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

【问题标题】：How do I prevent custom full screen from resetting the scroll position?如何防止自定义全屏重置滚动位置？
【发布时间】：2017-08-09 17:41:27
【问题描述】：

我正在创建一个带有显示类似于 facebook 信息的卡片的网页，我通过更改类以使用模拟全屏的 css 添加了一个自定义“全屏”（见下文）

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

但是，我注意到当卡片处于“全屏”模式时，背景容器不再有滚动条，因为页面没有溢出。因此，当我将卡片设置为常规尺寸时，滚动条会重置到顶部。无论如何我可以防止这种情况发生吗？

【问题讨论】：

标签： javascript html css scroll

【解决方案1】：

使用 element.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;
}

【讨论】：