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