diff --git a/README.md b/README.md index 38ed432..8b4d72c 100644 --- a/README.md +++ b/README.md @@ -69,6 +69,8 @@ Code examples that accompany various MDN DOM and Web API documentation pages. - The "touchevents" directory is for examples and demos of the [Touch Events](https://developer.mozilla.org/docs/Web/API/Touch_events) standard. +- The "visual-viewport-api" directory contains a basic demo to show usage of the Visual Viewport API. For more details on how it works, read [Visual Viewport API](https://developer.mozilla.org/docs/Web/API/Visual_Viewport_API). [View the demo live](https://mdn.github.io/dom-examples/visual-viewport-api/). + - The "web-animations-api" directory contains [Web Animation API](https://developer.mozilla.org/docs/Web/API/Web_Animations_API) demos. See the [web animations README](web-animations-api/README.md) for more information. - The "web-storage" directory contains a basic demo to show usage of the Web Storage API. For more detail on how it works, read [Using the Web Storage API](https://developer.mozilla.org/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API). [View the demo live](https://mdn.github.io/dom-examples/web-storage/). diff --git a/visual-viewport-api/index.html b/visual-viewport-api/index.html new file mode 100644 index 0000000..ad46e8e --- /dev/null +++ b/visual-viewport-api/index.html @@ -0,0 +1,21 @@ + + + + + Visual Viewport API example + + + + + + +

Try scrolling around on a desktop and a mobile browser to see how the reported values change. + Also try pinch/zooming on a mobile browser to see the effect.

+
+

+
+

+
+ + + diff --git a/visual-viewport-api/main.js b/visual-viewport-api/main.js new file mode 100644 index 0000000..15390c7 --- /dev/null +++ b/visual-viewport-api/main.js @@ -0,0 +1,29 @@ +const output = document.getElementById("output"); +const visualInfo = document.getElementById("visual-info"); +const windowInfo = document.getElementById("window-info"); + +const scrollUpdater = () => { + output.style.top = `${visualViewport.offsetTop + 10}px`; + output.style.left = `${visualViewport.offsetLeft + 10}px`; + output.style.background = "yellow"; + updateText(); +}; + +const scrollendUpdater = () => { + output.style.background = "lime"; + updateText(); +}; + +function updateText() { + visualInfo.innerText = `Visual viewport left: ${visualViewport.offsetLeft.toFixed(2)} top: ${visualViewport.offsetTop.toFixed(2)}`; + windowInfo.innerText = `Window scrollX: ${window.scrollX.toFixed(2)} scrollY: ${window.scrollY.toFixed(2)}`; +} + +updateText(); + +visualViewport.onresize = scrollUpdater; +visualViewport.onscroll = scrollUpdater; +visualViewport.onscrollend = scrollendUpdater; +window.onresize = scrollUpdater; +window.onscroll = scrollUpdater; +window.onscrollend = scrollendUpdater; diff --git a/visual-viewport-api/style.css b/visual-viewport-api/style.css new file mode 100644 index 0000000..4cd5d63 --- /dev/null +++ b/visual-viewport-api/style.css @@ -0,0 +1,23 @@ +html { + font-family: sans-serif; + height: 2000px; + width: 4000px; +} + +p { + margin: 0; +} + +#instructions { + position: relative; + top: 90px; +} + +#output { + position: fixed; + top: 10px; + left: 10px; + border: solid 1px green; + background: lime; + padding: 5px; +}