X-Git-Url: https://git.distorted.org.uk/~mdw/tgal/blobdiff_plain/6e749fabbf4a2758454db148bd366367069142c5..1408b7a293e5a35d99744aaa51192eab972a95a1:/static/tgal.js

diff --git a/static/tgal.js b/static/tgal.js
index de05593..e77973b 100644
--- a/static/tgal.js
+++ b/static/tgal.js
@@ -42,14 +42,34 @@ addEventListener("keydown", function (ev) {
 
 /* Scroll the thumbnail strip so that the current image is in the middle. */
 (function () {
-  var strip = document.querySelector("div.thumbstrip");
-  var focus = document.querySelector("#focusthumb");
-  if (strip && focus) {
-    var stripbox = strip.getBoundingClientRect();
-    var focusbox = focus.getBoundingClientRect();
-    strip.scrollLeft +=
-      (focusbox.x - stripbox.x) -
-      (stripbox.width - focusbox.width)/2;
+  var obs = null;
+
+  var scroll = function(strip) {
+    var focus = strip.querySelector("figure.focusthumb");
+    if (focus) {
+      var stripbox = strip.getBoundingClientRect();
+      var focusbox = focus.getBoundingClientRect();
+      strip.scrollLeft +=
+	(focusbox.x - stripbox.x) -
+	(stripbox.width - focusbox.width)/2;
+    }
+  };
+
+  var strips = document.querySelectorAll("div.thumbstrip");
+  if (window.IntersectionObserver) {
+    obs = new IntersectionObserver(function (ee) {
+      ee.forEach(function (e) {
+	if (e.isIntersecting) {
+	  obs.unobserve(e.target);
+	  scroll(e.target);
+	}
+      });
+    }, {
+      root: document.querySelector("html")
+    });
+    strips.forEach(function (strip) { obs.observe(strip); });
+  } else {
+    strips.forEach(scroll);
   }
 })();