VisualViewport

Интерфейс VisualViewport API визуального области просмотра представляет визуальную область просмотра для данного окна. Для страницы, содержащей фреймы, каждый фрейм, а также содержащая страница, будут иметь уникальный объект окна. Каждое окно на странице будет иметь уникальный VisualViewport, представляющий свойства, связанные с этим окном.

Вы можете получить визуальную область просмотра окна, используя Window.visualViewport.

Также наследует свойства от своего родительского интерфейса, EventTarget.

VisualViewport.offsetLeft Только для чтения

Возвращает смещение левого края визуальной области просмотра от левого края области просмотра макета в пикселях CSS.

VisualViewport.offsetTop Только для чтения

Возвращает смещение верхнего края визуальной области просмотра от верхнего края области просмотра макета в пикселях CSS.

VisualViewport.pageLeft Только для чтения

Возвращает координату x визуальной области просмотра относительно начала содержащей области вверху в пикселях CSS.

VisualViewport.pageTop Только для чтения

Возвращает координату y визуальной области просмотра относительно начала содержащей области вверху в пикселях CSS.

VisualViewport.width Только для чтения

Возвращает ширину визуальной области просмотра в пикселях CSS.

VisualViewport.height Только для чтения

Возвращает высоту визуальной области просмотра в пикселях CSS.

VisualViewport.scale Только для чтения

Возвращает коэффициент масштабирования при масштабировании визуальной области просмотра.

Также наследует методы от своего родительского интерфейса, EventTarget.

Подпишитесь на эти события, используя addEventListener() или назначив обработчик событий соответствующему oneventname свойству этого интерфейса.

resize

Срабатывает при изменении размеров визуальной области просмотра. Также доступно через onresize свойство.

scroll

Срабатывает при прокрутке визуальной области просмотра. Также доступно через onscroll свойство.

scrollend

Срабатывает при завершении операции прокрутки визуальной области просмотра. Также доступно через onscrollend свойство.

В этом примере, взятом из README Visual Viewport, показано, как написать код, который будет скрывать наложенный блок (например, рекламный блок) при увеличении пользователем масштаба. Это хороший способ улучшить пользовательский опыт при масштабировании страниц. Также доступен живой пример.

const bottomBar = document.getElementById("bottom-bar");
const viewport = window.visualViewport;

function resizeHandler() {
  bottomBar.style.display = viewport.scale > 1.3 ? "none" : "block";
}

window.visualViewport.addEventListener("resize", resizeHandler);

В этом примере, также взятом из README Visual Viewport, показано, как использовать этот API для моделирования position: device-fixed, которое фиксирует элементы к визуальной области просмотра. Также доступен живой пример.

const bottomBar = document.getElementById("bottom-bar");
const viewport = window.visualViewport;
function viewportHandler() {
  const layoutViewport = document.getElementById("layoutViewport");

  // Since the bar is position: fixed we need to offset it by the visual
  // viewport's offset from the layout viewport origin.
  const offsetLeft = viewport.offsetLeft;
  const offsetTop =
    viewport.height -
    layoutViewport.getBoundingClientRect().height +
    viewport.offsetTop;

  // You could also do this by setting style.left and style.top if you
  // use width: 100% instead.
  bottomBar.style.transform = `translate(${offsetLeft}px, ${offsetTop}px) scale(${
    1 / viewport.scale
  })`;
}
window.visualViewport.addEventListener("scroll", viewportHandler);
window.visualViewport.addEventListener("resize", viewportHandler);

• Описание web-визуализаций — полезное объяснение концепций web-визуализаций, включая разницу между визуальным и компонующим viewport.