Javascript полноэкранный переключатель сбрасывает положение окна просмотра пользователя - PullRequest
Новая
       15

Javascript полноэкранный переключатель сбрасывает положение окна просмотра пользователя

0 голосов
/ 26 мая 2019

У меня есть полноэкранная кнопка переключения для веб-приложения, над которым я работаю, но когда я включаю полноэкранный режим, а затем снова выключаю, он сбрасывает положение пользователя на странице.

Это довольно неприятно, так как сброс положения окна просмотра в верхней части веб-страницы ограничивает доступ пользователя к приложению примерно на полпути, заставляя его прокручиваться назад.

Как я могу изменить свою полноэкранную кнопку переключения, чтобы сохранить положение пользователя на странице с помощью полноэкранных переключателей? 

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>

Как вы (надеюсь) можете видеть, полноэкранный переключатель сбрасывает область просмотра в верхнюю часть страницы, когда не в полноэкранном режиме. Я бы предпочел, чтобы он этого не делал.

1 Ответ

0 голосов
/ 26 мая 2019

Помните положение 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);
    });
...