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>

正如您(希望(所看到的，当未处于全屏模式时，全屏切换会将视口重置为页面顶部。我宁愿它不这样做。

Answer 1

请记住用户在全屏视图和常规视图之间切换时的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);
    });

Answer 2

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