Question

我正在创建一个网页，其中的卡片显示类似于facebook的信息，我添加了一个自定义＆＃34;全屏＆＃34;通过更改类来使用模拟全屏的css（见下文）

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

然而，我注意到当卡片在＆＃34;全屏＆＃34;模式，后台容器不再有滚动，因为页面没有任何溢出。因此，当我将卡片设置为常规尺寸时，滚动条将重置为顶部。无论如何我可以阻止这个吗？

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

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

1 个答案: