자바스크립트 "Visual Viewport API"

"Visual Viewport API"는 사용자가 스크롤하지 않고 콘텐츠를 볼 수 있는 화면의 일부인 시각적 뷰포트의 차원에 대한 프로그래밍 방식 액세스를 개발자에게 제공하는 JavaScript API입니다. CSSOM 보기 모듈의 일부로 2018년에 도입되었으며 현재 대부분의 최신 브라우저에서 지원됩니다.

​

다음은 Visual Viewport API를 사용하는 방법의 예입니다.

​

// Listen for the resize event on the window

window.addEventListener('resize', function() {

// Get the dimensions of the visual viewport

var width = window.visualViewport.width;

var height = window.visualViewport.height;

​

// Log the dimensions to the console

console.log('Visual viewport width:', width);

console.log('Visual viewport height:', height);

});

​

이 예제에서는 시각적 뷰포트의 너비와 높이를 가져오기 위해 `window.visualViewport` 개체를 사용하고 있습니다. 그런 다음 창 크기가 조정될 때마다 이러한 크기를 콘솔에 기록합니다.

​

Visual Viewport API는 시각적 뷰포트의 스크롤 위치 변경을 감지하는 데 사용할 수 있는 `scroll` 이벤트도 제공합니다. 예를 들면 다음과 같습니다.

​

// Listen for the scroll event on the visual viewport

window.visualViewport.addEventListener('scroll', function() {

// Get the current scroll position of the visual viewport

var scrollX = window.visualViewport.pageLeft;

var scrollY = window.visualViewport.pageTop;

​

// Log the scroll position to the console

console.log('Visual viewport scroll X:', scrollX);

console.log('Visual viewport scroll Y:', scrollY);

});

​

이 예제에서는 시각적 뷰포트의 현재 스크롤 위치를 가져오기 위해 `window.visualViewport.pageLeft` 및 `window.visualViewport.pageTop` 속성을 사용하고 있습니다. 그런 다음 시각적 뷰포트가 스크롤될 때마다 이 값을 콘솔에 기록합니다.

​

Visual Viewport API는 시각적 뷰포트의 크기와 위치에 따라 레이아웃과 동작을 조정해야 하는 반응형 웹 애플리케이션을 구축하는 데 유용할 수 있습니다. 예를 들어 Visual Viewport API를 사용하여 사용자가 모바일 장치에서 가로 방향과 세로 방향 사이를 전환할 때를 감지하고 그에 따라 애플리케이션의 레이아웃을 조정할 수 있습니다.