seamless-scroll-polyfill - npm Package Compare versions

Comparing version 1.2.3 to 1.2.4

dist/cjs/Element.scrollIntoView.js

@@ -6,37 +6,105 @@ "use strict";
 const Element_scroll_js_1 = require("./Element.scroll.js");
-// https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/dom/element.cc?l=647-681&rcl=02a6466f4efa021e4e198f373eccda3cfc56142b
-const toPhysicalAlignment = (options, axis, isHorizontalWritingMode, isFlippedBlocksMode) => {
-    const alignment = (axis === 0 /* HorizontalScroll */ && isHorizontalWritingMode) ||
-        (axis === 1 /* VerticalScroll */ && !isHorizontalWritingMode)
-        ? options.inline
-        : options.block;
-    if (alignment === "center") {
-        return 1 /* AlignCenterAlways */;
+// https://drafts.csswg.org/css-writing-modes-4/#block-flow
+const normalizeWritingMode = (writingMode) => {
+    switch (writingMode) {
+        case "horizontal-tb":
+        case "lr":
+        case "lr-tb":
+        case "rl":
+        case "rl-tb":
+            return 0 /* HorizontalTb */;
+        case "vertical-rl":
+        case "tb":
+        case "tb-rl":
+            return 1 /* VerticalRl */;
+        case "vertical-lr":
+        case "tb-lr":
+            return 2 /* VerticalLr */;
+        case "sideways-rl":
+            return 3 /* SidewaysRl */;
+        case "sideways-lr":
+            return 4 /* SidewaysLr */;
     }
-    if (alignment === "nearest") {
-        return 0 /* AlignToEdgeIfNeeded */;
+    return 0 /* HorizontalTb */;
+};
+// https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/dom/element.cc;l=1097-1189;drc=6a7533d4a1e9f2372223a9d912a9e53a6fa35ae0
+const toPhysicalAlignment = (options, writingMode, isLTR) => {
+    let [xPos, yPos] = [options.block || "start", options.inline || "nearest"];
+    /**  0b{vertical}{horizontal}  0: normal, 1: reverse */
+    let layout = 0b00;
+    /**
+     * WritingMode.VerticalLr: ↓→
+     * | 1 | 4 |   |
+     * | 2 | 5 |   |
+     * | 3 |   |   |
+     *
+     * RTL: ↑→
+     * | 3 |   |   |
+     * | 2 | 5 |   |
+     * | 1 | 4 |   |
+     */
+    if (!isLTR) {
+        layout ^= 2 /* ReverseVertical */;
     }
-    if (alignment === "start") {
-        return axis === 0 /* HorizontalScroll */
-            ? isFlippedBlocksMode
-                ? 5 /* AlignRightAlways */
-                : 4 /* AlignLeftAlways */
-            : 2 /* AlignTopAlways */;
+    switch (writingMode) {
+        /**
+         * ↓→
+         * | 1 | 2 | 3 |
+         * | 4 | 5 |   |
+         * |   |   |   |
+         *
+         * RTL: ↓←
+         * | 3 | 2 | 1 |
+         * |   | 5 | 4 |
+         * |   |   |   |
+         */
+        case 0 /* HorizontalTb */:
+            // swap horizontal and vertical
+            layout = (layout >> 1) | ((layout & 1) << 1);
+            [xPos, yPos] = [yPos, xPos];
+            break;
+        /**
+         * ↓←
+         * |   | 4 | 1 |
+         * |   | 5 | 2 |
+         * |   |   | 3 |
+         *
+         * RTL: ↑←
+         * |   |   | 3 |
+         * |   | 5 | 2 |
+         * |   | 4 | 1 |
+         */
+        case 1 /* VerticalRl */:
+        case 3 /* SidewaysRl */:
+            //  reverse horizontal
+            layout ^= 1 /* ReverseHorizontal */;
+            break;
+        /**
+         * ↑→
+         * | 3 |   |   |
+         * | 2 | 5 |   |
+         * | 1 | 4 |   |
+         *
+         * RTL: ↓→
+         * | 1 | 4 |   |
+         * | 2 | 5 |   |
+         * | 3 |   |   |
+         */
+        case 4 /* SidewaysLr */:
+            // reverse vertical
+            layout ^= 2 /* ReverseVertical */;
+            break;
     }
-    if (alignment === "end") {
-        return axis === 0 /* HorizontalScroll */
-            ? isFlippedBlocksMode
-                ? 4 /* AlignLeftAlways */
-                : 5 /* AlignRightAlways */
-            : 3 /* AlignBottomAlways */;
-    }
-    // Default values
-    if (isHorizontalWritingMode) {
-        return axis === 0 /* HorizontalScroll */
-            ? 0 /* AlignToEdgeIfNeeded */
-            : 2 /* AlignTopAlways */;
-    }
-    return axis === 0 /* HorizontalScroll */
-        ? 4 /* AlignLeftAlways */
-        : 0 /* AlignToEdgeIfNeeded */;
+    return [xPos, yPos].map((value, index) => {
+        switch (value) {
+            case "center":
+                return 1 /* CenterAlways */;
+            case "nearest":
+                return 0 /* ToEdgeIfNeeded */;
+            default: {
+                const reverse = (layout >> index) & 1;
+                return (value === "start") === !reverse ? 2 /* LeftOrTop */ : 3 /* RightOrBottom */;
+            }
+        }
+    });
 };
@@ -170,6 +238,23 @@ // code from stipsan/compute-scroll-into-view
 };
-const isScrollable = (element) => {
+const getFrameElement = (element) => {
+    if (!element.ownerDocument || !element.ownerDocument.defaultView) {
+        return null;
+    }
+    try {
+        return element.ownerDocument.defaultView.frameElement;
+    }
+    catch (e) {
+        return null;
+    }
+};
+const isHiddenByFrame = (element) => {
+    const frame = getFrameElement(element);
+    if (!frame) {
+        return false;
+    }
+    return frame.clientHeight < element.scrollHeight || frame.clientWidth < element.scrollWidth;
+};
+const isScrollable = (element, computedStyle) => {
     if (element.clientHeight < element.scrollHeight || element.clientWidth < element.scrollWidth) {
-        const style = getComputedStyle(element);
-        return canOverflow(style.overflowY) || canOverflow(style.overflowX);
+        return canOverflow(computedStyle.overflowY) || canOverflow(computedStyle.overflowX) || isHiddenByFrame(element);
     }
@@ -180,9 +265,37 @@ return false;
     const parentNode = element.parentNode;
-    return (parentNode &&
-        (parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE
-            ? parentNode.host
-            : parentNode));
+    if (parentNode !== null && parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+        return parentNode.host;
+    }
+    return parentNode;
 };
+const clamp = (value, width) => {
+    if (value < -width) {
+        return -width;
+    }
+    if (value > width) {
+        return width;
+    }
+    return value;
+};
+const isCSSPropertySupported = (property) => property in document.documentElement.style;
+const getSupportedScrollMarginProperty = () => {
+    // Webkit uses "scroll-snap-margin" https://bugs.webkit.org/show_bug.cgi?id=189265.
+    return ["scroll-margin", "scroll-snap-margin"].filter(isCSSPropertySupported)[0];
+};
+const getElementScrollSnapArea = (element, computedStyle) => {
+    const { top, right, bottom, left } = element.getBoundingClientRect();
+    const [scrollMarginTop, scrollMarginRight, scrollMarginBottom, scrollMarginLeft] = [
+        "top",
+        "right",
+        "bottom",
+        "left",
+    ].map((edge) => {
+        const scrollProperty = getSupportedScrollMarginProperty();
+        const value = computedStyle.getPropertyValue(`${scrollProperty}-${edge}`);
+        return parseInt(value, 10) || 0;
+    });
+    return [top - scrollMarginTop, right + scrollMarginRight, bottom + scrollMarginBottom, left - scrollMarginLeft];
+};
 exports.elementScrollIntoView = (element, options) => {
-    if (!element.ownerDocument.documentElement.contains(element)) {
+    if (element.isConnected === false) {
         return;
@@ -198,2 +311,3 @@ }
     const frames = [];
+    const documentElementStyle = getComputedStyle(document.documentElement);
     for (let cursor = parentElement(element); cursor !== null; cursor = parentElement(cursor)) {
@@ -205,4 +319,7 @@ // Stop when we reach the viewport
         }
+        const cursorStyle = getComputedStyle(cursor);
         // Skip document.body if it's not the scrollingElement and documentElement isn't independently scrollable
-        if (cursor === document.body && isScrollable(cursor) && !isScrollable(document.documentElement)) {
+        if (cursor === document.body &&
+            isScrollable(cursor, cursorStyle) &&
+            !isScrollable(document.documentElement, documentElementStyle)) {
             continue;
@@ -212,5 +329,8 @@ }
         // this code only runs if the loop haven't already hit the viewport or a custom boundary
-        if (isScrollable(cursor)) {
+        if (isScrollable(cursor, cursorStyle)) {
             frames.push(cursor);
         }
+        if (cursorStyle.position === "fixed") {
+            break;
+        }
     }
@@ -228,22 +348,20 @@ // Support pinch-zooming properly, making sure elements scroll into the visual viewport
     const viewportY = window.scrollY || window.pageYOffset;
-    const { height: targetHeight, width: targetWidth, top: targetTop, right: targetRight, bottom: targetBottom, left: targetLeft, } = element.getBoundingClientRect();
     const computedStyle = getComputedStyle(element);
-    const writingMode = computedStyle.writingMode ||
+    const [targetTop, targetRight, targetBottom, targetLeft] = getElementScrollSnapArea(element, computedStyle);
+    const targetHeight = targetBottom - targetTop;
+    const targetWidth = targetRight - targetLeft;
+    const writingMode = normalizeWritingMode(computedStyle.writingMode ||
         computedStyle.getPropertyValue("-webkit-writing-mode") ||
-        computedStyle.getPropertyValue("-ms-writing-mode") ||
-        "horizontal-tb";
-    const isHorizontalWritingMode = ["horizontal-tb", "lr", "lr-tb", "rl"].some((mode) => mode === writingMode);
-    const isFlippedBlocksWritingMode = ["vertical-rl", "tb-rl"].some((mode) => mode === writingMode);
-    const alignX = toPhysicalAlignment(options, 0 /* HorizontalScroll */, isHorizontalWritingMode, isFlippedBlocksWritingMode);
-    const alignY = toPhysicalAlignment(options, 1 /* VerticalScroll */, isHorizontalWritingMode, isFlippedBlocksWritingMode);
+        computedStyle.getPropertyValue("-ms-writing-mode"));
+    const isLTR = computedStyle.direction !== "rtl";
+    const [alignX, alignY] = toPhysicalAlignment(options, writingMode, isLTR);
     let targetBlock = (() => {
         switch (alignY) {
-            case 2 /* AlignTopAlways */:
-            case 0 /* AlignToEdgeIfNeeded */:
+            case 1 /* CenterAlways */:
+                return targetTop + targetHeight / 2;
+            case 2 /* LeftOrTop */:
+            case 0 /* ToEdgeIfNeeded */:
                 return targetTop;
-            case 3 /* AlignBottomAlways */:
+            case 3 /* RightOrBottom */:
                 return targetBottom;
-            // case ScrollAlignment.AlignCenterAlways:
-            default:
-                return targetTop + targetHeight / 2;
         }
@@ -253,9 +371,8 @@ })();
         switch (alignX) {
-            case 1 /* AlignCenterAlways */:
+            case 1 /* CenterAlways */:
                 return targetLeft + targetWidth / 2;
-            case 5 /* AlignRightAlways */:
+            case 3 /* RightOrBottom */:
                 return targetRight;
-            // case ScrollAlignment.AlignLeftAlways:
-            // case ScrollAlignment.AlignToEdgeIfNeeded:
-            default:
+            case 2 /* LeftOrTop */:
+            case 0 /* ToEdgeIfNeeded */:
                 return targetLeft;
@@ -265,3 +382,3 @@ }
     const actions = [];
-    for (const frame of frames) {
+    frames.forEach((frame) => {
         const { height, width, top, right, bottom, left } = frame.getBoundingClientRect();
@@ -287,15 +404,15 @@ const frameStyle = getComputedStyle(frame);
             switch (alignY) {
-                case 2 /* AlignTopAlways */: {
+                case 2 /* LeftOrTop */: {
                     blockScroll = targetBlock;
                     break;
                 }
-                case 3 /* AlignBottomAlways */: {
+                case 3 /* RightOrBottom */: {
                     blockScroll = targetBlock - viewportHeight;
                     break;
                 }
-                case 1 /* AlignCenterAlways */: {
+                case 1 /* CenterAlways */: {
                     blockScroll = targetBlock - viewportHeight / 2;
                     break;
                 }
-                case 0 /* AlignToEdgeIfNeeded */: {
+                case 0 /* ToEdgeIfNeeded */: {
                     blockScroll = alignNearest(viewportY, viewportY + viewportHeight, viewportHeight, borderTop, borderBottom, viewportY + targetBlock, viewportY + targetBlock + targetHeight, targetHeight);
@@ -306,15 +423,15 @@ break;
             switch (alignX) {
-                case 4 /* AlignLeftAlways */: {
+                case 2 /* LeftOrTop */: {
                     inlineScroll = targetInline;
                     break;
                 }
-                case 5 /* AlignRightAlways */: {
+                case 3 /* RightOrBottom */: {
                     inlineScroll = targetInline - viewportWidth;
                     break;
                 }
-                case 1 /* AlignCenterAlways */: {
+                case 1 /* CenterAlways */: {
                     inlineScroll = targetInline - viewportWidth / 2;
                     break;
                 }
-                case 0 /* AlignToEdgeIfNeeded */: {
+                case 0 /* ToEdgeIfNeeded */: {
                     inlineScroll = alignNearest(viewportX, viewportX + viewportWidth, viewportWidth, borderLeft, borderRight, viewportX + targetInline, viewportX + targetInline + targetWidth, targetWidth);
@@ -324,5 +441,4 @@ break;
             }
-            // Apply scroll position offsets and ensure they are within bounds
-            blockScroll = Math.max(0, blockScroll + viewportY);
-            inlineScroll = Math.max(0, inlineScroll + viewportX);
+            blockScroll += viewportY;
+            inlineScroll += viewportX;
         }
@@ -332,15 +448,15 @@ else {
             switch (alignY) {
-                case 2 /* AlignTopAlways */: {
+                case 2 /* LeftOrTop */: {
                     blockScroll = targetBlock - top - borderTop;
                     break;
                 }
-                case 3 /* AlignBottomAlways */: {
+                case 3 /* RightOrBottom */: {
                     blockScroll = targetBlock - bottom + borderBottom + scrollbarHeight;
                     break;
                 }
-                case 1 /* AlignCenterAlways */: {
+                case 1 /* CenterAlways */: {
                     blockScroll = targetBlock - (top + height / 2) + scrollbarHeight / 2;
                     break;
                 }
-                case 0 /* AlignToEdgeIfNeeded */: {
+                case 0 /* ToEdgeIfNeeded */: {
                     blockScroll = alignNearest(top, bottom, height, borderTop, borderBottom + scrollbarHeight, targetBlock, targetBlock + targetHeight, targetHeight);
@@ -351,15 +467,15 @@ break;
             switch (alignX) {
-                case 4 /* AlignLeftAlways */: {
+                case 2 /* LeftOrTop */: {
                     inlineScroll = targetInline - left - borderLeft;
                     break;
                 }
-                case 5 /* AlignRightAlways */: {
+                case 3 /* RightOrBottom */: {
                     inlineScroll = targetInline - right + borderRight + scrollbarWidth;
                     break;
                 }
-                case 1 /* AlignCenterAlways */: {
+                case 1 /* CenterAlways */: {
                     inlineScroll = targetInline - (left + width / 2) + scrollbarWidth / 2;
                     break;
                 }
-                case 0 /* AlignToEdgeIfNeeded */: {
+                case 0 /* ToEdgeIfNeeded */: {
                     inlineScroll = alignNearest(left, right, width, borderLeft, borderRight + scrollbarWidth, targetInline, targetInline + targetWidth, targetWidth);
@@ -371,4 +487,4 @@ break;
             // Ensure scroll coordinates are not out of bounds while applying scroll offsets
-            blockScroll = Math.max(0, Math.min(scrollTop + blockScroll, frame.scrollHeight - height + scrollbarHeight));
-            inlineScroll = Math.max(0, Math.min(scrollLeft + inlineScroll, frame.scrollWidth - width + scrollbarWidth));
+            blockScroll = clamp(scrollTop + blockScroll, frame.scrollHeight - height + scrollbarHeight);
+            inlineScroll = clamp(scrollLeft + inlineScroll, frame.scrollWidth - width + scrollbarWidth);
             // Cache the offset so that parent frames can scroll this into view correctly
@@ -379,3 +495,3 @@ targetBlock += scrollTop - blockScroll;
         actions.push(() => Element_scroll_js_1.elementScroll(frame, Object.assign(Object.assign({}, options), { top: blockScroll, left: inlineScroll })));
-    }
+    });
     actions.forEach((run) => run());
@@ -382,0 +498,0 @@ };

dist/es5/seamless.auto-polyfill.min.js

@@ -1,2 +0,2 @@
-(function(a){"function"==typeof define&&define.amd?define(a):a()})(function(){'use strict';function a(a){var b="function"==typeof Symbol&&Symbol.iterator,c=b&&a[b],d=0;if(c)return c.call(a);if(a&&"number"==typeof a.length)return{next:function(){return a&&d>=a.length&&(a=void 0),{value:a&&a[d++],done:!a}}};throw new TypeError(b?"Object is not iterable.":"Symbol.iterator is not defined.")}var b=function(a){return .5*(1-Math.cos(Math.PI*a))},c=function(){return"scrollBehavior"in document.documentElement.style},d={_elementScroll:void 0,get elementScroll(){return this._elementScroll||(this._elementScroll=HTMLElement.prototype.scroll||HTMLElement.prototype.scrollTo||function(a,b){this.scrollLeft=a,this.scrollTop=b})},_elementScrollIntoView:void 0,get elementScrollIntoView(){return this._elementScrollIntoView||(this._elementScrollIntoView=HTMLElement.prototype.scrollIntoView)},_windowScroll:void 0,get windowScroll(){return this._windowScroll||(this._windowScroll=window.scroll||window.scrollTo)}},e=function(a){var b=[HTMLElement.prototype,SVGElement.prototype,Element.prototype];b.forEach(function(b){return a(b)})},f=function(){var a,b,c;return null!==(c=null===(b=null===(a=window.performance)||void 0===a?void 0:a.now)||void 0===b?void 0:b.call(a))&&void 0!==c?c:Date.now()},g=function(a){var c=f(),d=(c-a.timeStamp)/(a.duration||500);if(1<d)return a.method(a.targetX,a.targetY),void a.callback();var e=(a.timingFunc||b)(d),h=a.startX+(a.targetX-a.startX)*e,i=a.startY+(a.targetY-a.startY)*e;a.method(h,i),a.rafId=requestAnimationFrame(function(){g(a)})},h=function(a){return isFinite(a)?+a:0},i=function(a){var b=typeof a;return null!==a&&("object"===b||"function"===b)},j=function(){return j=Object.assign||function(a){for(var b,c=1,d=arguments.length;c<d;c++)for(var e in b=arguments[c],b)Object.prototype.hasOwnProperty.call(b,e)&&(a[e]=b[e]);return a},j.apply(this,arguments)},k=function(a,b){var c,e,i=d.elementScroll.bind(a);if(void 0!==b.left||void 0!==b.top){var j=a.scrollLeft,k=a.scrollTop,l=h(null!==(c=b.left)&&void 0!==c?c:j),m=h(null!==(e=b.top)&&void 0!==e?e:k);if("smooth"!==b.behavior)return i(l,m);var n=function(){window.removeEventListener("wheel",p),window.removeEventListener("touchmove",p)},o={timeStamp:f(),duration:b.duration,startX:j,startY:k,targetX:l,targetY:m,rafId:0,method:i,timingFunc:b.timingFunc,callback:n},p=function(){cancelAnimationFrame(o.rafId),n()};window.addEventListener("wheel",p,{passive:!0,once:!0}),window.addEventListener("touchmove",p,{passive:!0,once:!0}),g(o)}},l=function(a){if(!c()){var b=d.elementScroll;e(function(c){return c.scroll=function(){if(1===arguments.length){var c=arguments[0];if(!i(c))throw new TypeError("Failed to execute 'scroll' on 'Element': parameter 1 ('options') is not an object.");return k(this,j(j({},c),a))}return b.apply(this,arguments)}})}},m=function(a,b){var c=h(b.left||0)+a.scrollLeft,d=h(b.top||0)+a.scrollTop;return k(a,j(j({},b),{left:c,top:d}))},n=function(a){c()||e(function(b){return b.scrollBy=function(){if(1===arguments.length){var b=arguments[0];if(!i(b))throw new TypeError("Failed to execute 'scrollBy' on 'Element': parameter 1 ('options') is not an object.");return m(this,j(j({},b),a))}var c=+arguments[0],d=+arguments[1];return m(this,{left:c,top:d})}})},o=function(a,b,c,d){var e=0===b&&c||1===b&&!c?a.inline:a.block;return"center"===e?1:"nearest"===e?0:"start"===e?0===b?d?5:4:2:"end"===e?0===b?d?4:5:3:c?0===b?0:2:0===b?4:0},p=function(a,b,c,d,e,f,g,h){return f<a&&g>b||f>a&&g<b?0:f<=a&&h<=c||g>=b&&h>=c?f-a-d:g>b&&h<c||f<a&&h>c?g-b+e:0},q=function(a){return"visible"!==a&&"clip"!==a},r=function(a){if(a.clientHeight<a.scrollHeight||a.clientWidth<a.scrollWidth){var b=getComputedStyle(a);return q(b.overflowY)||q(b.overflowX)}return!1},s=function(a){var b=a.parentNode;return b&&(b.nodeType===Node.DOCUMENT_FRAGMENT_NODE?b.host:b)},t=function(b,c){var d,e;if(b.ownerDocument.documentElement.contains(b)){for(var f=document.scrollingElement||document.documentElement,g=[],h=s(b);null!==h;h=s(h)){if(h===f){g.push(h);break}(h!==document.body||!r(h)||r(document.documentElement))&&r(h)&&g.push(h)}var i=window.visualViewport?window.visualViewport.width:innerWidth,l=window.visualViewport?window.visualViewport.height:innerHeight,m=window.scrollX||window.pageXOffset,n=window.scrollY||window.pageYOffset,q=b.getBoundingClientRect(),t=q.height,u=q.width,v=q.top,w=q.right,x=q.bottom,y=q.left,z=getComputedStyle(b),A=z.writingMode||z.getPropertyValue("-webkit-writing-mode")||z.getPropertyValue("-ms-writing-mode")||"horizontal-tb",B=["horizontal-tb","lr","lr-tb","rl"].some(function(a){return a===A}),C=["vertical-rl","tb-rl"].some(function(a){return a===A}),D=o(c,0,B,C),E=o(c,1,B,C),F=function(){return 2===E||0===E?v:3===E?x:v+t/2}(),G=function(){return 1===D?y+u/2:5===D?w:y}(),H=[],I=function(a){var b=Math.min,d=Math.max,e=a.getBoundingClientRect(),g=e.height,h=e.width,o=e.top,q=e.right,r=e.bottom,s=e.left,v=getComputedStyle(a),w=parseInt(v.borderLeftWidth,10),x=parseInt(v.borderTopWidth,10),y=parseInt(v.borderRightWidth,10),z=parseInt(v.borderBottomWidth,10),A=0,B=0,C="offsetWidth"in a?a.offsetWidth-a.clientWidth-w-y:0,I="offsetHeight"in a?a.offsetHeight-a.clientHeight-x-z:0;if(f===a){switch(E){case 2:{A=F;break}case 3:{A=F-l;break}case 1:{A=F-l/2;break}case 0:{A=p(n,n+l,l,x,z,n+F,n+F+t,t);break}}switch(D){case 4:{B=G;break}case 5:{B=G-i;break}case 1:{B=G-i/2;break}case 0:{B=p(m,m+i,i,w,y,m+G,m+G+u,u);break}}A=d(0,A+n),B=d(0,B+m)}else{switch(E){case 2:{A=F-o-x;break}case 3:{A=F-r+z+I;break}case 1:{A=F-(o+g/2)+I/2;break}case 0:{A=p(o,r,g,x,z+I,F,F+t,t);break}}switch(D){case 4:{B=G-s-w;break}case 5:{B=G-q+y+C;break}case 1:{B=G-(s+h/2)+C/2;break}case 0:{B=p(s,q,h,w,y+C,G,G+u,u);break}}var J=a.scrollLeft,K=a.scrollTop;A=d(0,b(K+A,a.scrollHeight-g+I)),B=d(0,b(J+B,a.scrollWidth-h+C)),F+=K-A,G+=J-B}H.push(function(){return k(a,j(j({},c),{top:A,left:B}))})};try{for(var J,K=a(g),L=K.next();!L.done;L=K.next())J=L.value,I(J)}catch(a){d={error:a}}finally{try{L&&!L.done&&(e=K.return)&&e.call(K)}finally{if(d)throw d.error}}H.forEach(function(a){return a()})}},u=function(a){if(!c()){var b=d.elementScrollIntoView;e(function(c){return c.scrollIntoView=function(){var c=arguments[0];return 1===arguments.length&&i(c)?t(this,j(j({},c),a)):b.apply(this,arguments)}})}},v=function(a){if(!c()){var b=d.elementScroll;e(function(c){return c.scrollTo=function(){if(1===arguments.length){var c=arguments[0];if(!i(c))throw new TypeError("Failed to execute 'scrollTo' on 'Element': parameter 1 ('options') is not an object.");var d=+c.left,e=+c.top;return k(this,j(j(j({},c),{left:d,top:e}),a))}return b.apply(this,arguments)}})}},w=function(a){var b,c,e=d.windowScroll.bind(window);if(void 0!==a.left||void 0!==a.top){var i=window.scrollX||window.pageXOffset,j=window.scrollY||window.pageYOffset,k=h(null!==(b=a.left)&&void 0!==b?b:i),l=h(null!==(c=a.top)&&void 0!==c?c:j);if("smooth"!==a.behavior)return e(k,l);var m=function(){window.removeEventListener("wheel",o),window.removeEventListener("touchmove",o)},n={timeStamp:f(),duration:a.duration,startX:i,startY:j,targetX:k,targetY:l,rafId:0,method:e,timingFunc:a.timingFunc,callback:m},o=function(){cancelAnimationFrame(n.rafId),m()};window.addEventListener("wheel",o,{passive:!0,once:!0}),window.addEventListener("touchmove",o,{passive:!0,once:!0}),g(n)}},x=function(a){if(!c()){var b=d.windowScroll;window.scroll=function(){if(1===arguments.length){var c=arguments[0];if(!i(c))throw new TypeError("Failed to execute 'scroll' on 'Window': parameter 1 ('options') is not an object.");return w(j(j({},c),a))}return b.apply(this,arguments)}}},y=function(a){var b=h(a.left||0)+(window.scrollX||window.pageXOffset),c=h(a.top||0)+(window.scrollY||window.pageYOffset);return"smooth"===a.behavior?w(j(j({},a),{left:b,top:c})):d.windowScroll.call(window,b,c)},z=function(a){c()||(window.scrollBy=function(){if(1===arguments.length){var b=arguments[0];if(!i(b))throw new TypeError("Failed to execute 'scrollBy' on 'Window': parameter 1 ('options') is not an object.");return y(j(j({},b),a))}var c=+arguments[0],d=+arguments[1];return y({left:c,top:d})})},A=function(a){if(!c()){var b=d.windowScroll;window.scrollTo=function(){if(1===arguments.length){var c=arguments[0];if(!i(c))throw new TypeError("Failed to execute 'scrollTo' on 'Window': parameter 1 ('options') is not an object.");var d=+c.left,e=+c.top;return w(j(j(j({},c),{left:d,top:e}),a))}return b.apply(this,arguments)}}},B=function(a){c()||(x(a),A(a),z(a),l(a),v(a),n(a),u(a))};(function(a){if(a){var b=~~a.dataset.duration;b=0<b?b:void 0,B({duration:b})}})(document.currentScript||document.querySelector("script[data-seamless]"))});
+(function(a){"function"==typeof define&&define.amd?define(a):a()})(function(){'use strict';function a(a,b){var c="function"==typeof Symbol&&a[Symbol.iterator];if(!c)return a;var d,f,g=c.call(a),h=[];try{for(;(void 0===b||0<b--)&&!(d=g.next()).done;)h.push(d.value)}catch(a){f={error:a}}finally{try{d&&!d.done&&(c=g["return"])&&c.call(g)}finally{if(f)throw f.error}}return h}var b=function(a){return .5*(1-Math.cos(Math.PI*a))},c=function(){return"scrollBehavior"in document.documentElement.style},d={_elementScroll:void 0,get elementScroll(){return this._elementScroll||(this._elementScroll=HTMLElement.prototype.scroll||HTMLElement.prototype.scrollTo||function(a,b){this.scrollLeft=a,this.scrollTop=b})},_elementScrollIntoView:void 0,get elementScrollIntoView(){return this._elementScrollIntoView||(this._elementScrollIntoView=HTMLElement.prototype.scrollIntoView)},_windowScroll:void 0,get windowScroll(){return this._windowScroll||(this._windowScroll=window.scroll||window.scrollTo)}},e=function(a){var b=[HTMLElement.prototype,SVGElement.prototype,Element.prototype];b.forEach(function(b){return a(b)})},f=function(){var a,b,c;return null!==(c=null===(b=null===(a=window.performance)||void 0===a?void 0:a.now)||void 0===b?void 0:b.call(a))&&void 0!==c?c:Date.now()},g=function(a){var c=f(),d=(c-a.timeStamp)/(a.duration||500);if(1<d)return a.method(a.targetX,a.targetY),void a.callback();var e=(a.timingFunc||b)(d),h=a.startX+(a.targetX-a.startX)*e,i=a.startY+(a.targetY-a.startY)*e;a.method(h,i),a.rafId=requestAnimationFrame(function(){g(a)})},h=function(a){return isFinite(a)?+a:0},i=function(a){var b=typeof a;return null!==a&&("object"===b||"function"===b)},j=function(){return j=Object.assign||function(a){for(var b,c=1,d=arguments.length;c<d;c++)for(var e in b=arguments[c],b)Object.prototype.hasOwnProperty.call(b,e)&&(a[e]=b[e]);return a},j.apply(this,arguments)},k=function(a,b){var c,e,i=d.elementScroll.bind(a);if(void 0!==b.left||void 0!==b.top){var j=a.scrollLeft,k=a.scrollTop,l=h(null!==(c=b.left)&&void 0!==c?c:j),m=h(null!==(e=b.top)&&void 0!==e?e:k);if("smooth"!==b.behavior)return i(l,m);var n=function(){window.removeEventListener("wheel",p),window.removeEventListener("touchmove",p)},o={timeStamp:f(),duration:b.duration,startX:j,startY:k,targetX:l,targetY:m,rafId:0,method:i,timingFunc:b.timingFunc,callback:n},p=function(){cancelAnimationFrame(o.rafId),n()};window.addEventListener("wheel",p,{passive:!0,once:!0}),window.addEventListener("touchmove",p,{passive:!0,once:!0}),g(o)}},l=function(a){if(!c()){var b=d.elementScroll;e(function(c){return c.scroll=function(){if(1===arguments.length){var c=arguments[0];if(!i(c))throw new TypeError("Failed to execute 'scroll' on 'Element': parameter 1 ('options') is not an object.");return k(this,j(j({},c),a))}return b.apply(this,arguments)}})}},m=function(a,b){var c=h(b.left||0)+a.scrollLeft,d=h(b.top||0)+a.scrollTop;return k(a,j(j({},b),{left:c,top:d}))},n=function(a){c()||e(function(b){return b.scrollBy=function(){if(1===arguments.length){var b=arguments[0];if(!i(b))throw new TypeError("Failed to execute 'scrollBy' on 'Element': parameter 1 ('options') is not an object.");return m(this,j(j({},b),a))}var c=+arguments[0],d=+arguments[1];return m(this,{left:c,top:d})}})},o=function(a){return"horizontal-tb"===a||"lr"===a||"lr-tb"===a||"rl"===a||"rl-tb"===a?0:"vertical-rl"===a||"tb"===a||"tb-rl"===a?1:"vertical-lr"===a||"tb-lr"===a?2:"sideways-rl"===a?3:"sideways-lr"===a?4:0},p=function(b,c,d){var e,f=a([b.block||"start",b.inline||"nearest"],2),g=f[0],h=f[1],i=0;return d||(i^=2),0===c?(i=i>>1|(1&i)<<1,e=a([h,g],2),g=e[0],h=e[1]):1===c||3===c?i^=1:4===c?i^=2:void 0,[g,h].map(function(a,b){switch(a){case"center":return 1;case"nearest":return 0;default:{var c=1&i>>b;return"start"===a==!c?2:3}}})},q=function(a,b,c,d,e,f,g,h){return f<a&&g>b||f>a&&g<b?0:f<=a&&h<=c||g>=b&&h>=c?f-a-d:g>b&&h<c||f<a&&h>c?g-b+e:0},r=function(a){return"visible"!==a&&"clip"!==a},s=function(a){if(!a.ownerDocument||!a.ownerDocument.defaultView)return null;try{return a.ownerDocument.defaultView.frameElement}catch(a){return null}},t=function(a){var b=s(a);return!!b&&(b.clientHeight<a.scrollHeight||b.clientWidth<a.scrollWidth)},u=function(a,b){return!!(a.clientHeight<a.scrollHeight||a.clientWidth<a.scrollWidth)&&(r(b.overflowY)||r(b.overflowX)||t(a))},v=function(a){var b=a.parentNode;return null!==b&&b.nodeType===Node.DOCUMENT_FRAGMENT_NODE?b.host:b},w=function(a,b){return a<-b?-b:a>b?b:a},x=function(a){return a in document.documentElement.style},y=function(){return["scroll-margin","scroll-snap-margin"].filter(x)[0]},z=function(b,c){var d=b.getBoundingClientRect(),e=d.top,f=d.right,g=d.bottom,h=d.left,i=a(["top","right","bottom","left"].map(function(a){var b=y(),d=c.getPropertyValue(b+"-"+a);return parseInt(d,10)||0}),4),j=i[0],k=i[1],l=i[2],m=i[3];return[e-j,f+k,g+l,h-m]},A=function(b,c){if(!1!==b.isConnected){for(var d=document.scrollingElement||document.documentElement,e=[],f=getComputedStyle(document.documentElement),g=v(b);null!==g;g=v(g)){if(g===d){e.push(g);break}var h=getComputedStyle(g);if((g!==document.body||!u(g,h)||u(document.documentElement,f))&&(u(g,h)&&e.push(g),"fixed"===h.position))break}var i=window.visualViewport?window.visualViewport.width:innerWidth,l=window.visualViewport?window.visualViewport.height:innerHeight,m=window.scrollX||window.pageXOffset,n=window.scrollY||window.pageYOffset,r=getComputedStyle(b),s=a(z(b,r),4),t=s[0],x=s[1],y=s[2],A=s[3],B=y-t,C=x-A,D=o(r.writingMode||r.getPropertyValue("-webkit-writing-mode")||r.getPropertyValue("-ms-writing-mode")),E="rtl"!==r.direction,F=a(p(c,D,E),2),G=F[0],H=F[1],I=function(){return 1===H?t+B/2:2===H||0===H?t:3===H?y:void 0}(),J=function(){return 1===G?A+C/2:3===G?x:2===G||0===G?A:void 0}(),K=[];e.forEach(function(a){var b=a.getBoundingClientRect(),e=b.height,f=b.width,g=b.top,h=b.right,o=b.bottom,p=b.left,r=getComputedStyle(a),s=parseInt(r.borderLeftWidth,10),t=parseInt(r.borderTopWidth,10),u=parseInt(r.borderRightWidth,10),v=parseInt(r.borderBottomWidth,10),x=0,y=0,z="offsetWidth"in a?a.offsetWidth-a.clientWidth-s-u:0,A="offsetHeight"in a?a.offsetHeight-a.clientHeight-t-v:0;if(d===a){switch(H){case 2:{x=I;break}case 3:{x=I-l;break}case 1:{x=I-l/2;break}case 0:{x=q(n,n+l,l,t,v,n+I,n+I+B,B);break}}switch(G){case 2:{y=J;break}case 3:{y=J-i;break}case 1:{y=J-i/2;break}case 0:{y=q(m,m+i,i,s,u,m+J,m+J+C,C);break}}x+=n,y+=m}else{switch(H){case 2:{x=I-g-t;break}case 3:{x=I-o+v+A;break}case 1:{x=I-(g+e/2)+A/2;break}case 0:{x=q(g,o,e,t,v+A,I,I+B,B);break}}switch(G){case 2:{y=J-p-s;break}case 3:{y=J-h+u+z;break}case 1:{y=J-(p+f/2)+z/2;break}case 0:{y=q(p,h,f,s,u+z,J,J+C,C);break}}var D=a.scrollLeft,E=a.scrollTop;x=w(E+x,a.scrollHeight-e+A),y=w(D+y,a.scrollWidth-f+z),I+=E-x,J+=D-y}K.push(function(){return k(a,j(j({},c),{top:x,left:y}))})}),K.forEach(function(a){return a()})}},B=function(a){if(!c()){var b=d.elementScrollIntoView;e(function(c){return c.scrollIntoView=function(){var c=arguments[0];return 1===arguments.length&&i(c)?A(this,j(j({},c),a)):b.apply(this,arguments)}})}},C=function(a){if(!c()){var b=d.elementScroll;e(function(c){return c.scrollTo=function(){if(1===arguments.length){var c=arguments[0];if(!i(c))throw new TypeError("Failed to execute 'scrollTo' on 'Element': parameter 1 ('options') is not an object.");var d=+c.left,e=+c.top;return k(this,j(j(j({},c),{left:d,top:e}),a))}return b.apply(this,arguments)}})}},D=function(a){var b,c,e=d.windowScroll.bind(window);if(void 0!==a.left||void 0!==a.top){var i=window.scrollX||window.pageXOffset,j=window.scrollY||window.pageYOffset,k=h(null!==(b=a.left)&&void 0!==b?b:i),l=h(null!==(c=a.top)&&void 0!==c?c:j);if("smooth"!==a.behavior)return e(k,l);var m=function(){window.removeEventListener("wheel",o),window.removeEventListener("touchmove",o)},n={timeStamp:f(),duration:a.duration,startX:i,startY:j,targetX:k,targetY:l,rafId:0,method:e,timingFunc:a.timingFunc,callback:m},o=function(){cancelAnimationFrame(n.rafId),m()};window.addEventListener("wheel",o,{passive:!0,once:!0}),window.addEventListener("touchmove",o,{passive:!0,once:!0}),g(n)}},E=function(a){if(!c()){var b=d.windowScroll;window.scroll=function(){if(1===arguments.length){var c=arguments[0];if(!i(c))throw new TypeError("Failed to execute 'scroll' on 'Window': parameter 1 ('options') is not an object.");return D(j(j({},c),a))}return b.apply(this,arguments)}}},F=function(a){var b=h(a.left||0)+(window.scrollX||window.pageXOffset),c=h(a.top||0)+(window.scrollY||window.pageYOffset);return"smooth"===a.behavior?D(j(j({},a),{left:b,top:c})):d.windowScroll.call(window,b,c)},G=function(a){c()||(window.scrollBy=function(){if(1===arguments.length){var b=arguments[0];if(!i(b))throw new TypeError("Failed to execute 'scrollBy' on 'Window': parameter 1 ('options') is not an object.");return F(j(j({},b),a))}var c=+arguments[0],d=+arguments[1];return F({left:c,top:d})})},H=function(a){if(!c()){var b=d.windowScroll;window.scrollTo=function(){if(1===arguments.length){var c=arguments[0];if(!i(c))throw new TypeError("Failed to execute 'scrollTo' on 'Window': parameter 1 ('options') is not an object.");var d=+c.left,e=+c.top;return D(j(j(j({},c),{left:d,top:e}),a))}return b.apply(this,arguments)}}},I=function(a){c()||(E(a),H(a),G(a),l(a),C(a),n(a),B(a))};(function(a){if(a){var b=~~a.dataset.duration;b=0<b?b:void 0,I({duration:b})}})(document.currentScript||document.querySelector("script[data-seamless]"))});
 //# sourceMappingURL=seamless.auto-polyfill.min.js.map

dist/es5/seamless.js

@@ -90,12 +90,17 @@ (function (global, factory) {
 
-    function __values(o) {
-        var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
-        if (m) return m.call(o);
-        if (o && typeof o.length === "number") return {
-            next: function () {
-                if (o && i >= o.length) o = void 0;
-                return { value: o && o[i++], done: !o };
+    function __read(o, n) {
+        var m = typeof Symbol === "function" && o[Symbol.iterator];
+        if (!m) return o;
+        var i = m.call(o), r, ar = [], e;
+        try {
+            while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+        }
+        catch (error) { e = { error: error }; }
+        finally {
+            try {
+                if (r && !r.done && (m = i["return"])) m.call(i);
             }
-        };
-        throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+            finally { if (e) throw e.error; }
+        }
+        return ar;
     }
@@ -190,37 +195,106 @@
 
-    // https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/dom/element.cc?l=647-681&rcl=02a6466f4efa021e4e198f373eccda3cfc56142b
-    var toPhysicalAlignment = function (options, axis, isHorizontalWritingMode, isFlippedBlocksMode) {
-        var alignment = (axis === 0 /* HorizontalScroll */ && isHorizontalWritingMode) ||
-            (axis === 1 /* VerticalScroll */ && !isHorizontalWritingMode)
-            ? options.inline
-            : options.block;
-        if (alignment === "center") {
-            return 1 /* AlignCenterAlways */;
+    // https://drafts.csswg.org/css-writing-modes-4/#block-flow
+    var normalizeWritingMode = function (writingMode) {
+        switch (writingMode) {
+            case "horizontal-tb":
+            case "lr":
+            case "lr-tb":
+            case "rl":
+            case "rl-tb":
+                return 0 /* HorizontalTb */;
+            case "vertical-rl":
+            case "tb":
+            case "tb-rl":
+                return 1 /* VerticalRl */;
+            case "vertical-lr":
+            case "tb-lr":
+                return 2 /* VerticalLr */;
+            case "sideways-rl":
+                return 3 /* SidewaysRl */;
+            case "sideways-lr":
+                return 4 /* SidewaysLr */;
         }
-        if (alignment === "nearest") {
-            return 0 /* AlignToEdgeIfNeeded */;
+        return 0 /* HorizontalTb */;
+    };
+    // https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/dom/element.cc;l=1097-1189;drc=6a7533d4a1e9f2372223a9d912a9e53a6fa35ae0
+    var toPhysicalAlignment = function (options, writingMode, isLTR) {
+        var _a;
+        var _b = __read([options.block || "start", options.inline || "nearest"], 2), xPos = _b[0], yPos = _b[1];
+        /**  0b{vertical}{horizontal}  0: normal, 1: reverse */
+        var layout = 0;
+        /**
+         * WritingMode.VerticalLr: ↓→
+         * | 1 | 4 |   |
+         * | 2 | 5 |   |
+         * | 3 |   |   |
+         *
+         * RTL: ↑→
+         * | 3 |   |   |
+         * | 2 | 5 |   |
+         * | 1 | 4 |   |
+         */
+        if (!isLTR) {
+            layout ^= 2 /* ReverseVertical */;
         }
-        if (alignment === "start") {
-            return axis === 0 /* HorizontalScroll */
-                ? isFlippedBlocksMode
-                    ? 5 /* AlignRightAlways */
-                    : 4 /* AlignLeftAlways */
-                : 2 /* AlignTopAlways */;
+        switch (writingMode) {
+            /**
+             * ↓→
+             * | 1 | 2 | 3 |
+             * | 4 | 5 |   |
+             * |   |   |   |
+             *
+             * RTL: ↓←
+             * | 3 | 2 | 1 |
+             * |   | 5 | 4 |
+             * |   |   |   |
+             */
+            case 0 /* HorizontalTb */:
+                // swap horizontal and vertical
+                layout = (layout >> 1) | ((layout & 1) << 1);
+                _a = __read([yPos, xPos], 2), xPos = _a[0], yPos = _a[1];
+                break;
+            /**
+             * ↓←
+             * |   | 4 | 1 |
+             * |   | 5 | 2 |
+             * |   |   | 3 |
+             *
+             * RTL: ↑←
+             * |   |   | 3 |
+             * |   | 5 | 2 |
+             * |   | 4 | 1 |
+             */
+            case 1 /* VerticalRl */:
+            case 3 /* SidewaysRl */:
+                //  reverse horizontal
+                layout ^= 1 /* ReverseHorizontal */;
+                break;
+            /**
+             * ↑→
+             * | 3 |   |   |
+             * | 2 | 5 |   |
+             * | 1 | 4 |   |
+             *
+             * RTL: ↓→
+             * | 1 | 4 |   |
+             * | 2 | 5 |   |
+             * | 3 |   |   |
+             */
+            case 4 /* SidewaysLr */:
+                // reverse vertical
+                layout ^= 2 /* ReverseVertical */;
+                break;
         }
-        if (alignment === "end") {
-            return axis === 0 /* HorizontalScroll */
-                ? isFlippedBlocksMode
-                    ? 4 /* AlignLeftAlways */
-                    : 5 /* AlignRightAlways */
-                : 3 /* AlignBottomAlways */;
-        }
-        // Default values
-        if (isHorizontalWritingMode) {
-            return axis === 0 /* HorizontalScroll */
-                ? 0 /* AlignToEdgeIfNeeded */
-                : 2 /* AlignTopAlways */;
-        }
-        return axis === 0 /* HorizontalScroll */
-            ? 4 /* AlignLeftAlways */
-            : 0 /* AlignToEdgeIfNeeded */;
+        return [xPos, yPos].map(function (value, index) {
+            switch (value) {
+                case "center":
+                    return 1 /* CenterAlways */;
+                case "nearest":
+                    return 0 /* ToEdgeIfNeeded */;
+                default: {
+                    var reverse = (layout >> index) & 1;
+                    return (value === "start") === !reverse ? 2 /* LeftOrTop */ : 3 /* RightOrBottom */;
+                }
+            }
+        });
     };
@@ -354,6 +428,23 @@ // code from stipsan/compute-scroll-into-view
     };
-    var isScrollable = function (element) {
+    var getFrameElement = function (element) {
+        if (!element.ownerDocument || !element.ownerDocument.defaultView) {
+            return null;
+        }
+        try {
+            return element.ownerDocument.defaultView.frameElement;
+        }
+        catch (e) {
+            return null;
+        }
+    };
+    var isHiddenByFrame = function (element) {
+        var frame = getFrameElement(element);
+        if (!frame) {
+            return false;
+        }
+        return frame.clientHeight < element.scrollHeight || frame.clientWidth < element.scrollWidth;
+    };
+    var isScrollable = function (element, computedStyle) {
         if (element.clientHeight < element.scrollHeight || element.clientWidth < element.scrollWidth) {
-            var style = getComputedStyle(element);
-            return canOverflow(style.overflowY) || canOverflow(style.overflowX);
+            return canOverflow(computedStyle.overflowY) || canOverflow(computedStyle.overflowX) || isHiddenByFrame(element);
         }
@@ -364,10 +455,37 @@ return false;
         var parentNode = element.parentNode;
-        return (parentNode &&
-            (parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE
-                ? parentNode.host
-                : parentNode));
+        if (parentNode !== null && parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+            return parentNode.host;
+        }
+        return parentNode;
     };
+    var clamp = function (value, width) {
+        if (value < -width) {
+            return -width;
+        }
+        if (value > width) {
+            return width;
+        }
+        return value;
+    };
+    var isCSSPropertySupported = function (property) { return property in document.documentElement.style; };
+    var getSupportedScrollMarginProperty = function () {
+        // Webkit uses "scroll-snap-margin" https://bugs.webkit.org/show_bug.cgi?id=189265.
+        return ["scroll-margin", "scroll-snap-margin"].filter(isCSSPropertySupported)[0];
+    };
+    var getElementScrollSnapArea = function (element, computedStyle) {
+        var _a = element.getBoundingClientRect(), top = _a.top, right = _a.right, bottom = _a.bottom, left = _a.left;
+        var _b = __read([
+            "top",
+            "right",
+            "bottom",
+            "left",
+        ].map(function (edge) {
+            var scrollProperty = getSupportedScrollMarginProperty();
+            var value = computedStyle.getPropertyValue(scrollProperty + "-" + edge);
+            return parseInt(value, 10) || 0;
+        }), 4), scrollMarginTop = _b[0], scrollMarginRight = _b[1], scrollMarginBottom = _b[2], scrollMarginLeft = _b[3];
+        return [top - scrollMarginTop, right + scrollMarginRight, bottom + scrollMarginBottom, left - scrollMarginLeft];
+    };
     var elementScrollIntoView = function (element, options) {
-        var e_1, _a;
-        if (!element.ownerDocument.documentElement.contains(element)) {
+        if (element.isConnected === false) {
             return;
@@ -383,2 +501,3 @@ }
         var frames = [];
+        var documentElementStyle = getComputedStyle(document.documentElement);
         for (var cursor = parentElement(element); cursor !== null; cursor = parentElement(cursor)) {
@@ -390,4 +509,7 @@ // Stop when we reach the viewport
             }
+            var cursorStyle = getComputedStyle(cursor);
             // Skip document.body if it's not the scrollingElement and documentElement isn't independently scrollable
-            if (cursor === document.body && isScrollable(cursor) && !isScrollable(document.documentElement)) {
+            if (cursor === document.body &&
+                isScrollable(cursor, cursorStyle) &&
+                !isScrollable(document.documentElement, documentElementStyle)) {
                 continue;
@@ -397,5 +519,8 @@ }
             // this code only runs if the loop haven't already hit the viewport or a custom boundary
-            if (isScrollable(cursor)) {
+            if (isScrollable(cursor, cursorStyle)) {
                 frames.push(cursor);
             }
+            if (cursorStyle.position === "fixed") {
+                break;
+            }
         }
@@ -413,22 +538,20 @@ // Support pinch-zooming properly, making sure elements scroll into the visual viewport
         var viewportY = window.scrollY || window.pageYOffset;
-        var _b = element.getBoundingClientRect(), targetHeight = _b.height, targetWidth = _b.width, targetTop = _b.top, targetRight = _b.right, targetBottom = _b.bottom, targetLeft = _b.left;
         var computedStyle = getComputedStyle(element);
-        var writingMode = computedStyle.writingMode ||
+        var _a = __read(getElementScrollSnapArea(element, computedStyle), 4), targetTop = _a[0], targetRight = _a[1], targetBottom = _a[2], targetLeft = _a[3];
+        var targetHeight = targetBottom - targetTop;
+        var targetWidth = targetRight - targetLeft;
+        var writingMode = normalizeWritingMode(computedStyle.writingMode ||
             computedStyle.getPropertyValue("-webkit-writing-mode") ||
-            computedStyle.getPropertyValue("-ms-writing-mode") ||
-            "horizontal-tb";
-        var isHorizontalWritingMode = ["horizontal-tb", "lr", "lr-tb", "rl"].some(function (mode) { return mode === writingMode; });
-        var isFlippedBlocksWritingMode = ["vertical-rl", "tb-rl"].some(function (mode) { return mode === writingMode; });
-        var alignX = toPhysicalAlignment(options, 0 /* HorizontalScroll */, isHorizontalWritingMode, isFlippedBlocksWritingMode);
-        var alignY = toPhysicalAlignment(options, 1 /* VerticalScroll */, isHorizontalWritingMode, isFlippedBlocksWritingMode);
+            computedStyle.getPropertyValue("-ms-writing-mode"));
+        var isLTR = computedStyle.direction !== "rtl";
+        var _b = __read(toPhysicalAlignment(options, writingMode, isLTR), 2), alignX = _b[0], alignY = _b[1];
         var targetBlock = (function () {
             switch (alignY) {
-                case 2 /* AlignTopAlways */:
-                case 0 /* AlignToEdgeIfNeeded */:
+                case 1 /* CenterAlways */:
+                    return targetTop + targetHeight / 2;
+                case 2 /* LeftOrTop */:
+                case 0 /* ToEdgeIfNeeded */:
                     return targetTop;
-                case 3 /* AlignBottomAlways */:
+                case 3 /* RightOrBottom */:
                     return targetBottom;
-                // case ScrollAlignment.AlignCenterAlways:
-                default:
-                    return targetTop + targetHeight / 2;
             }
@@ -438,9 +561,8 @@ })();
             switch (alignX) {
-                case 1 /* AlignCenterAlways */:
+                case 1 /* CenterAlways */:
                     return targetLeft + targetWidth / 2;
-                case 5 /* AlignRightAlways */:
+                case 3 /* RightOrBottom */:
                     return targetRight;
-                // case ScrollAlignment.AlignLeftAlways:
-                // case ScrollAlignment.AlignToEdgeIfNeeded:
-                default:
+                case 2 /* LeftOrTop */:
+                case 0 /* ToEdgeIfNeeded */:
                     return targetLeft;
@@ -450,4 +572,4 @@ }
         var actions = [];
-        var _loop_1 = function (frame) {
-            var _a = frame.getBoundingClientRect(), height = _a.height, width = _a.width, top_1 = _a.top, right = _a.right, bottom = _a.bottom, left = _a.left;
+        frames.forEach(function (frame) {
+            var _a = frame.getBoundingClientRect(), height = _a.height, width = _a.width, top = _a.top, right = _a.right, bottom = _a.bottom, left = _a.left;
             var frameStyle = getComputedStyle(frame);
@@ -472,15 +594,15 @@ var borderLeft = parseInt(frameStyle.borderLeftWidth, 10);
                 switch (alignY) {
-                    case 2 /* AlignTopAlways */: {
+                    case 2 /* LeftOrTop */: {
                         blockScroll = targetBlock;
                         break;
                     }
-                    case 3 /* AlignBottomAlways */: {
+                    case 3 /* RightOrBottom */: {
                         blockScroll = targetBlock - viewportHeight;
                         break;
                     }
-                    case 1 /* AlignCenterAlways */: {
+                    case 1 /* CenterAlways */: {
                         blockScroll = targetBlock - viewportHeight / 2;
                         break;
                     }
-                    case 0 /* AlignToEdgeIfNeeded */: {
+                    case 0 /* ToEdgeIfNeeded */: {
                         blockScroll = alignNearest(viewportY, viewportY + viewportHeight, viewportHeight, borderTop, borderBottom, viewportY + targetBlock, viewportY + targetBlock + targetHeight, targetHeight);
@@ -491,15 +613,15 @@ break;
                 switch (alignX) {
-                    case 4 /* AlignLeftAlways */: {
+                    case 2 /* LeftOrTop */: {
                         inlineScroll = targetInline;
                         break;
                     }
-                    case 5 /* AlignRightAlways */: {
+                    case 3 /* RightOrBottom */: {
                         inlineScroll = targetInline - viewportWidth;
                         break;
                     }
-                    case 1 /* AlignCenterAlways */: {
+                    case 1 /* CenterAlways */: {
                         inlineScroll = targetInline - viewportWidth / 2;
                         break;
                     }
-                    case 0 /* AlignToEdgeIfNeeded */: {
+                    case 0 /* ToEdgeIfNeeded */: {
                         inlineScroll = alignNearest(viewportX, viewportX + viewportWidth, viewportWidth, borderLeft, borderRight, viewportX + targetInline, viewportX + targetInline + targetWidth, targetWidth);
@@ -509,5 +631,4 @@ break;
                 }
-                // Apply scroll position offsets and ensure they are within bounds
-                blockScroll = Math.max(0, blockScroll + viewportY);
-                inlineScroll = Math.max(0, inlineScroll + viewportX);
+                blockScroll += viewportY;
+                inlineScroll += viewportX;
             }
@@ -517,16 +638,16 @@ else {
                 switch (alignY) {
-                    case 2 /* AlignTopAlways */: {
-                        blockScroll = targetBlock - top_1 - borderTop;
+                    case 2 /* LeftOrTop */: {
+                        blockScroll = targetBlock - top - borderTop;
                         break;
                     }
-                    case 3 /* AlignBottomAlways */: {
+                    case 3 /* RightOrBottom */: {
                         blockScroll = targetBlock - bottom + borderBottom + scrollbarHeight;
                         break;
                     }
-                    case 1 /* AlignCenterAlways */: {
-                        blockScroll = targetBlock - (top_1 + height / 2) + scrollbarHeight / 2;
+                    case 1 /* CenterAlways */: {
+                        blockScroll = targetBlock - (top + height / 2) + scrollbarHeight / 2;
                         break;
                     }
-                    case 0 /* AlignToEdgeIfNeeded */: {
-                        blockScroll = alignNearest(top_1, bottom, height, borderTop, borderBottom + scrollbarHeight, targetBlock, targetBlock + targetHeight, targetHeight);
+                    case 0 /* ToEdgeIfNeeded */: {
+                        blockScroll = alignNearest(top, bottom, height, borderTop, borderBottom + scrollbarHeight, targetBlock, targetBlock + targetHeight, targetHeight);
                         break;
@@ -536,15 +657,15 @@ }
                 switch (alignX) {
-                    case 4 /* AlignLeftAlways */: {
+                    case 2 /* LeftOrTop */: {
                         inlineScroll = targetInline - left - borderLeft;
                         break;
                     }
-                    case 5 /* AlignRightAlways */: {
+                    case 3 /* RightOrBottom */: {
                         inlineScroll = targetInline - right + borderRight + scrollbarWidth;
                         break;
                     }
-                    case 1 /* AlignCenterAlways */: {
+                    case 1 /* CenterAlways */: {
                         inlineScroll = targetInline - (left + width / 2) + scrollbarWidth / 2;
                         break;
                     }
-                    case 0 /* AlignToEdgeIfNeeded */: {
+                    case 0 /* ToEdgeIfNeeded */: {
                         inlineScroll = alignNearest(left, right, width, borderLeft, borderRight + scrollbarWidth, targetInline, targetInline + targetWidth, targetWidth);
@@ -556,4 +677,4 @@ break;
                 // Ensure scroll coordinates are not out of bounds while applying scroll offsets
-                blockScroll = Math.max(0, Math.min(scrollTop + blockScroll, frame.scrollHeight - height + scrollbarHeight));
-                inlineScroll = Math.max(0, Math.min(scrollLeft + inlineScroll, frame.scrollWidth - width + scrollbarWidth));
+                blockScroll = clamp(scrollTop + blockScroll, frame.scrollHeight - height + scrollbarHeight);
+                inlineScroll = clamp(scrollLeft + inlineScroll, frame.scrollWidth - width + scrollbarWidth);
                 // Cache the offset so that parent frames can scroll this into view correctly
@@ -564,16 +685,3 @@ targetBlock += scrollTop - blockScroll;
             actions.push(function () { return elementScroll(frame, __assign(__assign({}, options), { top: blockScroll, left: inlineScroll })); });
-        };
-        try {
-            for (var frames_1 = __values(frames), frames_1_1 = frames_1.next(); !frames_1_1.done; frames_1_1 = frames_1.next()) {
-                var frame = frames_1_1.value;
-                _loop_1(frame);
-            }
-        }
-        catch (e_1_1) { e_1 = { error: e_1_1 }; }
-        finally {
-            try {
-                if (frames_1_1 && !frames_1_1.done && (_a = frames_1.return)) _a.call(frames_1);
-            }
-            finally { if (e_1) throw e_1.error; }
-        }
+        });
         actions.forEach(function (run) { return run(); });
@@ -580,0 +688,0 @@ };

dist/es6/seamless.js

@@ -147,37 +147,105 @@ (function (global, factory) {
 
-    // https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/dom/element.cc?l=647-681&rcl=02a6466f4efa021e4e198f373eccda3cfc56142b
-    const toPhysicalAlignment = (options, axis, isHorizontalWritingMode, isFlippedBlocksMode) => {
-        const alignment = (axis === 0 /* HorizontalScroll */ && isHorizontalWritingMode) ||
-            (axis === 1 /* VerticalScroll */ && !isHorizontalWritingMode)
-            ? options.inline
-            : options.block;
-        if (alignment === "center") {
-            return 1 /* AlignCenterAlways */;
+    // https://drafts.csswg.org/css-writing-modes-4/#block-flow
+    const normalizeWritingMode = (writingMode) => {
+        switch (writingMode) {
+            case "horizontal-tb":
+            case "lr":
+            case "lr-tb":
+            case "rl":
+            case "rl-tb":
+                return 0 /* HorizontalTb */;
+            case "vertical-rl":
+            case "tb":
+            case "tb-rl":
+                return 1 /* VerticalRl */;
+            case "vertical-lr":
+            case "tb-lr":
+                return 2 /* VerticalLr */;
+            case "sideways-rl":
+                return 3 /* SidewaysRl */;
+            case "sideways-lr":
+                return 4 /* SidewaysLr */;
         }
-        if (alignment === "nearest") {
-            return 0 /* AlignToEdgeIfNeeded */;
+        return 0 /* HorizontalTb */;
+    };
+    // https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/dom/element.cc;l=1097-1189;drc=6a7533d4a1e9f2372223a9d912a9e53a6fa35ae0
+    const toPhysicalAlignment = (options, writingMode, isLTR) => {
+        let [xPos, yPos] = [options.block || "start", options.inline || "nearest"];
+        /**  0b{vertical}{horizontal}  0: normal, 1: reverse */
+        let layout = 0b00;
+        /**
+         * WritingMode.VerticalLr: ↓→
+         * | 1 | 4 |   |
+         * | 2 | 5 |   |
+         * | 3 |   |   |
+         *
+         * RTL: ↑→
+         * | 3 |   |   |
+         * | 2 | 5 |   |
+         * | 1 | 4 |   |
+         */
+        if (!isLTR) {
+            layout ^= 2 /* ReverseVertical */;
         }
-        if (alignment === "start") {
-            return axis === 0 /* HorizontalScroll */
-                ? isFlippedBlocksMode
-                    ? 5 /* AlignRightAlways */
-                    : 4 /* AlignLeftAlways */
-                : 2 /* AlignTopAlways */;
+        switch (writingMode) {
+            /**
+             * ↓→
+             * | 1 | 2 | 3 |
+             * | 4 | 5 |   |
+             * |   |   |   |
+             *
+             * RTL: ↓←
+             * | 3 | 2 | 1 |
+             * |   | 5 | 4 |
+             * |   |   |   |
+             */
+            case 0 /* HorizontalTb */:
+                // swap horizontal and vertical
+                layout = (layout >> 1) | ((layout & 1) << 1);
+                [xPos, yPos] = [yPos, xPos];
+                break;
+            /**
+             * ↓←
+             * |   | 4 | 1 |
+             * |   | 5 | 2 |
+             * |   |   | 3 |
+             *
+             * RTL: ↑←
+             * |   |   | 3 |
+             * |   | 5 | 2 |
+             * |   | 4 | 1 |
+             */
+            case 1 /* VerticalRl */:
+            case 3 /* SidewaysRl */:
+                //  reverse horizontal
+                layout ^= 1 /* ReverseHorizontal */;
+                break;
+            /**
+             * ↑→
+             * | 3 |   |   |
+             * | 2 | 5 |   |
+             * | 1 | 4 |   |
+             *
+             * RTL: ↓→
+             * | 1 | 4 |   |
+             * | 2 | 5 |   |
+             * | 3 |   |   |
+             */
+            case 4 /* SidewaysLr */:
+                // reverse vertical
+                layout ^= 2 /* ReverseVertical */;
+                break;
         }
-        if (alignment === "end") {
-            return axis === 0 /* HorizontalScroll */
-                ? isFlippedBlocksMode
-                    ? 4 /* AlignLeftAlways */
-                    : 5 /* AlignRightAlways */
-                : 3 /* AlignBottomAlways */;
-        }
-        // Default values
-        if (isHorizontalWritingMode) {
-            return axis === 0 /* HorizontalScroll */
-                ? 0 /* AlignToEdgeIfNeeded */
-                : 2 /* AlignTopAlways */;
-        }
-        return axis === 0 /* HorizontalScroll */
-            ? 4 /* AlignLeftAlways */
-            : 0 /* AlignToEdgeIfNeeded */;
+        return [xPos, yPos].map((value, index) => {
+            switch (value) {
+                case "center":
+                    return 1 /* CenterAlways */;
+                case "nearest":
+                    return 0 /* ToEdgeIfNeeded */;
+                default: {
+                    const reverse = (layout >> index) & 1;
+                    return (value === "start") === !reverse ? 2 /* LeftOrTop */ : 3 /* RightOrBottom */;
+                }
+            }
+        });
     };
@@ -311,6 +379,23 @@ // code from stipsan/compute-scroll-into-view
     };
-    const isScrollable = (element) => {
+    const getFrameElement = (element) => {
+        if (!element.ownerDocument || !element.ownerDocument.defaultView) {
+            return null;
+        }
+        try {
+            return element.ownerDocument.defaultView.frameElement;
+        }
+        catch (e) {
+            return null;
+        }
+    };
+    const isHiddenByFrame = (element) => {
+        const frame = getFrameElement(element);
+        if (!frame) {
+            return false;
+        }
+        return frame.clientHeight < element.scrollHeight || frame.clientWidth < element.scrollWidth;
+    };
+    const isScrollable = (element, computedStyle) => {
         if (element.clientHeight < element.scrollHeight || element.clientWidth < element.scrollWidth) {
-            const style = getComputedStyle(element);
-            return canOverflow(style.overflowY) || canOverflow(style.overflowX);
+            return canOverflow(computedStyle.overflowY) || canOverflow(computedStyle.overflowX) || isHiddenByFrame(element);
         }
@@ -321,9 +406,37 @@ return false;
         const parentNode = element.parentNode;
-        return (parentNode &&
-            (parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE
-                ? parentNode.host
-                : parentNode));
+        if (parentNode !== null && parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+            return parentNode.host;
+        }
+        return parentNode;
     };
+    const clamp = (value, width) => {
+        if (value < -width) {
+            return -width;
+        }
+        if (value > width) {
+            return width;
+        }
+        return value;
+    };
+    const isCSSPropertySupported = (property) => property in document.documentElement.style;
+    const getSupportedScrollMarginProperty = () => {
+        // Webkit uses "scroll-snap-margin" https://bugs.webkit.org/show_bug.cgi?id=189265.
+        return ["scroll-margin", "scroll-snap-margin"].filter(isCSSPropertySupported)[0];
+    };
+    const getElementScrollSnapArea = (element, computedStyle) => {
+        const { top, right, bottom, left } = element.getBoundingClientRect();
+        const [scrollMarginTop, scrollMarginRight, scrollMarginBottom, scrollMarginLeft] = [
+            "top",
+            "right",
+            "bottom",
+            "left",
+        ].map((edge) => {
+            const scrollProperty = getSupportedScrollMarginProperty();
+            const value = computedStyle.getPropertyValue(`${scrollProperty}-${edge}`);
+            return parseInt(value, 10) || 0;
+        });
+        return [top - scrollMarginTop, right + scrollMarginRight, bottom + scrollMarginBottom, left - scrollMarginLeft];
+    };
     const elementScrollIntoView = (element, options) => {
-        if (!element.ownerDocument.documentElement.contains(element)) {
+        if (element.isConnected === false) {
             return;
@@ -339,2 +452,3 @@ }
         const frames = [];
+        const documentElementStyle = getComputedStyle(document.documentElement);
         for (let cursor = parentElement(element); cursor !== null; cursor = parentElement(cursor)) {
@@ -346,4 +460,7 @@ // Stop when we reach the viewport
             }
+            const cursorStyle = getComputedStyle(cursor);
             // Skip document.body if it's not the scrollingElement and documentElement isn't independently scrollable
-            if (cursor === document.body && isScrollable(cursor) && !isScrollable(document.documentElement)) {
+            if (cursor === document.body &&
+                isScrollable(cursor, cursorStyle) &&
+                !isScrollable(document.documentElement, documentElementStyle)) {
                 continue;
@@ -353,5 +470,8 @@ }
             // this code only runs if the loop haven't already hit the viewport or a custom boundary
-            if (isScrollable(cursor)) {
+            if (isScrollable(cursor, cursorStyle)) {
                 frames.push(cursor);
             }
+            if (cursorStyle.position === "fixed") {
+                break;
+            }
         }
@@ -369,22 +489,20 @@ // Support pinch-zooming properly, making sure elements scroll into the visual viewport
         const viewportY = window.scrollY || window.pageYOffset;
-        const { height: targetHeight, width: targetWidth, top: targetTop, right: targetRight, bottom: targetBottom, left: targetLeft, } = element.getBoundingClientRect();
         const computedStyle = getComputedStyle(element);
-        const writingMode = computedStyle.writingMode ||
+        const [targetTop, targetRight, targetBottom, targetLeft] = getElementScrollSnapArea(element, computedStyle);
+        const targetHeight = targetBottom - targetTop;
+        const targetWidth = targetRight - targetLeft;
+        const writingMode = normalizeWritingMode(computedStyle.writingMode ||
             computedStyle.getPropertyValue("-webkit-writing-mode") ||
-            computedStyle.getPropertyValue("-ms-writing-mode") ||
-            "horizontal-tb";
-        const isHorizontalWritingMode = ["horizontal-tb", "lr", "lr-tb", "rl"].some((mode) => mode === writingMode);
-        const isFlippedBlocksWritingMode = ["vertical-rl", "tb-rl"].some((mode) => mode === writingMode);
-        const alignX = toPhysicalAlignment(options, 0 /* HorizontalScroll */, isHorizontalWritingMode, isFlippedBlocksWritingMode);
-        const alignY = toPhysicalAlignment(options, 1 /* VerticalScroll */, isHorizontalWritingMode, isFlippedBlocksWritingMode);
+            computedStyle.getPropertyValue("-ms-writing-mode"));
+        const isLTR = computedStyle.direction !== "rtl";
+        const [alignX, alignY] = toPhysicalAlignment(options, writingMode, isLTR);
         let targetBlock = (() => {
             switch (alignY) {
-                case 2 /* AlignTopAlways */:
-                case 0 /* AlignToEdgeIfNeeded */:
+                case 1 /* CenterAlways */:
+                    return targetTop + targetHeight / 2;
+                case 2 /* LeftOrTop */:
+                case 0 /* ToEdgeIfNeeded */:
                     return targetTop;
-                case 3 /* AlignBottomAlways */:
+                case 3 /* RightOrBottom */:
                     return targetBottom;
-                // case ScrollAlignment.AlignCenterAlways:
-                default:
-                    return targetTop + targetHeight / 2;
             }
@@ -394,9 +512,8 @@ })();
             switch (alignX) {
-                case 1 /* AlignCenterAlways */:
+                case 1 /* CenterAlways */:
                     return targetLeft + targetWidth / 2;
-                case 5 /* AlignRightAlways */:
+                case 3 /* RightOrBottom */:
                     return targetRight;
-                // case ScrollAlignment.AlignLeftAlways:
-                // case ScrollAlignment.AlignToEdgeIfNeeded:
-                default:
+                case 2 /* LeftOrTop */:
+                case 0 /* ToEdgeIfNeeded */:
                     return targetLeft;
@@ -406,3 +523,3 @@ }
         const actions = [];
-        for (const frame of frames) {
+        frames.forEach((frame) => {
             const { height, width, top, right, bottom, left } = frame.getBoundingClientRect();
@@ -428,15 +545,15 @@ const frameStyle = getComputedStyle(frame);
                 switch (alignY) {
-                    case 2 /* AlignTopAlways */: {
+                    case 2 /* LeftOrTop */: {
                         blockScroll = targetBlock;
                         break;
                     }
-                    case 3 /* AlignBottomAlways */: {
+                    case 3 /* RightOrBottom */: {
                         blockScroll = targetBlock - viewportHeight;
                         break;
                     }
-                    case 1 /* AlignCenterAlways */: {
+                    case 1 /* CenterAlways */: {
                         blockScroll = targetBlock - viewportHeight / 2;
                         break;
                     }
-                    case 0 /* AlignToEdgeIfNeeded */: {
+                    case 0 /* ToEdgeIfNeeded */: {
                         blockScroll = alignNearest(viewportY, viewportY + viewportHeight, viewportHeight, borderTop, borderBottom, viewportY + targetBlock, viewportY + targetBlock + targetHeight, targetHeight);
@@ -447,15 +564,15 @@ break;
                 switch (alignX) {
-                    case 4 /* AlignLeftAlways */: {
+                    case 2 /* LeftOrTop */: {
                         inlineScroll = targetInline;
                         break;
                     }
-                    case 5 /* AlignRightAlways */: {
+                    case 3 /* RightOrBottom */: {
                         inlineScroll = targetInline - viewportWidth;
                         break;
                     }
-                    case 1 /* AlignCenterAlways */: {
+                    case 1 /* CenterAlways */: {
                         inlineScroll = targetInline - viewportWidth / 2;
                         break;
                     }
-                    case 0 /* AlignToEdgeIfNeeded */: {
+                    case 0 /* ToEdgeIfNeeded */: {
                         inlineScroll = alignNearest(viewportX, viewportX + viewportWidth, viewportWidth, borderLeft, borderRight, viewportX + targetInline, viewportX + targetInline + targetWidth, targetWidth);
@@ -465,5 +582,4 @@ break;
                 }
-                // Apply scroll position offsets and ensure they are within bounds
-                blockScroll = Math.max(0, blockScroll + viewportY);
-                inlineScroll = Math.max(0, inlineScroll + viewportX);
+                blockScroll += viewportY;
+                inlineScroll += viewportX;
             }
@@ -473,15 +589,15 @@ else {
                 switch (alignY) {
-                    case 2 /* AlignTopAlways */: {
+                    case 2 /* LeftOrTop */: {
                         blockScroll = targetBlock - top - borderTop;
                         break;
                     }
-                    case 3 /* AlignBottomAlways */: {
+                    case 3 /* RightOrBottom */: {
                         blockScroll = targetBlock - bottom + borderBottom + scrollbarHeight;
                         break;
                     }
-                    case 1 /* AlignCenterAlways */: {
+                    case 1 /* CenterAlways */: {
                         blockScroll = targetBlock - (top + height / 2) + scrollbarHeight / 2;
                         break;
                     }
-                    case 0 /* AlignToEdgeIfNeeded */: {
+                    case 0 /* ToEdgeIfNeeded */: {
                         blockScroll = alignNearest(top, bottom, height, borderTop, borderBottom + scrollbarHeight, targetBlock, targetBlock + targetHeight, targetHeight);
@@ -492,15 +608,15 @@ break;
                 switch (alignX) {
-                    case 4 /* AlignLeftAlways */: {
+                    case 2 /* LeftOrTop */: {
                         inlineScroll = targetInline - left - borderLeft;
                         break;
                     }
-                    case 5 /* AlignRightAlways */: {
+                    case 3 /* RightOrBottom */: {
                         inlineScroll = targetInline - right + borderRight + scrollbarWidth;
                         break;
                     }
-                    case 1 /* AlignCenterAlways */: {
+                    case 1 /* CenterAlways */: {
                         inlineScroll = targetInline - (left + width / 2) + scrollbarWidth / 2;
                         break;
                     }
-                    case 0 /* AlignToEdgeIfNeeded */: {
+                    case 0 /* ToEdgeIfNeeded */: {
                         inlineScroll = alignNearest(left, right, width, borderLeft, borderRight + scrollbarWidth, targetInline, targetInline + targetWidth, targetWidth);
@@ -512,4 +628,4 @@ break;
                 // Ensure scroll coordinates are not out of bounds while applying scroll offsets
-                blockScroll = Math.max(0, Math.min(scrollTop + blockScroll, frame.scrollHeight - height + scrollbarHeight));
-                inlineScroll = Math.max(0, Math.min(scrollLeft + inlineScroll, frame.scrollWidth - width + scrollbarWidth));
+                blockScroll = clamp(scrollTop + blockScroll, frame.scrollHeight - height + scrollbarHeight);
+                inlineScroll = clamp(scrollLeft + inlineScroll, frame.scrollWidth - width + scrollbarWidth);
                 // Cache the offset so that parent frames can scroll this into view correctly
@@ -520,3 +636,3 @@ targetBlock += scrollTop - blockScroll;
             actions.push(() => elementScroll(frame, Object.assign(Object.assign({}, options), { top: blockScroll, left: inlineScroll })));
-        }
+        });
         actions.forEach((run) => run());
@@ -523,0 +639,0 @@ };

dist/esm/Element.scrollIntoView.js

 import { isObject, isScrollBehaviorSupported, modifyPrototypes, original, } from "./common.js";
 import { elementScroll } from "./Element.scroll.js";
-// https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/dom/element.cc?l=647-681&rcl=02a6466f4efa021e4e198f373eccda3cfc56142b
-const toPhysicalAlignment = (options, axis, isHorizontalWritingMode, isFlippedBlocksMode) => {
-    const alignment = (axis === 0 /* HorizontalScroll */ && isHorizontalWritingMode) ||
-        (axis === 1 /* VerticalScroll */ && !isHorizontalWritingMode)
-        ? options.inline
-        : options.block;
-    if (alignment === "center") {
-        return 1 /* AlignCenterAlways */;
+// https://drafts.csswg.org/css-writing-modes-4/#block-flow
+const normalizeWritingMode = (writingMode) => {
+    switch (writingMode) {
+        case "horizontal-tb":
+        case "lr":
+        case "lr-tb":
+        case "rl":
+        case "rl-tb":
+            return 0 /* HorizontalTb */;
+        case "vertical-rl":
+        case "tb":
+        case "tb-rl":
+            return 1 /* VerticalRl */;
+        case "vertical-lr":
+        case "tb-lr":
+            return 2 /* VerticalLr */;
+        case "sideways-rl":
+            return 3 /* SidewaysRl */;
+        case "sideways-lr":
+            return 4 /* SidewaysLr */;
     }
-    if (alignment === "nearest") {
-        return 0 /* AlignToEdgeIfNeeded */;
+    return 0 /* HorizontalTb */;
+};
+// https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/dom/element.cc;l=1097-1189;drc=6a7533d4a1e9f2372223a9d912a9e53a6fa35ae0
+const toPhysicalAlignment = (options, writingMode, isLTR) => {
+    let [xPos, yPos] = [options.block || "start", options.inline || "nearest"];
+    /**  0b{vertical}{horizontal}  0: normal, 1: reverse */
+    let layout = 0b00;
+    /**
+     * WritingMode.VerticalLr: ↓→
+     * | 1 | 4 |   |
+     * | 2 | 5 |   |
+     * | 3 |   |   |
+     *
+     * RTL: ↑→
+     * | 3 |   |   |
+     * | 2 | 5 |   |
+     * | 1 | 4 |   |
+     */
+    if (!isLTR) {
+        layout ^= 2 /* ReverseVertical */;
     }
-    if (alignment === "start") {
-        return axis === 0 /* HorizontalScroll */
-            ? isFlippedBlocksMode
-                ? 5 /* AlignRightAlways */
-                : 4 /* AlignLeftAlways */
-            : 2 /* AlignTopAlways */;
+    switch (writingMode) {
+        /**
+         * ↓→
+         * | 1 | 2 | 3 |
+         * | 4 | 5 |   |
+         * |   |   |   |
+         *
+         * RTL: ↓←
+         * | 3 | 2 | 1 |
+         * |   | 5 | 4 |
+         * |   |   |   |
+         */
+        case 0 /* HorizontalTb */:
+            // swap horizontal and vertical
+            layout = (layout >> 1) | ((layout & 1) << 1);
+            [xPos, yPos] = [yPos, xPos];
+            break;
+        /**
+         * ↓←
+         * |   | 4 | 1 |
+         * |   | 5 | 2 |
+         * |   |   | 3 |
+         *
+         * RTL: ↑←
+         * |   |   | 3 |
+         * |   | 5 | 2 |
+         * |   | 4 | 1 |
+         */
+        case 1 /* VerticalRl */:
+        case 3 /* SidewaysRl */:
+            //  reverse horizontal
+            layout ^= 1 /* ReverseHorizontal */;
+            break;
+        /**
+         * ↑→
+         * | 3 |   |   |
+         * | 2 | 5 |   |
+         * | 1 | 4 |   |
+         *
+         * RTL: ↓→
+         * | 1 | 4 |   |
+         * | 2 | 5 |   |
+         * | 3 |   |   |
+         */
+        case 4 /* SidewaysLr */:
+            // reverse vertical
+            layout ^= 2 /* ReverseVertical */;
+            break;
     }
-    if (alignment === "end") {
-        return axis === 0 /* HorizontalScroll */
-            ? isFlippedBlocksMode
-                ? 4 /* AlignLeftAlways */
-                : 5 /* AlignRightAlways */
-            : 3 /* AlignBottomAlways */;
-    }
-    // Default values
-    if (isHorizontalWritingMode) {
-        return axis === 0 /* HorizontalScroll */
-            ? 0 /* AlignToEdgeIfNeeded */
-            : 2 /* AlignTopAlways */;
-    }
-    return axis === 0 /* HorizontalScroll */
-        ? 4 /* AlignLeftAlways */
-        : 0 /* AlignToEdgeIfNeeded */;
+    return [xPos, yPos].map((value, index) => {
+        switch (value) {
+            case "center":
+                return 1 /* CenterAlways */;
+            case "nearest":
+                return 0 /* ToEdgeIfNeeded */;
+            default: {
+                const reverse = (layout >> index) & 1;
+                return (value === "start") === !reverse ? 2 /* LeftOrTop */ : 3 /* RightOrBottom */;
+            }
+        }
+    });
 };
@@ -166,6 +234,23 @@ // code from stipsan/compute-scroll-into-view
 };
-const isScrollable = (element) => {
+const getFrameElement = (element) => {
+    if (!element.ownerDocument || !element.ownerDocument.defaultView) {
+        return null;
+    }
+    try {
+        return element.ownerDocument.defaultView.frameElement;
+    }
+    catch (e) {
+        return null;
+    }
+};
+const isHiddenByFrame = (element) => {
+    const frame = getFrameElement(element);
+    if (!frame) {
+        return false;
+    }
+    return frame.clientHeight < element.scrollHeight || frame.clientWidth < element.scrollWidth;
+};
+const isScrollable = (element, computedStyle) => {
     if (element.clientHeight < element.scrollHeight || element.clientWidth < element.scrollWidth) {
-        const style = getComputedStyle(element);
-        return canOverflow(style.overflowY) || canOverflow(style.overflowX);
+        return canOverflow(computedStyle.overflowY) || canOverflow(computedStyle.overflowX) || isHiddenByFrame(element);
     }
@@ -176,9 +261,37 @@ return false;
     const parentNode = element.parentNode;
-    return (parentNode &&
-        (parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE
-            ? parentNode.host
-            : parentNode));
+    if (parentNode !== null && parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+        return parentNode.host;
+    }
+    return parentNode;
 };
+const clamp = (value, width) => {
+    if (value < -width) {
+        return -width;
+    }
+    if (value > width) {
+        return width;
+    }
+    return value;
+};
+const isCSSPropertySupported = (property) => property in document.documentElement.style;
+const getSupportedScrollMarginProperty = () => {
+    // Webkit uses "scroll-snap-margin" https://bugs.webkit.org/show_bug.cgi?id=189265.
+    return ["scroll-margin", "scroll-snap-margin"].filter(isCSSPropertySupported)[0];
+};
+const getElementScrollSnapArea = (element, computedStyle) => {
+    const { top, right, bottom, left } = element.getBoundingClientRect();
+    const [scrollMarginTop, scrollMarginRight, scrollMarginBottom, scrollMarginLeft] = [
+        "top",
+        "right",
+        "bottom",
+        "left",
+    ].map((edge) => {
+        const scrollProperty = getSupportedScrollMarginProperty();
+        const value = computedStyle.getPropertyValue(`${scrollProperty}-${edge}`);
+        return parseInt(value, 10) || 0;
+    });
+    return [top - scrollMarginTop, right + scrollMarginRight, bottom + scrollMarginBottom, left - scrollMarginLeft];
+};
 export const elementScrollIntoView = (element, options) => {
-    if (!element.ownerDocument.documentElement.contains(element)) {
+    if (element.isConnected === false) {
         return;
@@ -194,2 +307,3 @@ }
     const frames = [];
+    const documentElementStyle = getComputedStyle(document.documentElement);
     for (let cursor = parentElement(element); cursor !== null; cursor = parentElement(cursor)) {
@@ -201,4 +315,7 @@ // Stop when we reach the viewport
         }
+        const cursorStyle = getComputedStyle(cursor);
         // Skip document.body if it's not the scrollingElement and documentElement isn't independently scrollable
-        if (cursor === document.body && isScrollable(cursor) && !isScrollable(document.documentElement)) {
+        if (cursor === document.body &&
+            isScrollable(cursor, cursorStyle) &&
+            !isScrollable(document.documentElement, documentElementStyle)) {
             continue;
@@ -208,5 +325,8 @@ }
         // this code only runs if the loop haven't already hit the viewport or a custom boundary
-        if (isScrollable(cursor)) {
+        if (isScrollable(cursor, cursorStyle)) {
             frames.push(cursor);
         }
+        if (cursorStyle.position === "fixed") {
+            break;
+        }
     }
@@ -224,22 +344,20 @@ // Support pinch-zooming properly, making sure elements scroll into the visual viewport
     const viewportY = window.scrollY || window.pageYOffset;
-    const { height: targetHeight, width: targetWidth, top: targetTop, right: targetRight, bottom: targetBottom, left: targetLeft, } = element.getBoundingClientRect();
     const computedStyle = getComputedStyle(element);
-    const writingMode = computedStyle.writingMode ||
+    const [targetTop, targetRight, targetBottom, targetLeft] = getElementScrollSnapArea(element, computedStyle);
+    const targetHeight = targetBottom - targetTop;
+    const targetWidth = targetRight - targetLeft;
+    const writingMode = normalizeWritingMode(computedStyle.writingMode ||
         computedStyle.getPropertyValue("-webkit-writing-mode") ||
-        computedStyle.getPropertyValue("-ms-writing-mode") ||
-        "horizontal-tb";
-    const isHorizontalWritingMode = ["horizontal-tb", "lr", "lr-tb", "rl"].some((mode) => mode === writingMode);
-    const isFlippedBlocksWritingMode = ["vertical-rl", "tb-rl"].some((mode) => mode === writingMode);
-    const alignX = toPhysicalAlignment(options, 0 /* HorizontalScroll */, isHorizontalWritingMode, isFlippedBlocksWritingMode);
-    const alignY = toPhysicalAlignment(options, 1 /* VerticalScroll */, isHorizontalWritingMode, isFlippedBlocksWritingMode);
+        computedStyle.getPropertyValue("-ms-writing-mode"));
+    const isLTR = computedStyle.direction !== "rtl";
+    const [alignX, alignY] = toPhysicalAlignment(options, writingMode, isLTR);
     let targetBlock = (() => {
         switch (alignY) {
-            case 2 /* AlignTopAlways */:
-            case 0 /* AlignToEdgeIfNeeded */:
+            case 1 /* CenterAlways */:
+                return targetTop + targetHeight / 2;
+            case 2 /* LeftOrTop */:
+            case 0 /* ToEdgeIfNeeded */:
                 return targetTop;
-            case 3 /* AlignBottomAlways */:
+            case 3 /* RightOrBottom */:
                 return targetBottom;
-            // case ScrollAlignment.AlignCenterAlways:
-            default:
-                return targetTop + targetHeight / 2;
         }
@@ -249,9 +367,8 @@ })();
         switch (alignX) {
-            case 1 /* AlignCenterAlways */:
+            case 1 /* CenterAlways */:
                 return targetLeft + targetWidth / 2;
-            case 5 /* AlignRightAlways */:
+            case 3 /* RightOrBottom */:
                 return targetRight;
-            // case ScrollAlignment.AlignLeftAlways:
-            // case ScrollAlignment.AlignToEdgeIfNeeded:
-            default:
+            case 2 /* LeftOrTop */:
+            case 0 /* ToEdgeIfNeeded */:
                 return targetLeft;
@@ -261,3 +378,3 @@ }
     const actions = [];
-    for (const frame of frames) {
+    frames.forEach((frame) => {
         const { height, width, top, right, bottom, left } = frame.getBoundingClientRect();
@@ -283,15 +400,15 @@ const frameStyle = getComputedStyle(frame);
             switch (alignY) {
-                case 2 /* AlignTopAlways */: {
+                case 2 /* LeftOrTop */: {
                     blockScroll = targetBlock;
                     break;
                 }
-                case 3 /* AlignBottomAlways */: {
+                case 3 /* RightOrBottom */: {
                     blockScroll = targetBlock - viewportHeight;
                     break;
                 }
-                case 1 /* AlignCenterAlways */: {
+                case 1 /* CenterAlways */: {
                     blockScroll = targetBlock - viewportHeight / 2;
                     break;
                 }
-                case 0 /* AlignToEdgeIfNeeded */: {
+                case 0 /* ToEdgeIfNeeded */: {
                     blockScroll = alignNearest(viewportY, viewportY + viewportHeight, viewportHeight, borderTop, borderBottom, viewportY + targetBlock, viewportY + targetBlock + targetHeight, targetHeight);
@@ -302,15 +419,15 @@ break;
             switch (alignX) {
-                case 4 /* AlignLeftAlways */: {
+                case 2 /* LeftOrTop */: {
                     inlineScroll = targetInline;
                     break;
                 }
-                case 5 /* AlignRightAlways */: {
+                case 3 /* RightOrBottom */: {
                     inlineScroll = targetInline - viewportWidth;
                     break;
                 }
-                case 1 /* AlignCenterAlways */: {
+                case 1 /* CenterAlways */: {
                     inlineScroll = targetInline - viewportWidth / 2;
                     break;
                 }
-                case 0 /* AlignToEdgeIfNeeded */: {
+                case 0 /* ToEdgeIfNeeded */: {
                     inlineScroll = alignNearest(viewportX, viewportX + viewportWidth, viewportWidth, borderLeft, borderRight, viewportX + targetInline, viewportX + targetInline + targetWidth, targetWidth);
@@ -320,5 +437,4 @@ break;
             }
-            // Apply scroll position offsets and ensure they are within bounds
-            blockScroll = Math.max(0, blockScroll + viewportY);
-            inlineScroll = Math.max(0, inlineScroll + viewportX);
+            blockScroll += viewportY;
+            inlineScroll += viewportX;
         }
@@ -328,15 +444,15 @@ else {
             switch (alignY) {
-                case 2 /* AlignTopAlways */: {
+                case 2 /* LeftOrTop */: {
                     blockScroll = targetBlock - top - borderTop;
                     break;
                 }
-                case 3 /* AlignBottomAlways */: {
+                case 3 /* RightOrBottom */: {
                     blockScroll = targetBlock - bottom + borderBottom + scrollbarHeight;
                     break;
                 }
-                case 1 /* AlignCenterAlways */: {
+                case 1 /* CenterAlways */: {
                     blockScroll = targetBlock - (top + height / 2) + scrollbarHeight / 2;
                     break;
                 }
-                case 0 /* AlignToEdgeIfNeeded */: {
+                case 0 /* ToEdgeIfNeeded */: {
                     blockScroll = alignNearest(top, bottom, height, borderTop, borderBottom + scrollbarHeight, targetBlock, targetBlock + targetHeight, targetHeight);
@@ -347,15 +463,15 @@ break;
             switch (alignX) {
-                case 4 /* AlignLeftAlways */: {
+                case 2 /* LeftOrTop */: {
                     inlineScroll = targetInline - left - borderLeft;
                     break;
                 }
-                case 5 /* AlignRightAlways */: {
+                case 3 /* RightOrBottom */: {
                     inlineScroll = targetInline - right + borderRight + scrollbarWidth;
                     break;
                 }
-                case 1 /* AlignCenterAlways */: {
+                case 1 /* CenterAlways */: {
                     inlineScroll = targetInline - (left + width / 2) + scrollbarWidth / 2;
                     break;
                 }
-                case 0 /* AlignToEdgeIfNeeded */: {
+                case 0 /* ToEdgeIfNeeded */: {
                     inlineScroll = alignNearest(left, right, width, borderLeft, borderRight + scrollbarWidth, targetInline, targetInline + targetWidth, targetWidth);
@@ -367,4 +483,4 @@ break;
             // Ensure scroll coordinates are not out of bounds while applying scroll offsets
-            blockScroll = Math.max(0, Math.min(scrollTop + blockScroll, frame.scrollHeight - height + scrollbarHeight));
-            inlineScroll = Math.max(0, Math.min(scrollLeft + inlineScroll, frame.scrollWidth - width + scrollbarWidth));
+            blockScroll = clamp(scrollTop + blockScroll, frame.scrollHeight - height + scrollbarHeight);
+            inlineScroll = clamp(scrollLeft + inlineScroll, frame.scrollWidth - width + scrollbarWidth);
             // Cache the offset so that parent frames can scroll this into view correctly
@@ -375,3 +491,3 @@ targetBlock += scrollTop - blockScroll;
         actions.push(() => elementScroll(frame, { ...options, top: blockScroll, left: inlineScroll }));
-    }
+    });
     actions.forEach((run) => run());
@@ -378,0 +494,0 @@ };

dist/umd/seamless.js

@@ -147,37 +147,105 @@ (function (global, factory) {
 
-    // https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/dom/element.cc?l=647-681&rcl=02a6466f4efa021e4e198f373eccda3cfc56142b
-    const toPhysicalAlignment = (options, axis, isHorizontalWritingMode, isFlippedBlocksMode) => {
-        const alignment = (axis === 0 /* HorizontalScroll */ && isHorizontalWritingMode) ||
-            (axis === 1 /* VerticalScroll */ && !isHorizontalWritingMode)
-            ? options.inline
-            : options.block;
-        if (alignment === "center") {
-            return 1 /* AlignCenterAlways */;
+    // https://drafts.csswg.org/css-writing-modes-4/#block-flow
+    const normalizeWritingMode = (writingMode) => {
+        switch (writingMode) {
+            case "horizontal-tb":
+            case "lr":
+            case "lr-tb":
+            case "rl":
+            case "rl-tb":
+                return 0 /* HorizontalTb */;
+            case "vertical-rl":
+            case "tb":
+            case "tb-rl":
+                return 1 /* VerticalRl */;
+            case "vertical-lr":
+            case "tb-lr":
+                return 2 /* VerticalLr */;
+            case "sideways-rl":
+                return 3 /* SidewaysRl */;
+            case "sideways-lr":
+                return 4 /* SidewaysLr */;
         }
-        if (alignment === "nearest") {
-            return 0 /* AlignToEdgeIfNeeded */;
+        return 0 /* HorizontalTb */;
+    };
+    // https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/dom/element.cc;l=1097-1189;drc=6a7533d4a1e9f2372223a9d912a9e53a6fa35ae0
+    const toPhysicalAlignment = (options, writingMode, isLTR) => {
+        let [xPos, yPos] = [options.block || "start", options.inline || "nearest"];
+        /**  0b{vertical}{horizontal}  0: normal, 1: reverse */
+        let layout = 0b00;
+        /**
+         * WritingMode.VerticalLr: ↓→
+         * | 1 | 4 |   |
+         * | 2 | 5 |   |
+         * | 3 |   |   |
+         *
+         * RTL: ↑→
+         * | 3 |   |   |
+         * | 2 | 5 |   |
+         * | 1 | 4 |   |
+         */
+        if (!isLTR) {
+            layout ^= 2 /* ReverseVertical */;
         }
-        if (alignment === "start") {
-            return axis === 0 /* HorizontalScroll */
-                ? isFlippedBlocksMode
-                    ? 5 /* AlignRightAlways */
-                    : 4 /* AlignLeftAlways */
-                : 2 /* AlignTopAlways */;
+        switch (writingMode) {
+            /**
+             * ↓→
+             * | 1 | 2 | 3 |
+             * | 4 | 5 |   |
+             * |   |   |   |
+             *
+             * RTL: ↓←
+             * | 3 | 2 | 1 |
+             * |   | 5 | 4 |
+             * |   |   |   |
+             */
+            case 0 /* HorizontalTb */:
+                // swap horizontal and vertical
+                layout = (layout >> 1) | ((layout & 1) << 1);
+                [xPos, yPos] = [yPos, xPos];
+                break;
+            /**
+             * ↓←
+             * |   | 4 | 1 |
+             * |   | 5 | 2 |
+             * |   |   | 3 |
+             *
+             * RTL: ↑←
+             * |   |   | 3 |
+             * |   | 5 | 2 |
+             * |   | 4 | 1 |
+             */
+            case 1 /* VerticalRl */:
+            case 3 /* SidewaysRl */:
+                //  reverse horizontal
+                layout ^= 1 /* ReverseHorizontal */;
+                break;
+            /**
+             * ↑→
+             * | 3 |   |   |
+             * | 2 | 5 |   |
+             * | 1 | 4 |   |
+             *
+             * RTL: ↓→
+             * | 1 | 4 |   |
+             * | 2 | 5 |   |
+             * | 3 |   |   |
+             */
+            case 4 /* SidewaysLr */:
+                // reverse vertical
+                layout ^= 2 /* ReverseVertical */;
+                break;
         }
-        if (alignment === "end") {
-            return axis === 0 /* HorizontalScroll */
-                ? isFlippedBlocksMode
-                    ? 4 /* AlignLeftAlways */
-                    : 5 /* AlignRightAlways */
-                : 3 /* AlignBottomAlways */;
-        }
-        // Default values
-        if (isHorizontalWritingMode) {
-            return axis === 0 /* HorizontalScroll */
-                ? 0 /* AlignToEdgeIfNeeded */
-                : 2 /* AlignTopAlways */;
-        }
-        return axis === 0 /* HorizontalScroll */
-            ? 4 /* AlignLeftAlways */
-            : 0 /* AlignToEdgeIfNeeded */;
+        return [xPos, yPos].map((value, index) => {
+            switch (value) {
+                case "center":
+                    return 1 /* CenterAlways */;
+                case "nearest":
+                    return 0 /* ToEdgeIfNeeded */;
+                default: {
+                    const reverse = (layout >> index) & 1;
+                    return (value === "start") === !reverse ? 2 /* LeftOrTop */ : 3 /* RightOrBottom */;
+                }
+            }
+        });
     };
@@ -311,6 +379,23 @@ // code from stipsan/compute-scroll-into-view
     };
-    const isScrollable = (element) => {
+    const getFrameElement = (element) => {
+        if (!element.ownerDocument || !element.ownerDocument.defaultView) {
+            return null;
+        }
+        try {
+            return element.ownerDocument.defaultView.frameElement;
+        }
+        catch (e) {
+            return null;
+        }
+    };
+    const isHiddenByFrame = (element) => {
+        const frame = getFrameElement(element);
+        if (!frame) {
+            return false;
+        }
+        return frame.clientHeight < element.scrollHeight || frame.clientWidth < element.scrollWidth;
+    };
+    const isScrollable = (element, computedStyle) => {
         if (element.clientHeight < element.scrollHeight || element.clientWidth < element.scrollWidth) {
-            const style = getComputedStyle(element);
-            return canOverflow(style.overflowY) || canOverflow(style.overflowX);
+            return canOverflow(computedStyle.overflowY) || canOverflow(computedStyle.overflowX) || isHiddenByFrame(element);
         }
@@ -321,9 +406,37 @@ return false;
         const parentNode = element.parentNode;
-        return (parentNode &&
-            (parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE
-                ? parentNode.host
-                : parentNode));
+        if (parentNode !== null && parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+            return parentNode.host;
+        }
+        return parentNode;
     };
+    const clamp = (value, width) => {
+        if (value < -width) {
+            return -width;
+        }
+        if (value > width) {
+            return width;
+        }
+        return value;
+    };
+    const isCSSPropertySupported = (property) => property in document.documentElement.style;
+    const getSupportedScrollMarginProperty = () => {
+        // Webkit uses "scroll-snap-margin" https://bugs.webkit.org/show_bug.cgi?id=189265.
+        return ["scroll-margin", "scroll-snap-margin"].filter(isCSSPropertySupported)[0];
+    };
+    const getElementScrollSnapArea = (element, computedStyle) => {
+        const { top, right, bottom, left } = element.getBoundingClientRect();
+        const [scrollMarginTop, scrollMarginRight, scrollMarginBottom, scrollMarginLeft] = [
+            "top",
+            "right",
+            "bottom",
+            "left",
+        ].map((edge) => {
+            const scrollProperty = getSupportedScrollMarginProperty();
+            const value = computedStyle.getPropertyValue(`${scrollProperty}-${edge}`);
+            return parseInt(value, 10) || 0;
+        });
+        return [top - scrollMarginTop, right + scrollMarginRight, bottom + scrollMarginBottom, left - scrollMarginLeft];
+    };
     const elementScrollIntoView = (element, options) => {
-        if (!element.ownerDocument.documentElement.contains(element)) {
+        if (element.isConnected === false) {
             return;
@@ -339,2 +452,3 @@ }
         const frames = [];
+        const documentElementStyle = getComputedStyle(document.documentElement);
         for (let cursor = parentElement(element); cursor !== null; cursor = parentElement(cursor)) {
@@ -346,4 +460,7 @@ // Stop when we reach the viewport
             }
+            const cursorStyle = getComputedStyle(cursor);
             // Skip document.body if it's not the scrollingElement and documentElement isn't independently scrollable
-            if (cursor === document.body && isScrollable(cursor) && !isScrollable(document.documentElement)) {
+            if (cursor === document.body &&
+                isScrollable(cursor, cursorStyle) &&
+                !isScrollable(document.documentElement, documentElementStyle)) {
                 continue;
@@ -353,5 +470,8 @@ }
             // this code only runs if the loop haven't already hit the viewport or a custom boundary
-            if (isScrollable(cursor)) {
+            if (isScrollable(cursor, cursorStyle)) {
                 frames.push(cursor);
             }
+            if (cursorStyle.position === "fixed") {
+                break;
+            }
         }
@@ -369,22 +489,20 @@ // Support pinch-zooming properly, making sure elements scroll into the visual viewport
         const viewportY = window.scrollY || window.pageYOffset;
-        const { height: targetHeight, width: targetWidth, top: targetTop, right: targetRight, bottom: targetBottom, left: targetLeft, } = element.getBoundingClientRect();
         const computedStyle = getComputedStyle(element);
-        const writingMode = computedStyle.writingMode ||
+        const [targetTop, targetRight, targetBottom, targetLeft] = getElementScrollSnapArea(element, computedStyle);
+        const targetHeight = targetBottom - targetTop;
+        const targetWidth = targetRight - targetLeft;
+        const writingMode = normalizeWritingMode(computedStyle.writingMode ||
             computedStyle.getPropertyValue("-webkit-writing-mode") ||
-            computedStyle.getPropertyValue("-ms-writing-mode") ||
-            "horizontal-tb";
-        const isHorizontalWritingMode = ["horizontal-tb", "lr", "lr-tb", "rl"].some((mode) => mode === writingMode);
-        const isFlippedBlocksWritingMode = ["vertical-rl", "tb-rl"].some((mode) => mode === writingMode);
-        const alignX = toPhysicalAlignment(options, 0 /* HorizontalScroll */, isHorizontalWritingMode, isFlippedBlocksWritingMode);
-        const alignY = toPhysicalAlignment(options, 1 /* VerticalScroll */, isHorizontalWritingMode, isFlippedBlocksWritingMode);
+            computedStyle.getPropertyValue("-ms-writing-mode"));
+        const isLTR = computedStyle.direction !== "rtl";
+        const [alignX, alignY] = toPhysicalAlignment(options, writingMode, isLTR);
         let targetBlock = (() => {
             switch (alignY) {
-                case 2 /* AlignTopAlways */:
-                case 0 /* AlignToEdgeIfNeeded */:
+                case 1 /* CenterAlways */:
+                    return targetTop + targetHeight / 2;
+                case 2 /* LeftOrTop */:
+                case 0 /* ToEdgeIfNeeded */:
                     return targetTop;
-                case 3 /* AlignBottomAlways */:
+                case 3 /* RightOrBottom */:
                     return targetBottom;
-                // case ScrollAlignment.AlignCenterAlways:
-                default:
-                    return targetTop + targetHeight / 2;
             }
@@ -394,9 +512,8 @@ })();
             switch (alignX) {
-                case 1 /* AlignCenterAlways */:
+                case 1 /* CenterAlways */:
                     return targetLeft + targetWidth / 2;
-                case 5 /* AlignRightAlways */:
+                case 3 /* RightOrBottom */:
                     return targetRight;
-                // case ScrollAlignment.AlignLeftAlways:
-                // case ScrollAlignment.AlignToEdgeIfNeeded:
-                default:
+                case 2 /* LeftOrTop */:
+                case 0 /* ToEdgeIfNeeded */:
                     return targetLeft;
@@ -406,3 +523,3 @@ }
         const actions = [];
-        for (const frame of frames) {
+        frames.forEach((frame) => {
             const { height, width, top, right, bottom, left } = frame.getBoundingClientRect();
@@ -428,15 +545,15 @@ const frameStyle = getComputedStyle(frame);
                 switch (alignY) {
-                    case 2 /* AlignTopAlways */: {
+                    case 2 /* LeftOrTop */: {
                         blockScroll = targetBlock;
                         break;
                     }
-                    case 3 /* AlignBottomAlways */: {
+                    case 3 /* RightOrBottom */: {
                         blockScroll = targetBlock - viewportHeight;
                         break;
                     }
-                    case 1 /* AlignCenterAlways */: {
+                    case 1 /* CenterAlways */: {
                         blockScroll = targetBlock - viewportHeight / 2;
                         break;
                     }
-                    case 0 /* AlignToEdgeIfNeeded */: {
+                    case 0 /* ToEdgeIfNeeded */: {
                         blockScroll = alignNearest(viewportY, viewportY + viewportHeight, viewportHeight, borderTop, borderBottom, viewportY + targetBlock, viewportY + targetBlock + targetHeight, targetHeight);
@@ -447,15 +564,15 @@ break;
                 switch (alignX) {
-                    case 4 /* AlignLeftAlways */: {
+                    case 2 /* LeftOrTop */: {
                         inlineScroll = targetInline;
                         break;
                     }
-                    case 5 /* AlignRightAlways */: {
+                    case 3 /* RightOrBottom */: {
                         inlineScroll = targetInline - viewportWidth;
                         break;
                     }
-                    case 1 /* AlignCenterAlways */: {
+                    case 1 /* CenterAlways */: {
                         inlineScroll = targetInline - viewportWidth / 2;
                         break;
                     }
-                    case 0 /* AlignToEdgeIfNeeded */: {
+                    case 0 /* ToEdgeIfNeeded */: {
                         inlineScroll = alignNearest(viewportX, viewportX + viewportWidth, viewportWidth, borderLeft, borderRight, viewportX + targetInline, viewportX + targetInline + targetWidth, targetWidth);
@@ -465,5 +582,4 @@ break;
                 }
-                // Apply scroll position offsets and ensure they are within bounds
-                blockScroll = Math.max(0, blockScroll + viewportY);
-                inlineScroll = Math.max(0, inlineScroll + viewportX);
+                blockScroll += viewportY;
+                inlineScroll += viewportX;
             }
@@ -473,15 +589,15 @@ else {
                 switch (alignY) {
-                    case 2 /* AlignTopAlways */: {
+                    case 2 /* LeftOrTop */: {
                         blockScroll = targetBlock - top - borderTop;
                         break;
                     }
-                    case 3 /* AlignBottomAlways */: {
+                    case 3 /* RightOrBottom */: {
                         blockScroll = targetBlock - bottom + borderBottom + scrollbarHeight;
                         break;
                     }
-                    case 1 /* AlignCenterAlways */: {
+                    case 1 /* CenterAlways */: {
                         blockScroll = targetBlock - (top + height / 2) + scrollbarHeight / 2;
                         break;
                     }
-                    case 0 /* AlignToEdgeIfNeeded */: {
+                    case 0 /* ToEdgeIfNeeded */: {
                         blockScroll = alignNearest(top, bottom, height, borderTop, borderBottom + scrollbarHeight, targetBlock, targetBlock + targetHeight, targetHeight);
@@ -492,15 +608,15 @@ break;
                 switch (alignX) {
-                    case 4 /* AlignLeftAlways */: {
+                    case 2 /* LeftOrTop */: {
                         inlineScroll = targetInline - left - borderLeft;
                         break;
                     }
-                    case 5 /* AlignRightAlways */: {
+                    case 3 /* RightOrBottom */: {
                         inlineScroll = targetInline - right + borderRight + scrollbarWidth;
                         break;
                     }
-                    case 1 /* AlignCenterAlways */: {
+                    case 1 /* CenterAlways */: {
                         inlineScroll = targetInline - (left + width / 2) + scrollbarWidth / 2;
                         break;
                     }
-                    case 0 /* AlignToEdgeIfNeeded */: {
+                    case 0 /* ToEdgeIfNeeded */: {
                         inlineScroll = alignNearest(left, right, width, borderLeft, borderRight + scrollbarWidth, targetInline, targetInline + targetWidth, targetWidth);
@@ -512,4 +628,4 @@ break;
                 // Ensure scroll coordinates are not out of bounds while applying scroll offsets
-                blockScroll = Math.max(0, Math.min(scrollTop + blockScroll, frame.scrollHeight - height + scrollbarHeight));
-                inlineScroll = Math.max(0, Math.min(scrollLeft + inlineScroll, frame.scrollWidth - width + scrollbarWidth));
+                blockScroll = clamp(scrollTop + blockScroll, frame.scrollHeight - height + scrollbarHeight);
+                inlineScroll = clamp(scrollLeft + inlineScroll, frame.scrollWidth - width + scrollbarWidth);
                 // Cache the offset so that parent frames can scroll this into view correctly
@@ -520,3 +636,3 @@ targetBlock += scrollTop - blockScroll;
             actions.push(() => elementScroll(frame, { ...options, top: blockScroll, left: inlineScroll }));
-        }
+        });
         actions.forEach((run) => run());
@@ -523,0 +639,0 @@ };

package.json

@@ -5,3 +5,3 @@ {
     "description": "Smooth Scroll behavior polyfill",
-    "version": "1.2.3",
+    "version": "1.2.4",
     "author": {
@@ -8,0 +8,0 @@ "name": "Dustan Kasten",

src/Element.scrollIntoView.ts

@@ -12,57 +12,143 @@ import {
 const enum ScrollAlignment {
-    AlignToEdgeIfNeeded,
-    AlignCenterAlways,
-    AlignTopAlways,
-    AlignBottomAlways,
-    AlignLeftAlways,
-    AlignRightAlways,
+    ToEdgeIfNeeded,
+    CenterAlways,
+    LeftOrTop,
+    RightOrBottom,
 }
-const enum ScrollOrientation {
-    HorizontalScroll,
-    VerticalScroll,
+
+const enum WritingMode {
+    HorizontalTb,
+    VerticalRl,
+    VerticalLr,
+    SidewaysRl,
+    SidewaysLr,
 }
 
-// https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/dom/element.cc?l=647-681&rcl=02a6466f4efa021e4e198f373eccda3cfc56142b
+// https://drafts.csswg.org/css-writing-modes-4/#block-flow
+const normalizeWritingMode = (writingMode: string): WritingMode => {
+    switch (writingMode) {
+        case "horizontal-tb":
+        case "lr":
+        case "lr-tb":
+        case "rl":
+        case "rl-tb":
+            return WritingMode.HorizontalTb;
+
+        case "vertical-rl":
+        case "tb":
+        case "tb-rl":
+            return WritingMode.VerticalRl;
+
+        case "vertical-lr":
+        case "tb-lr":
+            return WritingMode.VerticalLr;
+
+        case "sideways-rl":
+            return WritingMode.SidewaysRl;
+
+        case "sideways-lr":
+            return WritingMode.SidewaysLr;
+    }
+
+    return WritingMode.HorizontalTb;
+};
+
+type Tuple2<T> = [T, T];
+
+// https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/dom/element.cc;l=1097-1189;drc=6a7533d4a1e9f2372223a9d912a9e53a6fa35ae0
 const toPhysicalAlignment = (
     options: ScrollIntoViewOptions,
-    axis: ScrollOrientation,
-    isHorizontalWritingMode: boolean,
-    isFlippedBlocksMode: boolean,
-): ScrollAlignment => {
-    const alignment =
-        (axis === ScrollOrientation.HorizontalScroll && isHorizontalWritingMode) ||
-        (axis === ScrollOrientation.VerticalScroll && !isHorizontalWritingMode)
-            ? options.inline
-            : options.block;
+    writingMode: WritingMode,
+    isLTR: boolean,
+): Tuple2<ScrollAlignment> => {
+    let [xPos, yPos] = [options.block || "start", options.inline || "nearest"];
 
-    if (alignment === "center") {
-        return ScrollAlignment.AlignCenterAlways;
+    /**  0b{vertical}{horizontal}  0: normal, 1: reverse */
+    let layout = 0b00;
+
+    const enum OP {
+        ReverseHorizontal = 0b01,
+        ReverseVertical = 0b10,
     }
-    if (alignment === "nearest") {
-        return ScrollAlignment.AlignToEdgeIfNeeded;
+
+    /**
+     * WritingMode.VerticalLr: ↓→
+     * | 1 | 4 |   |
+     * | 2 | 5 |   |
+     * | 3 |   |   |
+     *
+     * RTL: ↑→
+     * | 3 |   |   |
+     * | 2 | 5 |   |
+     * | 1 | 4 |   |
+     */
+    if (!isLTR) {
+        layout ^= OP.ReverseVertical;
     }
-    if (alignment === "start") {
-        return axis === ScrollOrientation.HorizontalScroll
-            ? isFlippedBlocksMode
-                ? ScrollAlignment.AlignRightAlways
-                : ScrollAlignment.AlignLeftAlways
-            : ScrollAlignment.AlignTopAlways;
+
+    switch (writingMode) {
+        /**
+         * ↓→
+         * | 1 | 2 | 3 |
+         * | 4 | 5 |   |
+         * |   |   |   |
+         *
+         * RTL: ↓←
+         * | 3 | 2 | 1 |
+         * |   | 5 | 4 |
+         * |   |   |   |
+         */
+        case WritingMode.HorizontalTb:
+            // swap horizontal and vertical
+            layout = (layout >> 1) | ((layout & 1) << 1);
+            [xPos, yPos] = [yPos, xPos];
+            break;
+
+        /**
+         * ↓←
+         * |   | 4 | 1 |
+         * |   | 5 | 2 |
+         * |   |   | 3 |
+         *
+         * RTL: ↑←
+         * |   |   | 3 |
+         * |   | 5 | 2 |
+         * |   | 4 | 1 |
+         */
+        case WritingMode.VerticalRl:
+        case WritingMode.SidewaysRl:
+            //  reverse horizontal
+            layout ^= OP.ReverseHorizontal;
+            break;
+
+        /**
+         * ↑→
+         * | 3 |   |   |
+         * | 2 | 5 |   |
+         * | 1 | 4 |   |
+         *
+         * RTL: ↓→
+         * | 1 | 4 |   |
+         * | 2 | 5 |   |
+         * | 3 |   |   |
+         */
+        case WritingMode.SidewaysLr:
+            // reverse vertical
+            layout ^= OP.ReverseVertical;
+            break;
     }
-    if (alignment === "end") {
-        return axis === ScrollOrientation.HorizontalScroll
-            ? isFlippedBlocksMode
-                ? ScrollAlignment.AlignLeftAlways
-                : ScrollAlignment.AlignRightAlways
-            : ScrollAlignment.AlignBottomAlways;
-    }
 
-    // Default values
-    if (isHorizontalWritingMode) {
-        return axis === ScrollOrientation.HorizontalScroll
-            ? ScrollAlignment.AlignToEdgeIfNeeded
-            : ScrollAlignment.AlignTopAlways;
-    }
-    return axis === ScrollOrientation.HorizontalScroll
-        ? ScrollAlignment.AlignLeftAlways
-        : ScrollAlignment.AlignToEdgeIfNeeded;
+    return [xPos, yPos].map((value, index) => {
+        switch (value) {
+            case "center":
+                return ScrollAlignment.CenterAlways;
+            case "nearest":
+                return ScrollAlignment.ToEdgeIfNeeded;
+
+            default: {
+                const reverse = (layout >> index) & 1;
+                return (value === "start") === !reverse ? ScrollAlignment.LeftOrTop : ScrollAlignment.RightOrBottom;
+            }
+        }
+    }) as Tuple2<ScrollAlignment>;
 };
@@ -213,10 +299,30 @@
 
-const canOverflow = (overflow: string | null) => {
+const canOverflow = (overflow: string | null): boolean => {
     return overflow !== "visible" && overflow !== "clip";
 };
 
-const isScrollable = (element: Element) => {
+const getFrameElement = (element: Element): Element | null => {
+    if (!element.ownerDocument || !element.ownerDocument.defaultView) {
+        return null;
+    }
+
+    try {
+        return element.ownerDocument.defaultView.frameElement;
+    } catch (e) {
+        return null;
+    }
+};
+
+const isHiddenByFrame = (element: Element): boolean => {
+    const frame = getFrameElement(element);
+    if (!frame) {
+        return false;
+    }
+
+    return frame.clientHeight < element.scrollHeight || frame.clientWidth < element.scrollWidth;
+};
+
+const isScrollable = (element: Element, computedStyle: CSSStyleDeclaration): boolean => {
     if (element.clientHeight < element.scrollHeight || element.clientWidth < element.scrollWidth) {
-        const style = getComputedStyle(element);
-        return canOverflow(style.overflowY) || canOverflow(style.overflowX);
+        return canOverflow(computedStyle.overflowY) || canOverflow(computedStyle.overflowX) || isHiddenByFrame(element);
     }
@@ -229,12 +335,47 @@
     const parentNode = element.parentNode;
-    return (
-        parentNode &&
-        (parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE
-            ? (parentNode as ShadowRoot).host
-            : (parentNode as Element))
-    );
+
+    if (parentNode !== null && parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+        return (parentNode as ShadowRoot).host;
+    }
+
+    return parentNode as Element | null;
 };
 
+const clamp = (value: number, width: number): number => {
+    if (value < -width) {
+        return -width;
+    }
+
+    if (value > width) {
+        return width;
+    }
+
+    return value;
+};
+
+const isCSSPropertySupported = (property: string): boolean => property in document.documentElement.style;
+
+const getSupportedScrollMarginProperty = (): string => {
+    // Webkit uses "scroll-snap-margin" https://bugs.webkit.org/show_bug.cgi?id=189265.
+    return ["scroll-margin", "scroll-snap-margin"].filter(isCSSPropertySupported)[0];
+};
+
+const getElementScrollSnapArea = (element: Element, computedStyle: CSSStyleDeclaration) => {
+    const { top, right, bottom, left } = element.getBoundingClientRect();
+    const [scrollMarginTop, scrollMarginRight, scrollMarginBottom, scrollMarginLeft] = [
+        "top",
+        "right",
+        "bottom",
+        "left",
+    ].map((edge) => {
+        const scrollProperty = getSupportedScrollMarginProperty();
+        const value = computedStyle.getPropertyValue(`${scrollProperty}-${edge}`);
+        return parseInt(value, 10) || 0;
+    });
+
+    return [top - scrollMarginTop, right + scrollMarginRight, bottom + scrollMarginBottom, left - scrollMarginLeft];
+};
+
 export const elementScrollIntoView = (element: Element, options: IScrollIntoViewOptions): void => {
-    if (!element.ownerDocument.documentElement.contains(element)) {
+    if (element.isConnected === false) {
         return;
@@ -253,2 +394,4 @@ }
 
+    const documentElementStyle = getComputedStyle(document.documentElement);
+
     for (let cursor = parentElement(element); cursor !== null; cursor = parentElement(cursor)) {
@@ -261,4 +404,10 @@ // Stop when we reach the viewport
 
+        const cursorStyle = getComputedStyle(cursor);
+
         // Skip document.body if it's not the scrollingElement and documentElement isn't independently scrollable
-        if (cursor === document.body && isScrollable(cursor) && !isScrollable(document.documentElement)) {
+        if (
+            cursor === document.body &&
+            isScrollable(cursor, cursorStyle) &&
+            !isScrollable(document.documentElement, documentElementStyle)
+        ) {
             continue;
@@ -269,5 +418,9 @@ }
         // this code only runs if the loop haven't already hit the viewport or a custom boundary
-        if (isScrollable(cursor)) {
+        if (isScrollable(cursor, cursorStyle)) {
             frames.push(cursor);
         }
+
+        if (cursorStyle.position === "fixed") {
+            break;
+        }
     }
@@ -288,44 +441,29 @@
 
-    const {
-        height: targetHeight,
-        width: targetWidth,
-        top: targetTop,
-        right: targetRight,
-        bottom: targetBottom,
-        left: targetLeft,
-    } = element.getBoundingClientRect();
-
     const computedStyle = getComputedStyle(element);
-    const writingMode =
-        computedStyle.writingMode ||
-        computedStyle.getPropertyValue("-webkit-writing-mode") ||
-        computedStyle.getPropertyValue("-ms-writing-mode") ||
-        "horizontal-tb";
 
-    const isHorizontalWritingMode = ["horizontal-tb", "lr", "lr-tb", "rl"].some((mode) => mode === writingMode);
-    const isFlippedBlocksWritingMode = ["vertical-rl", "tb-rl"].some((mode) => mode === writingMode);
+    const [targetTop, targetRight, targetBottom, targetLeft] = getElementScrollSnapArea(element, computedStyle);
+    const targetHeight = targetBottom - targetTop;
+    const targetWidth = targetRight - targetLeft;
 
-    const alignX = toPhysicalAlignment(
-        options,
-        ScrollOrientation.HorizontalScroll,
-        isHorizontalWritingMode,
-        isFlippedBlocksWritingMode,
+    const writingMode = normalizeWritingMode(
+        computedStyle.writingMode ||
+            computedStyle.getPropertyValue("-webkit-writing-mode") ||
+            computedStyle.getPropertyValue("-ms-writing-mode"),
     );
-    const alignY = toPhysicalAlignment(
-        options,
-        ScrollOrientation.VerticalScroll,
-        isHorizontalWritingMode,
-        isFlippedBlocksWritingMode,
-    );
 
+    const isLTR = computedStyle.direction !== "rtl";
+
+    const [alignX, alignY] = toPhysicalAlignment(options, writingMode, isLTR);
+
     let targetBlock = (() => {
         switch (alignY) {
-            case ScrollAlignment.AlignTopAlways:
-            case ScrollAlignment.AlignToEdgeIfNeeded:
+            case ScrollAlignment.CenterAlways:
+                return targetTop + targetHeight / 2;
+
+            case ScrollAlignment.LeftOrTop:
+            case ScrollAlignment.ToEdgeIfNeeded:
                 return targetTop;
-            case ScrollAlignment.AlignBottomAlways:
+
+            case ScrollAlignment.RightOrBottom:
                 return targetBottom;
-            // case ScrollAlignment.AlignCenterAlways:
-            default:
-                return targetTop + targetHeight / 2;
         }
@@ -336,9 +474,10 @@ })();
         switch (alignX) {
-            case ScrollAlignment.AlignCenterAlways:
+            case ScrollAlignment.CenterAlways:
                 return targetLeft + targetWidth / 2;
-            case ScrollAlignment.AlignRightAlways:
+
+            case ScrollAlignment.RightOrBottom:
                 return targetRight;
-            // case ScrollAlignment.AlignLeftAlways:
-            // case ScrollAlignment.AlignToEdgeIfNeeded:
-            default:
+
+            case ScrollAlignment.LeftOrTop:
+            case ScrollAlignment.ToEdgeIfNeeded:
                 return targetLeft;
@@ -351,10 +490,10 @@ }
     const actions: IAction[] = [];
-    for (const frame of frames) {
+    frames.forEach((frame) => {
         const { height, width, top, right, bottom, left } = frame.getBoundingClientRect();
 
         const frameStyle = getComputedStyle(frame);
-        const borderLeft = parseInt(frameStyle.borderLeftWidth as string, 10);
-        const borderTop = parseInt(frameStyle.borderTopWidth as string, 10);
-        const borderRight = parseInt(frameStyle.borderRightWidth as string, 10);
-        const borderBottom = parseInt(frameStyle.borderBottomWidth as string, 10);
+        const borderLeft = parseInt(frameStyle.borderLeftWidth, 10);
+        const borderTop = parseInt(frameStyle.borderTopWidth, 10);
+        const borderRight = parseInt(frameStyle.borderRightWidth, 10);
+        const borderBottom = parseInt(frameStyle.borderBottomWidth, 10);
 
@@ -380,15 +519,15 @@ let blockScroll = 0;
             switch (alignY) {
-                case ScrollAlignment.AlignTopAlways: {
+                case ScrollAlignment.LeftOrTop: {
                     blockScroll = targetBlock;
                     break;
                 }
-                case ScrollAlignment.AlignBottomAlways: {
+                case ScrollAlignment.RightOrBottom: {
                     blockScroll = targetBlock - viewportHeight;
                     break;
                 }
-                case ScrollAlignment.AlignCenterAlways: {
+                case ScrollAlignment.CenterAlways: {
                     blockScroll = targetBlock - viewportHeight / 2;
                     break;
                 }
-                case ScrollAlignment.AlignToEdgeIfNeeded: {
+                case ScrollAlignment.ToEdgeIfNeeded: {
                     blockScroll = alignNearest(
@@ -409,15 +548,15 @@ viewportY,
             switch (alignX) {
-                case ScrollAlignment.AlignLeftAlways: {
+                case ScrollAlignment.LeftOrTop: {
                     inlineScroll = targetInline;
                     break;
                 }
-                case ScrollAlignment.AlignRightAlways: {
+                case ScrollAlignment.RightOrBottom: {
                     inlineScroll = targetInline - viewportWidth;
                     break;
                 }
-                case ScrollAlignment.AlignCenterAlways: {
+                case ScrollAlignment.CenterAlways: {
                     inlineScroll = targetInline - viewportWidth / 2;
                     break;
                 }
-                case ScrollAlignment.AlignToEdgeIfNeeded: {
+                case ScrollAlignment.ToEdgeIfNeeded: {
                     inlineScroll = alignNearest(
@@ -437,5 +576,4 @@ viewportX,
 
-            // Apply scroll position offsets and ensure they are within bounds
-            blockScroll = Math.max(0, blockScroll + viewportY);
-            inlineScroll = Math.max(0, inlineScroll + viewportX);
+            blockScroll += viewportY;
+            inlineScroll += viewportX;
         } else {
@@ -445,15 +583,15 @@ // Handle each scrolling frame that might exist between the target and the viewport
             switch (alignY) {
-                case ScrollAlignment.AlignTopAlways: {
+                case ScrollAlignment.LeftOrTop: {
                     blockScroll = targetBlock - top - borderTop;
                     break;
                 }
-                case ScrollAlignment.AlignBottomAlways: {
+                case ScrollAlignment.RightOrBottom: {
                     blockScroll = targetBlock - bottom + borderBottom + scrollbarHeight;
                     break;
                 }
-                case ScrollAlignment.AlignCenterAlways: {
+                case ScrollAlignment.CenterAlways: {
                     blockScroll = targetBlock - (top + height / 2) + scrollbarHeight / 2;
                     break;
                 }
-                case ScrollAlignment.AlignToEdgeIfNeeded: {
+                case ScrollAlignment.ToEdgeIfNeeded: {
                     blockScroll = alignNearest(
@@ -474,15 +612,15 @@ top,
             switch (alignX) {
-                case ScrollAlignment.AlignLeftAlways: {
+                case ScrollAlignment.LeftOrTop: {
                     inlineScroll = targetInline - left - borderLeft;
                     break;
                 }
-                case ScrollAlignment.AlignRightAlways: {
+                case ScrollAlignment.RightOrBottom: {
                     inlineScroll = targetInline - right + borderRight + scrollbarWidth;
                     break;
                 }
-                case ScrollAlignment.AlignCenterAlways: {
+                case ScrollAlignment.CenterAlways: {
                     inlineScroll = targetInline - (left + width / 2) + scrollbarWidth / 2;
                     break;
                 }
-                case ScrollAlignment.AlignToEdgeIfNeeded: {
+                case ScrollAlignment.ToEdgeIfNeeded: {
                     inlineScroll = alignNearest(
@@ -504,4 +642,4 @@ left,
             // Ensure scroll coordinates are not out of bounds while applying scroll offsets
-            blockScroll = Math.max(0, Math.min(scrollTop + blockScroll, frame.scrollHeight - height + scrollbarHeight));
-            inlineScroll = Math.max(0, Math.min(scrollLeft + inlineScroll, frame.scrollWidth - width + scrollbarWidth));
+            blockScroll = clamp(scrollTop + blockScroll, frame.scrollHeight - height + scrollbarHeight);
+            inlineScroll = clamp(scrollLeft + inlineScroll, frame.scrollWidth - width + scrollbarWidth);
 
@@ -514,3 +652,3 @@ // Cache the offset so that parent frames can scroll this into view correctly
         actions.push(() => elementScroll(frame, { ...options, top: blockScroll, left: inlineScroll }));
-    }
+    });
 
@@ -517,0 +655,0 @@ actions.forEach((run) => run());

No alert changes

Improved metrics

Total package byte prevSize

559661

8.26%

Lines of code

5397

14.37%

No dependency changes