退出全屏模式时防止跳到顶部答案

【问题标题】：Prevent jumping to the top when exiting fullscreen mode退出全屏模式时防止跳到顶部
【发布时间】：2022-01-26 11:59:13
【问题描述】：

如何在此代码中添加退出全屏模式时不跳转到页面顶部的功能？非常感谢

$('#toggle_fullscreen').on('click', function(){
  if (
    document.fullscreenElement ||
    document.webkitFullscreenElement ||
    document.mozFullScreenElement ||
    document.msFullscreenElement
  ) {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
  } else {
    element = $('#fullscreen-wrapper').get(0);
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if (element.webkitRequestFullscreen) {
      element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    } else if (element.msRequestFullscreen) {
      element.msRequestFullscreen();
    }
  }
});

【问题讨论】：

退出全屏不应导致页面跳转到页面顶部。可能是其他原因造成的。
@evolutionxbox 我不确定还有什么可以干扰的。我有一个单独的函数，可以在单击空锚标记时从 URL 中删除主题标签
"我有一个单独的函数可以从 URL 中删除主题标签" - 你是否有机会重新加载页面？跨度>
"点击空锚标签" - 这些听起来都不像您的问题与退出全屏模式有关。
@freedomn-m 我不会重新加载页面

标签： javascript html jquery

【解决方案1】：

切换到全屏时，将当前滚动位置保存在变量中。退出时，只需将窗口滚动到该位置

let lastScrollPosition;

$('#toggle_fullscreen').on('click', function(){
  if (
    document.fullscreenElement ||
    document.webkitFullscreenElement ||
    document.mozFullScreenElement ||
    document.msFullscreenElement
  ) {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
    $(window).scrollTop(lastScrollPosition);
  } else {
    element = $('#fullscreen-wrapper').get(0);
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if (element.webkitRequestFullscreen) {
      element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    } else if (element.msRequestFullscreen) {
      element.msRequestFullscreen();
    }
    lastScrollPosition = $(window).scrollTop();
  }
});

【讨论】：

不幸的是不适合我
我认为应该是滚动的窗口。我还没有看到你的代码。它可能是一个 div 或其他东西。那应该用代码中的窗口替换