https://webers-family.de/gallery/index.html

1<!DOCTYPE html>
2<html lang="de">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Galerie - Familie Weber | webbis.de</title>
7  <meta name="description" content="Fotoalben der Familie Weber auf webbis.de.">
8  <style>
9    html,
10    body,
11    .gallery-embed {
12      width: 100%;
13      min-height: 100%;
14      margin: 0;
15      border: 0;
16    }
17
18    /* Keeps the browser from scrolling back down while the iframe grows. */
19    html,
20    body {
21      overflow-anchor: none;
22    }
23
24    .gallery-embed {
25      display: block;
26      min-height: 100vh;
27    }
28  </style>
29</head>
30<body>
31  <iframe class="gallery-embed" src="index.php" title="Galerie der Familie Weber"></iframe>
32
33  

33<script>
34    (function() {
35      var frame = document.querySelector('.gallery-embed');
36
37      function adjustHeight() {
38        try {
39          var documentElement = frame.contentDocument.documentElement;
40          var body = frame.contentDocument.body;
41          frame.style.height = Math.max(
42            documentElement.scrollHeight,
43            documentElement.offsetHeight,
44            body.scrollHeight,
45            body.offsetHeight,
46            window.innerHeight
47          ) + 'px';
48        }
49        catch(error) {
50          frame.style.height = '100vh';
51        }
52      }
53
54      frame.addEventListener('load', function() {
55        adjustHeight();
56        observeContent();
57      });
58      window.addEventListener('resize', adjustHeight);
59
60      var contentObserver = null;
61
62      // Lazy-loaded images change the document height long after the load event.
63      function observeContent() {
64        if(!window.ResizeObserver) return;
65
66        try {
67          if(contentObserver) contentObserver.disconnect();
68          contentObserver = new ResizeObserver(adjustHeight);
69          contentObserver.observe(frame.contentDocument.documentElement);
70        }
71        catch(error) {
72          contentObserver = null;
73        }
74      }
75
76      var keepTopUntil = 0;
77      var lastHeight = 0;
78
79      function releaseTop() {
80        keepTopUntil = 0;
81      }
82
83      ['wheel', 'touchstart', 'keydown', 'pointerdown'].forEach(function(type) {
84        window.addEventListener(type, releaseTop, { passive: true });
85      });
86
87      // Lazy-loaded images keep changing the iframe height, so re-apply the top position
88      // only while that height is still moving. Any scrolling at a stable height is the user's.
89      function keepAtTop() {
90        adjustHeight();
91
92        var height = document.documentElement.scrollHeight;
93        var grew = height !== lastHeight;
94        lastHeight = height;
95
96        if(window.scrollY !== 0) {
97          if(!grew) return releaseTop();
98          window.scrollTo(0, 0);
99        }
100
101        if(Date.now() < keepTopUntil) window.requestAnimationFrame(keepAtTop);
102      }
103
104      window.addEventListener('message', function(event) {
105        if(event.origin !== window.location.origin || event.source !== frame.contentWindow) return;
106        if(!event.data) return;
107
108        if(event.data.type === 'gallery-user-input') {
109          releaseTop();
110          return;
111        }
112
113        if(event.data.type !== 'gallery-scroll-top') return;
114
115        keepTopUntil = Date.now() + 1200;
116        lastHeight = 0;
117        window.scrollTo(0, 0);
118        keepAtTop();
119      });
120    }());
121  </script>

121
122</body>
123</html>