Javascript 全屏切换重置用户视口(viewport)位置

Question

我有一个用于我正在处理的 Web 应用程序的全屏切换按钮，但是当我打开全屏然后再次关闭时，它会重置用户在页面上的位置。

这非常不和谐，因为将视口(viewport)位置重置为网页顶部会在中途切断用户对应用程序的访问，要求他们向下滚动。

如何修改我的全屏切换按钮以通过全屏切换保持用户在页面上的位置？

const application = document.querySelector(".application");

function toggleFullscreen(elem) {
  elem = elem || document.documentElement;
  if (!document.fullscreenElement && !document.mozFullScreenElement &&
    !document.webkitFullscreenElement && !document.msFullscreenElement) {
    if (elem.requestFullscreen) {
      elem.requestFullscreen();
    } else if (elem.msRequestFullscreen) {
      elem.msRequestFullscreen();
    } else if (elem.mozRequestFullScreen) {
      elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) {
      elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }
};

document.getElementById("fullscreenbtn").addEventListener("click", function() {
  toggleFullscreen(application);
});

html,
body {
  padding: 0 !important;
  margin: 0 !important;
  background: #2d2a2a;
}

#header {
  width: 100vw;
  height: 10vh;
  background: #000;
}

#spacer {
  width: 1px;
  height: 40vh;
}

#application {
  width: 100vw;
  height: 95vh;
}

<div id="header"></div>
<div id="spacer"></div>
<button id="fullscreenbtn">fullscreen</button>
<div id="application></div>

如您(希望)所见，当不处于全屏模式时，全屏切换会将视口(viewport)重置为页面顶部。我宁愿它不那样做。

Answer 1

当用户在全屏 View 和常规 View 之间切换时，请记住 window.pageYOffset 位置。将 fullscreenchange 事件监听器添加到全局 document。最重要的是 - 在不同的浏览器中测试它，因为它们都使用不同的事件名称(如 mozfullscreenchange)。根据支持的浏览器列表添加这些监听器。

这里是 Chrome 的修改代码，用于在全屏切换之间跟踪并返回到之前的位置。

    const application = document.querySelector(".application");

    let screenOffset;
    document.addEventListener("fullscreenchange", (event) => {
        window.scrollTo(0, screenOffset);
    });

    document.onfullscreenchange = function ( event ) {
        window.scrollTo(0, screenOffset);
    };

    function toggleFullscreen(elem) {
      elem = elem || document.documentElement;
      screenOffset = window.pageYOffset;
      if (!document.fullscreenElement && !document.mozFullScreenElement &&
        !document.webkitFullscreenElement && !document.msFullscreenElement) {
        if (elem.requestFullscreen) {
          elem.requestFullscreen();
        } else if (elem.msRequestFullscreen) {
          elem.msRequestFullscreen();
        } else if (elem.mozRequestFullScreen) {
          elem.mozRequestFullScreen();
        } else if (elem.webkitRequestFullscreen) {
          elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
        }
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        }
      }
    };

    document.getElementById("fullscreenbtn").addEventListener("click", function() {
      toggleFullscreen(application);
    });