Add visual viewport API demo (#279)

* Add visual viewport API demo * Simplify example code * Couple of small tweaks
mdn · Aug 26, 2024 · aa3dd78 · aa3dd78
1 parent 08dadaa
commit aa3dd78
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 0 deletions.
diff --git 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
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>Visual Viewport API example</title>
+  <script async src="main.js"></script>
+  <link href="style.css" rel="stylesheet" type="text/css">
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+</head>
+
+<body>
+  <p id="instructions">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.</p>
+  <div id="output">
+    <p id="visual-info"></p>
+    <hr>
+    <p id="window-info"></p>
+  </div>
+</body>
+
+</html>
diff --git a/visual-viewport-api/main.js 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
@@ -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;
+}