- 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);