javascript - Javascript全屏切换重置用户视口位置

Question

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

这很不和谐，因为将视口位置重置到网页顶部会切断用户对应用程序的访问大约一半，需要他们向下滚动。

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

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>

正如您（希望）所看到的，全屏切换在不处于全屏模式时会将视口重置为页面顶部。我宁愿它没有那样做。

标签： javascripthtmlcsstogglefullscreen

Answer 1

if ((document.fullScreenElement && document.fullScreenElement !== null) ||
        (!document.mozFullScreen && !document.webkitIsFullScreen)) {
        if (document.documentElement.requestFullScreen) {
            document.documentElement.requestFullScreen();
        } else if (document.documentElement.mozRequestFullScreen) {
            document.documentElement.mozRequestFullScreen();
        } else if (document.documentElement.webkitRequestFullScreen) {
            document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
        }
    } else {
        if (document.cancelFullScreen) {
            document.cancelFullScreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        }
    }