scroll-into-view-if-needed - npm Package Compare versions

Comparing version 2.1.0 to 2.1.1

compute.js

@@ -12,3 +12,3 @@ "use strict";
 
-function hasScrollableSpace(el, axis) {
+var hasScrollableSpace = function hasScrollableSpace(el, axis) {
   if (axis === 'Y') {
@@ -23,60 +23,29 @@ return el.clientHeight < el.scrollHeight;
   return false;
-}
+};
 
-function isScrollable(el) {
-  var isScrollableY = hasScrollableSpace(el, 'Y');
-  var isScrollableX = hasScrollableSpace(el, 'X');
-  return isScrollableY || isScrollableX;
-}
+var canOverflow = function canOverflow(el, axis) {
+  var overflowValue = window.getComputedStyle(el, null)['overflow' + axis];
+  return overflowValue !== 'visible' && overflowValue !== 'clip';
+};
 
-var alignNearestBlock = function alignNearestBlock(targetStart, targetSize, frame, frameRect) {
-  var targetEnd = targetStart + targetSize;
-  var elementEdgeA = frame.scrollTop + targetStart;
-  var elementEdgeB = frame.scrollTop + targetEnd;
-  var scrollingEdgeA = frame.scrollTop;
-  var height = frame === document.documentElement ? frame.clientHeight : frameRect.bottom;
-  var scrollingEdgeB = document.documentElement ? frame.scrollTop + height : frameRect.bottom;
+var isScrollable = function isScrollable(el) {
+  return hasScrollableSpace(el, 'Y') && canOverflow(el, 'Y') || hasScrollableSpace(el, 'X') && canOverflow(el, 'X');
+};
 
-  if (elementEdgeA < scrollingEdgeA && elementEdgeB > scrollingEdgeB || elementEdgeA > scrollingEdgeA && elementEdgeB < scrollingEdgeB) {
+var alignNearest = function alignNearest(scrollingEdgeStart, scrollingEdgeEnd, scrollingSize, elementEdgeStart, elementEdgeEnd, elementSize) {
+  if (elementEdgeStart < scrollingEdgeStart && elementEdgeEnd > scrollingEdgeEnd || elementEdgeStart > scrollingEdgeStart && elementEdgeEnd < scrollingEdgeEnd) {
     return 0;
   }
 
-  if (elementEdgeA < scrollingEdgeA && targetSize < height) {
-    return targetStart;
+  if (elementEdgeStart < scrollingEdgeStart && elementSize < scrollingSize || elementEdgeEnd > scrollingEdgeEnd && elementSize > scrollingSize) {
+    return elementEdgeStart - scrollingEdgeStart;
   }
 
-  if (elementEdgeB > scrollingEdgeB && targetSize > height) {
-    return targetStart;
+  if (elementEdgeEnd > scrollingEdgeEnd && elementSize < scrollingSize || elementEdgeStart < scrollingEdgeStart && elementSize > scrollingSize) {
+    return elementEdgeEnd - scrollingEdgeEnd;
   }
 
-  if (elementEdgeB > scrollingEdgeB && targetSize < height) {
-    return elementEdgeB - scrollingEdgeB;
-  }
-
-  if (elementEdgeA < scrollingEdgeA && targetSize > height) {
-    return elementEdgeB - scrollingEdgeB;
-  }
-
   return 0;
 };
 
-var alignNearestInline = function alignNearestInline(targetStart, targetSize, frame, frameRect) {
-  var targetEnd = targetStart + targetSize;
-  var elementEdgeC = frame.scrollLeft + targetStart;
-  var elementEdgeD = frame.scrollLeft + targetEnd;
-  var scrollingEdgeC = frame.scrollLeft;
-  var scrollingEdgeD = frame.scrollLeft + frame.clientWidth;
-  console.log('test');
-
-  if (elementEdgeC < scrollingEdgeC && targetSize < frame.clientWidth || frameRect.left < 0 && targetEnd > frameRect.left && targetSize < frame.clientWidth) {
-    return targetStart;
-  }
-
-  if (elementEdgeD < scrollingEdgeD && targetSize < frame.clientWidth || frameRect.right > 0 && targetEnd > frameRect.right && targetSize < frame.clientWidth) {
-    return targetEnd - frameRect.left - frame.clientWidth;
-  }
-
-  return 0;
-};
-
 var compute = function compute(target, options) {
@@ -97,12 +66,17 @@ if (options === void 0) {
 
+  var checkBoundary = typeof boundary == 'function' ? boundary : function (parent) {
+    return parent !== boundary;
+  };
+
   if (!isElement(target)) {
-    throw new Error('Element is required in scrollIntoViewIfNeeded');
+    throw new Error('Element is required in scrollIntoView');
   }
 
   var targetRect = target.getBoundingClientRect();
+  var viewport = document.documentElement;
   var frames = [];
   var parent;
 
-  while (isElement(parent = target.parentNode) && target !== boundary) {
-    if (isScrollable(parent)) {
+  while (isElement(parent = target.parentNode) && checkBoundary(target)) {
+    if (isScrollable(parent) || parent === viewport) {
       frames.push(parent);
@@ -114,2 +88,5 @@ }
 
+  var viewportWidth = window.visualViewport ? window.visualViewport.width : viewport.clientWidth;
+  var viewportHeight = window.visualViewport ? window.visualViewport.height : viewport.clientHeight;
+
   if (scrollMode === 'if-needed') {
@@ -127,4 +104,10 @@ var isVisible = frames.every(function (frame) {
 
-      if (frame === document.documentElement && targetRect.bottom > frame.clientHeight) {
-        return false;
+      if (frame === viewport) {
+        if (targetRect.bottom > viewportHeight) {
+          return false;
+        }
+
+        if (targetRect.left > viewportWidth) {
+          return false;
+        }
       }
@@ -152,3 +135,3 @@
 
-      if (document.documentElement === frame) {
+      if (viewport === frame) {
         blockScroll = frame.scrollTop + targetBlock;
@@ -167,3 +150,3 @@ } else {
 
-      if (document.documentElement === frame) {
+      if (viewport === frame) {
         blockScroll = frame.scrollTop + targetBlock - frame.clientHeight / 2;
@@ -183,3 +166,3 @@ } else {
 
-      if (document.documentElement === frame) {
+      if (viewport === frame) {
         blockScroll = frame.scrollTop + targetBlock - frame.clientHeight;
@@ -199,8 +182,11 @@ } else {
 
-      var _offset3 = alignNearestBlock(targetBlock, targetRect.height, frame, frameRect);
+      if (viewport === frame) {
+        var _offset3 = alignNearest(frame.scrollTop, frame.scrollTop + viewportHeight, viewportHeight, frame.scrollTop + targetBlock, frame.scrollTop + targetBlock + targetRect.height, targetRect.height);
 
-      blockScroll = frame.scrollTop + _offset3;
+        blockScroll = frame.scrollTop + _offset3;
+      } else {
+        var _offset4 = alignNearest(frameRect.top, frameRect.bottom, frameRect.height, targetBlock, targetBlock + targetRect.height, targetRect.height);
 
-      if (document.documentElement !== frame) {
-        targetBlock -= _offset3;
+        blockScroll = frame.scrollTop + _offset4;
+        targetBlock -= _offset4;
       }
@@ -214,8 +200,8 @@ }
 
-      if (document.documentElement === frame) {
+      if (viewport === frame) {
         inlineScroll = frame.scrollLeft + targetInline;
       } else {
-        var _offset4 = Math.min(targetInline - frameRect.left, frame.scrollLeft - frame.clientLeft - frame.scrollLeft);
+        var _offset5 = Math.min(targetInline - frameRect.left, frame.scrollHeight - frame.clientLeft - frame.scrollLeft);
 
-        inlineScroll = frame.scrollLeft + _offset4;
+        inlineScroll = frame.scrollLeft + _offset5;
         targetInline -= inlineScroll - frame.scrollLeft;
@@ -230,8 +216,8 @@ }
 
-      if (document.documentElement === frame) {
+      if (viewport === frame) {
         inlineScroll = frame.scrollLeft + targetInline - frame.clientWidth / 2;
       } else {
-        var _offset5 = 0 - Math.min(frameRect.left + frameRect.width / 2 - targetInline, frame.scrollLeft);
+        var _offset6 = 0 - Math.min(frameRect.left + frameRect.width / 2 - targetInline, frame.scrollLeft);
 
-        inlineScroll = frame.scrollLeft + _offset5;
+        inlineScroll = frame.scrollLeft + _offset6;
         targetInline += frame.scrollLeft - inlineScroll;
@@ -246,8 +232,8 @@ }
 
-      if (document.documentElement === frame) {
+      if (viewport === frame) {
         inlineScroll = frame.scrollLeft + targetInline - frame.clientWidth;
       } else {
-        var _offset6 = 0 - Math.min(frameRect.right - targetInline, frame.scrollLeft);
+        var _offset7 = 0 - Math.min(frameRect.right - targetInline, frame.scrollLeft);
 
-        inlineScroll = frame.scrollLeft + _offset6;
+        inlineScroll = frame.scrollLeft + _offset7;
         targetInline += frame.scrollLeft - inlineScroll;
@@ -262,8 +248,11 @@ }
 
-      var _offset7 = alignNearestInline(targetInline, targetRect.width, frame, frameRect);
+      if (viewport === frame) {
+        var _offset8 = alignNearest(frame.scrollLeft, frame.scrollLeft + viewportWidth, viewportWidth, frame.scrollLeft + targetInline, frame.scrollLeft + targetInline + targetRect.width, targetRect.width);
 
-      inlineScroll = frame.scrollLeft + _offset7;
+        inlineScroll = frame.scrollLeft + _offset8;
+      } else {
+        var _offset9 = alignNearest(frameRect.left, frameRect.right, frameRect.width, targetInline, targetInline + targetRect.width, targetRect.width);
 
-      if (document.documentElement !== frame) {
-        targetInline -= _offset7;
+        inlineScroll = frame.scrollLeft + _offset9;
+        targetInline -= _offset9;
       }
@@ -270,0 +259,0 @@ }

es/compute.js

@@ -7,3 +7,3 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function hasScrollableSpace(el, axis) {
+var hasScrollableSpace = function hasScrollableSpace(el, axis) {
   if (axis === 'Y') {
@@ -18,60 +18,29 @@ return el.clientHeight < el.scrollHeight;
   return false;
-}
+};
 
-function isScrollable(el) {
-  var isScrollableY = hasScrollableSpace(el, 'Y');
-  var isScrollableX = hasScrollableSpace(el, 'X');
-  return isScrollableY || isScrollableX;
-}
+var canOverflow = function canOverflow(el, axis) {
+  var overflowValue = window.getComputedStyle(el, null)['overflow' + axis];
+  return overflowValue !== 'visible' && overflowValue !== 'clip';
+};
 
-var alignNearestBlock = function alignNearestBlock(targetStart, targetSize, frame, frameRect) {
-  var targetEnd = targetStart + targetSize;
-  var elementEdgeA = frame.scrollTop + targetStart;
-  var elementEdgeB = frame.scrollTop + targetEnd;
-  var scrollingEdgeA = frame.scrollTop;
-  var height = frame === document.documentElement ? frame.clientHeight : frameRect.bottom;
-  var scrollingEdgeB = document.documentElement ? frame.scrollTop + height : frameRect.bottom;
+var isScrollable = function isScrollable(el) {
+  return hasScrollableSpace(el, 'Y') && canOverflow(el, 'Y') || hasScrollableSpace(el, 'X') && canOverflow(el, 'X');
+};
 
-  if (elementEdgeA < scrollingEdgeA && elementEdgeB > scrollingEdgeB || elementEdgeA > scrollingEdgeA && elementEdgeB < scrollingEdgeB) {
+var alignNearest = function alignNearest(scrollingEdgeStart, scrollingEdgeEnd, scrollingSize, elementEdgeStart, elementEdgeEnd, elementSize) {
+  if (elementEdgeStart < scrollingEdgeStart && elementEdgeEnd > scrollingEdgeEnd || elementEdgeStart > scrollingEdgeStart && elementEdgeEnd < scrollingEdgeEnd) {
     return 0;
   }
 
-  if (elementEdgeA < scrollingEdgeA && targetSize < height) {
-    return targetStart;
+  if (elementEdgeStart < scrollingEdgeStart && elementSize < scrollingSize || elementEdgeEnd > scrollingEdgeEnd && elementSize > scrollingSize) {
+    return elementEdgeStart - scrollingEdgeStart;
   }
 
-  if (elementEdgeB > scrollingEdgeB && targetSize > height) {
-    return targetStart;
+  if (elementEdgeEnd > scrollingEdgeEnd && elementSize < scrollingSize || elementEdgeStart < scrollingEdgeStart && elementSize > scrollingSize) {
+    return elementEdgeEnd - scrollingEdgeEnd;
   }
 
-  if (elementEdgeB > scrollingEdgeB && targetSize < height) {
-    return elementEdgeB - scrollingEdgeB;
-  }
-
-  if (elementEdgeA < scrollingEdgeA && targetSize > height) {
-    return elementEdgeB - scrollingEdgeB;
-  }
-
   return 0;
 };
 
-var alignNearestInline = function alignNearestInline(targetStart, targetSize, frame, frameRect) {
-  var targetEnd = targetStart + targetSize;
-  var elementEdgeC = frame.scrollLeft + targetStart;
-  var elementEdgeD = frame.scrollLeft + targetEnd;
-  var scrollingEdgeC = frame.scrollLeft;
-  var scrollingEdgeD = frame.scrollLeft + frame.clientWidth;
-  console.log('test');
-
-  if (elementEdgeC < scrollingEdgeC && targetSize < frame.clientWidth || frameRect.left < 0 && targetEnd > frameRect.left && targetSize < frame.clientWidth) {
-    return targetStart;
-  }
-
-  if (elementEdgeD < scrollingEdgeD && targetSize < frame.clientWidth || frameRect.right > 0 && targetEnd > frameRect.right && targetSize < frame.clientWidth) {
-    return targetEnd - frameRect.left - frame.clientWidth;
-  }
-
-  return 0;
-};
-
 export var compute = function compute(target, options) {
@@ -92,12 +61,17 @@ if (options === void 0) {
 
+  var checkBoundary = typeof boundary == 'function' ? boundary : function (parent) {
+    return parent !== boundary;
+  };
+
   if (!isElement(target)) {
-    throw new Error('Element is required in scrollIntoViewIfNeeded');
+    throw new Error('Element is required in scrollIntoView');
   }
 
   var targetRect = target.getBoundingClientRect();
+  var viewport = document.documentElement;
   var frames = [];
   var parent;
 
-  while (isElement(parent = target.parentNode) && target !== boundary) {
-    if (isScrollable(parent)) {
+  while (isElement(parent = target.parentNode) && checkBoundary(target)) {
+    if (isScrollable(parent) || parent === viewport) {
       frames.push(parent);
@@ -109,2 +83,5 @@ }
 
+  var viewportWidth = window.visualViewport ? window.visualViewport.width : viewport.clientWidth;
+  var viewportHeight = window.visualViewport ? window.visualViewport.height : viewport.clientHeight;
+
   if (scrollMode === 'if-needed') {
@@ -122,4 +99,10 @@ var isVisible = frames.every(function (frame) {
 
-      if (frame === document.documentElement && targetRect.bottom > frame.clientHeight) {
-        return false;
+      if (frame === viewport) {
+        if (targetRect.bottom > viewportHeight) {
+          return false;
+        }
+
+        if (targetRect.left > viewportWidth) {
+          return false;
+        }
       }
@@ -147,3 +130,3 @@
 
-      if (document.documentElement === frame) {
+      if (viewport === frame) {
         blockScroll = frame.scrollTop + targetBlock;
@@ -162,3 +145,3 @@ } else {
 
-      if (document.documentElement === frame) {
+      if (viewport === frame) {
         blockScroll = frame.scrollTop + targetBlock - frame.clientHeight / 2;
@@ -178,3 +161,3 @@ } else {
 
-      if (document.documentElement === frame) {
+      if (viewport === frame) {
         blockScroll = frame.scrollTop + targetBlock - frame.clientHeight;
@@ -194,8 +177,11 @@ } else {
 
-      var _offset3 = alignNearestBlock(targetBlock, targetRect.height, frame, frameRect);
+      if (viewport === frame) {
+        var _offset3 = alignNearest(frame.scrollTop, frame.scrollTop + viewportHeight, viewportHeight, frame.scrollTop + targetBlock, frame.scrollTop + targetBlock + targetRect.height, targetRect.height);
 
-      blockScroll = frame.scrollTop + _offset3;
+        blockScroll = frame.scrollTop + _offset3;
+      } else {
+        var _offset4 = alignNearest(frameRect.top, frameRect.bottom, frameRect.height, targetBlock, targetBlock + targetRect.height, targetRect.height);
 
-      if (document.documentElement !== frame) {
-        targetBlock -= _offset3;
+        blockScroll = frame.scrollTop + _offset4;
+        targetBlock -= _offset4;
       }
@@ -209,8 +195,8 @@ }
 
-      if (document.documentElement === frame) {
+      if (viewport === frame) {
         inlineScroll = frame.scrollLeft + targetInline;
       } else {
-        var _offset4 = Math.min(targetInline - frameRect.left, frame.scrollLeft - frame.clientLeft - frame.scrollLeft);
+        var _offset5 = Math.min(targetInline - frameRect.left, frame.scrollHeight - frame.clientLeft - frame.scrollLeft);
 
-        inlineScroll = frame.scrollLeft + _offset4;
+        inlineScroll = frame.scrollLeft + _offset5;
         targetInline -= inlineScroll - frame.scrollLeft;
@@ -225,8 +211,8 @@ }
 
-      if (document.documentElement === frame) {
+      if (viewport === frame) {
         inlineScroll = frame.scrollLeft + targetInline - frame.clientWidth / 2;
       } else {
-        var _offset5 = 0 - Math.min(frameRect.left + frameRect.width / 2 - targetInline, frame.scrollLeft);
+        var _offset6 = 0 - Math.min(frameRect.left + frameRect.width / 2 - targetInline, frame.scrollLeft);
 
-        inlineScroll = frame.scrollLeft + _offset5;
+        inlineScroll = frame.scrollLeft + _offset6;
         targetInline += frame.scrollLeft - inlineScroll;
@@ -241,8 +227,8 @@ }
 
-      if (document.documentElement === frame) {
+      if (viewport === frame) {
         inlineScroll = frame.scrollLeft + targetInline - frame.clientWidth;
       } else {
-        var _offset6 = 0 - Math.min(frameRect.right - targetInline, frame.scrollLeft);
+        var _offset7 = 0 - Math.min(frameRect.right - targetInline, frame.scrollLeft);
 
-        inlineScroll = frame.scrollLeft + _offset6;
+        inlineScroll = frame.scrollLeft + _offset7;
         targetInline += frame.scrollLeft - inlineScroll;
@@ -257,8 +243,11 @@ }
 
-      var _offset7 = alignNearestInline(targetInline, targetRect.width, frame, frameRect);
+      if (viewport === frame) {
+        var _offset8 = alignNearest(frame.scrollLeft, frame.scrollLeft + viewportWidth, viewportWidth, frame.scrollLeft + targetInline, frame.scrollLeft + targetInline + targetRect.width, targetRect.width);
 
-      inlineScroll = frame.scrollLeft + _offset7;
+        inlineScroll = frame.scrollLeft + _offset8;
+      } else {
+        var _offset9 = alignNearest(frameRect.left, frameRect.right, frameRect.width, targetInline, targetInline + targetRect.width, targetRect.width);
 
-      if (document.documentElement !== frame) {
-        targetInline -= _offset7;
+        inlineScroll = frame.scrollLeft + _offset9;
+        targetInline -= _offset9;
       }
@@ -265,0 +254,0 @@ }

package.json

@@ -11,3 +11,3 @@ {
   },
-  "version": "2.1.0",
+  "version": "2.1.1",
   "main": "index.js",
@@ -85,2 +85,12 @@ "files": [
   },
+  "bundlesize": [
+    {
+      "path": "./umd/scroll-into-view-if-needed.min.js",
+      "maxSize": "1.5 kB"
+    },
+    {
+      "path": "./umd/scroll-into-view-if-needed.js",
+      "maxSize": "2.3 kB"
+    }
+  ],
   "lint-staged": {
@@ -87,0 +97,0 @@ "*.js": [

README.md

@@ -19,3 +19,3 @@ # This is the work-in-progress, the current stable version is [here](https://github.com/stipsan/scroll-into-view-if-needed/tree/v1)
 ```bash
-yarn add scroll-into-view-if-needed
+yarn add scroll-into-view-if-needed@next
 ```
@@ -66,10 +66,10 @@
     // list is sorted from innermost (closest parent to your target) to outermost (often the document.body or viewport)
-    scrollActions.forEach(([el, scrollTop, scrollLeft]) => {
+    scrollActions.forEach(({ el, top, left }) => {
       // implement the scroll anyway you want
-      el.scrollTop = scrollTop
-      el.scrollLeft = scrollLeft
+      el.scrollTop = top
+      el.scrollLeft = left
 
-      // If you need the relative scroll coordinates, for things like window.scrollBy style logic, just do the math
-      const offsetTop = el.scrollTop - scrollTop
-      const offsetLeft = el.scrollLeft - scrollLeft
+      // If you need the relative scroll coordinates, for things like window.scrollBy style logic or whatever, just do the math
+      const offsetTop = el.scrollTop - top
+      const offsetLeft = el.scrollLeft - left
     }),
@@ -76,0 +76,0 @@ // all the other options (scrollMode, block, inline) still work, so you don't need to reimplement them (unless you really really want to)

typings/compute.d.ts

@@ -0,4 +1,15 @@
+declare global  {
+    interface Window {
+        visualViewport: {
+            height: number;
+            width: number;
+        };
+    }
+}
+export interface checkBoundary {
+    (parent: Element): boolean;
+}
 export interface Options extends ScrollIntoViewOptions {
     scrollMode?: 'always' | 'if-needed';
-    boundary?: Element;
+    boundary?: Element | checkBoundary;
 }
@@ -5,0 +16,0 @@ export declare const compute: (target: Element, options?: Options) => {

umd/scroll-into-view-if-needed.js

@@ -55,3 +55,3 @@ (function (global, factory) {
 
-  function hasScrollableSpace(el, axis) {
+  var hasScrollableSpace = function hasScrollableSpace(el, axis) {
     if (axis === 'Y') {
@@ -66,60 +66,29 @@ return el.clientHeight < el.scrollHeight;
     return false;
-  }
+  };
 
-  function isScrollable(el) {
-    var isScrollableY = hasScrollableSpace(el, 'Y');
-    var isScrollableX = hasScrollableSpace(el, 'X');
-    return isScrollableY || isScrollableX;
-  }
+  var canOverflow = function canOverflow(el, axis) {
+    var overflowValue = window.getComputedStyle(el, null)['overflow' + axis];
+    return overflowValue !== 'visible' && overflowValue !== 'clip';
+  };
 
-  var alignNearestBlock = function alignNearestBlock(targetStart, targetSize, frame, frameRect) {
-    var targetEnd = targetStart + targetSize;
-    var elementEdgeA = frame.scrollTop + targetStart;
-    var elementEdgeB = frame.scrollTop + targetEnd;
-    var scrollingEdgeA = frame.scrollTop;
-    var height = frame === document.documentElement ? frame.clientHeight : frameRect.bottom;
-    var scrollingEdgeB = document.documentElement ? frame.scrollTop + height : frameRect.bottom;
+  var isScrollable = function isScrollable(el) {
+    return hasScrollableSpace(el, 'Y') && canOverflow(el, 'Y') || hasScrollableSpace(el, 'X') && canOverflow(el, 'X');
+  };
 
-    if (elementEdgeA < scrollingEdgeA && elementEdgeB > scrollingEdgeB || elementEdgeA > scrollingEdgeA && elementEdgeB < scrollingEdgeB) {
+  var alignNearest = function alignNearest(scrollingEdgeStart, scrollingEdgeEnd, scrollingSize, elementEdgeStart, elementEdgeEnd, elementSize) {
+    if (elementEdgeStart < scrollingEdgeStart && elementEdgeEnd > scrollingEdgeEnd || elementEdgeStart > scrollingEdgeStart && elementEdgeEnd < scrollingEdgeEnd) {
       return 0;
     }
 
-    if (elementEdgeA < scrollingEdgeA && targetSize < height) {
-      return targetStart;
+    if (elementEdgeStart < scrollingEdgeStart && elementSize < scrollingSize || elementEdgeEnd > scrollingEdgeEnd && elementSize > scrollingSize) {
+      return elementEdgeStart - scrollingEdgeStart;
     }
 
-    if (elementEdgeB > scrollingEdgeB && targetSize > height) {
-      return targetStart;
+    if (elementEdgeEnd > scrollingEdgeEnd && elementSize < scrollingSize || elementEdgeStart < scrollingEdgeStart && elementSize > scrollingSize) {
+      return elementEdgeEnd - scrollingEdgeEnd;
     }
 
-    if (elementEdgeB > scrollingEdgeB && targetSize < height) {
-      return elementEdgeB - scrollingEdgeB;
-    }
-
-    if (elementEdgeA < scrollingEdgeA && targetSize > height) {
-      return elementEdgeB - scrollingEdgeB;
-    }
-
     return 0;
   };
 
-  var alignNearestInline = function alignNearestInline(targetStart, targetSize, frame, frameRect) {
-    var targetEnd = targetStart + targetSize;
-    var elementEdgeC = frame.scrollLeft + targetStart;
-    var elementEdgeD = frame.scrollLeft + targetEnd;
-    var scrollingEdgeC = frame.scrollLeft;
-    var scrollingEdgeD = frame.scrollLeft + frame.clientWidth;
-    console.log('test');
-
-    if (elementEdgeC < scrollingEdgeC && targetSize < frame.clientWidth || frameRect.left < 0 && targetEnd > frameRect.left && targetSize < frame.clientWidth) {
-      return targetStart;
-    }
-
-    if (elementEdgeD < scrollingEdgeD && targetSize < frame.clientWidth || frameRect.right > 0 && targetEnd > frameRect.right && targetSize < frame.clientWidth) {
-      return targetEnd - frameRect.left - frame.clientWidth;
-    }
-
-    return 0;
-  };
-
   var compute = function compute(target, options) {
@@ -140,12 +109,17 @@ if (options === void 0) {
 
+    var checkBoundary = typeof boundary == 'function' ? boundary : function (parent) {
+      return parent !== boundary;
+    };
+
     if (!isElement(target)) {
-      throw new Error('Element is required in scrollIntoViewIfNeeded');
+      throw new Error('Element is required in scrollIntoView');
     }
 
     var targetRect = target.getBoundingClientRect();
+    var viewport = document.documentElement;
     var frames = [];
     var parent;
 
-    while (isElement(parent = target.parentNode) && target !== boundary) {
-      if (isScrollable(parent)) {
+    while (isElement(parent = target.parentNode) && checkBoundary(target)) {
+      if (isScrollable(parent) || parent === viewport) {
         frames.push(parent);
@@ -157,2 +131,5 @@ }
 
+    var viewportWidth = window.visualViewport ? window.visualViewport.width : viewport.clientWidth;
+    var viewportHeight = window.visualViewport ? window.visualViewport.height : viewport.clientHeight;
+
     if (scrollMode === 'if-needed') {
@@ -170,4 +147,10 @@ var isVisible = frames.every(function (frame) {
 
-        if (frame === document.documentElement && targetRect.bottom > frame.clientHeight) {
-          return false;
+        if (frame === viewport) {
+          if (targetRect.bottom > viewportHeight) {
+            return false;
+          }
+
+          if (targetRect.left > viewportWidth) {
+            return false;
+          }
         }
@@ -195,3 +178,3 @@
 
-        if (document.documentElement === frame) {
+        if (viewport === frame) {
           blockScroll = frame.scrollTop + targetBlock;
@@ -210,3 +193,3 @@ } else {
 
-        if (document.documentElement === frame) {
+        if (viewport === frame) {
           blockScroll = frame.scrollTop + targetBlock - frame.clientHeight / 2;
@@ -226,3 +209,3 @@ } else {
 
-        if (document.documentElement === frame) {
+        if (viewport === frame) {
           blockScroll = frame.scrollTop + targetBlock - frame.clientHeight;
@@ -242,8 +225,11 @@ } else {
 
-        var _offset3 = alignNearestBlock(targetBlock, targetRect.height, frame, frameRect);
+        if (viewport === frame) {
+          var _offset3 = alignNearest(frame.scrollTop, frame.scrollTop + viewportHeight, viewportHeight, frame.scrollTop + targetBlock, frame.scrollTop + targetBlock + targetRect.height, targetRect.height);
 
-        blockScroll = frame.scrollTop + _offset3;
+          blockScroll = frame.scrollTop + _offset3;
+        } else {
+          var _offset4 = alignNearest(frameRect.top, frameRect.bottom, frameRect.height, targetBlock, targetBlock + targetRect.height, targetRect.height);
 
-        if (document.documentElement !== frame) {
-          targetBlock -= _offset3;
+          blockScroll = frame.scrollTop + _offset4;
+          targetBlock -= _offset4;
         }
@@ -257,8 +243,8 @@ }
 
-        if (document.documentElement === frame) {
+        if (viewport === frame) {
           inlineScroll = frame.scrollLeft + targetInline;
         } else {
-          var _offset4 = Math.min(targetInline - frameRect.left, frame.scrollLeft - frame.clientLeft - frame.scrollLeft);
+          var _offset5 = Math.min(targetInline - frameRect.left, frame.scrollHeight - frame.clientLeft - frame.scrollLeft);
 
-          inlineScroll = frame.scrollLeft + _offset4;
+          inlineScroll = frame.scrollLeft + _offset5;
           targetInline -= inlineScroll - frame.scrollLeft;
@@ -273,8 +259,8 @@ }
 
-        if (document.documentElement === frame) {
+        if (viewport === frame) {
           inlineScroll = frame.scrollLeft + targetInline - frame.clientWidth / 2;
         } else {
-          var _offset5 = 0 - Math.min(frameRect.left + frameRect.width / 2 - targetInline, frame.scrollLeft);
+          var _offset6 = 0 - Math.min(frameRect.left + frameRect.width / 2 - targetInline, frame.scrollLeft);
 
-          inlineScroll = frame.scrollLeft + _offset5;
+          inlineScroll = frame.scrollLeft + _offset6;
           targetInline += frame.scrollLeft - inlineScroll;
@@ -289,8 +275,8 @@ }
 
-        if (document.documentElement === frame) {
+        if (viewport === frame) {
           inlineScroll = frame.scrollLeft + targetInline - frame.clientWidth;
         } else {
-          var _offset6 = 0 - Math.min(frameRect.right - targetInline, frame.scrollLeft);
+          var _offset7 = 0 - Math.min(frameRect.right - targetInline, frame.scrollLeft);
 
-          inlineScroll = frame.scrollLeft + _offset6;
+          inlineScroll = frame.scrollLeft + _offset7;
           targetInline += frame.scrollLeft - inlineScroll;
@@ -305,8 +291,11 @@ }
 
-        var _offset7 = alignNearestInline(targetInline, targetRect.width, frame, frameRect);
+        if (viewport === frame) {
+          var _offset8 = alignNearest(frame.scrollLeft, frame.scrollLeft + viewportWidth, viewportWidth, frame.scrollLeft + targetInline, frame.scrollLeft + targetInline + targetRect.width, targetRect.width);
 
-        inlineScroll = frame.scrollLeft + _offset7;
+          inlineScroll = frame.scrollLeft + _offset8;
+        } else {
+          var _offset9 = alignNearest(frameRect.left, frameRect.right, frameRect.width, targetInline, targetInline + targetRect.width, targetRect.width);
 
-        if (document.documentElement !== frame) {
-          targetInline -= _offset7;
+          inlineScroll = frame.scrollLeft + _offset9;
+          targetInline -= _offset9;
         }
@@ -313,0 +302,0 @@ }

umd/scroll-into-view-if-needed.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.scrollIntoView=t()}(this,function(){"use strict";function e(){return(e=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var l in o)Object.prototype.hasOwnProperty.call(o,l)&&(e[l]=o[l])}return e}).apply(this,arguments)}var t=function(e){return null!=e&&"object"==typeof e&&1===e.nodeType};function o(e,t){return"Y"===t?e.clientHeight<e.scrollHeight:"X"===t&&e.clientWidth<e.scrollWidth}var l=function(l,n){void 0===n&&(n={});var r=e({scrollMode:"always",block:"center",inline:"nearest"},n),c=r.scrollMode,i=r.block,f=r.inline,s=r.boundary;if(!t(l))throw new Error("Element is required in scrollIntoViewIfNeeded");for(var u,d,a,m,h,p,v=l.getBoundingClientRect(),b=[];t(u=l.parentNode)&&l!==s;)void 0,void 0,a=o(d=u,"Y"),m=o(d,"X"),(a||m)&&b.push(u),l=u;if("if-needed"===c&&b.every(function(e){var t=e.getBoundingClientRect();return!(v.top<t.top)&&(!(v.bottom>t.bottom)&&!(e===document.documentElement&&v.bottom>e.clientHeight))}))return[];return b.map(function(e){var t=e.getBoundingClientRect(),o=0,l=0;if("start"===i)if(h||(h=v.top),document.documentElement===e)o=e.scrollTop+h;else{var n=Math.min(h-t.top,e.scrollHeight-e.clientHeight-e.scrollTop);o=e.scrollTop+n,h-=o-e.scrollTop}if("center"===i)if(h||(h=v.top+v.height/2),document.documentElement===e)o=e.scrollTop+h-e.clientHeight/2;else{var r=0-Math.min(t.top+t.height/2-h,e.scrollTop);o=e.scrollTop+r,h+=e.scrollTop-o}if("end"===i)if(h||(h=v.bottom),document.documentElement===e)o=e.scrollTop+h-e.clientHeight;else{var c=0-Math.min(t.bottom-h,e.scrollTop);o=e.scrollTop+c,h+=e.scrollTop-o}if("nearest"===i){h||(h=v.top);var s=function(e,t,o,l){var n=e+t,r=o.scrollTop+e,c=o.scrollTop+n,i=o.scrollTop,f=o===document.documentElement?o.clientHeight:l.bottom,s=document.documentElement?o.scrollTop+f:l.bottom;return r<i&&c>s||r>i&&c<s?0:r<i&&t<f?e:c>s&&t>f?e:c>s&&t<f?c-s:r<i&&t>f?c-s:0}(h,v.height,e,t);o=e.scrollTop+s,document.documentElement!==e&&(h-=s)}if("start"===f)if(p||(p=v.left),document.documentElement===e)l=e.scrollLeft+p;else{var u=Math.min(p-t.left,e.scrollLeft-e.clientLeft-e.scrollLeft);l=e.scrollLeft+u,p-=l-e.scrollLeft}if("center"===f)if(p||(p=v.left+v.width/2),document.documentElement===e)l=e.scrollLeft+p-e.clientWidth/2;else{var d=0-Math.min(t.left+t.width/2-p,e.scrollLeft);l=e.scrollLeft+d,p+=e.scrollLeft-l}if("end"===f)if(p||(p=v.right),document.documentElement===e)l=e.scrollLeft+p-e.clientWidth;else{var a=0-Math.min(t.right-p,e.scrollLeft);l=e.scrollLeft+a,p+=e.scrollLeft-l}if("nearest"===f){p||(p=v.left);var m=function(e,t,o,l){var n=e+t,r=o.scrollLeft+e,c=o.scrollLeft+n,i=o.scrollLeft,f=o.scrollLeft+o.clientWidth;return console.log("test"),r<i&&t<o.clientWidth||l.left<0&&n>l.left&&t<o.clientWidth?e:c<f&&t<o.clientWidth||l.right>0&&n>l.right&&t<o.clientWidth?n-l.left-o.clientWidth:0}(p,v.width,e,t);l=e.scrollLeft+m,document.documentElement!==e&&(p-=m)}return{el:e,top:o,left:l}})};return function(t,o){void 0===o&&(o=!0);var n={};!0===o||null===o?n={block:"start",inline:"nearest"}:!1===o?n={block:"end",inline:"nearest"}:o===Object(o)&&(n=0===Object.keys(o).length?{block:"start",inline:"nearest"}:e({block:"center",inline:"nearest"},o));var r=n,c=r.behavior,i=void 0===c?"auto":c,f=function(e,t){if(null==e)return{};var o,l,n={},r=Object.keys(e);for(l=0;l<r.length;l++)o=r[l],t.indexOf(o)>=0||(n[o]=e[o]);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(l=0;l<c.length;l++)o=c[l],t.indexOf(o)>=0||Object.prototype.propertyIsEnumerable.call(e,o)&&(n[o]=e[o])}return n}(r,["behavior"]),s=l(t,f);if("function"==typeof i)return i(s);s.forEach(function(e){var t=e.el,o=e.top,l=e.left;t.scroll?t.scroll({top:o,left:l,behavior:i}):(t.scrollTop=o,t.scrollLeft=l)})}});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.scrollIntoView=e()}(this,function(){"use strict";function t(){return(t=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var o=arguments[e];for(var l in o)Object.prototype.hasOwnProperty.call(o,l)&&(t[l]=o[l])}return t}).apply(this,arguments)}var e=function(t){return null!=t&&"object"==typeof t&&1===t.nodeType},o=function(t,e){return"Y"===e?t.clientHeight<t.scrollHeight:"X"===e&&t.clientWidth<t.scrollWidth},l=function(t,e){var o=window.getComputedStyle(t,null)["overflow"+e];return"visible"!==o&&"clip"!==o},r=function(t,e,o,l,r,i){return l<t&&r>e||l>t&&r<e?0:l<t&&i<o||r>e&&i>o?l-t:r>e&&i<o||l<t&&i>o?r-e:0};return function(i,n){void 0===n&&(n=!0);var c={};!0===n||null===n?c={block:"start",inline:"nearest"}:!1===n?c={block:"end",inline:"nearest"}:n===Object(n)&&(c=0===Object.keys(n).length?{block:"start",inline:"nearest"}:t({block:"center",inline:"nearest"},n));var f=c,s=f.behavior,a=void 0===s?"auto":s,h=function(t,e){if(null==t)return{};var o,l,r={},i=Object.keys(t);for(l=0;l<i.length;l++)o=i[l],e.indexOf(o)>=0||(r[o]=t[o]);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);for(l=0;l<n.length;l++)o=n[l],e.indexOf(o)>=0||Object.prototype.propertyIsEnumerable.call(t,o)&&(r[o]=t[o])}return r}(f,["behavior"]),p=function(i,n){void 0===n&&(n={});var c=t({scrollMode:"always",block:"center",inline:"nearest"},n),f=c.scrollMode,s=c.block,a=c.inline,h=c.boundary,p="function"==typeof h?h:function(t){return t!==h};if(!e(i))throw new Error("Element is required in scrollIntoView");for(var u,d,v=i.getBoundingClientRect(),g=document.documentElement,w=[];e(u=i.parentNode)&&p(i);)(o(d=u,"Y")&&l(d,"Y")||o(d,"X")&&l(d,"X")||u===g)&&w.push(u),i=u;var b,m,y=window.visualViewport?window.visualViewport.width:g.clientWidth,L=window.visualViewport?window.visualViewport.height:g.clientHeight;return"if-needed"===f&&w.every(function(t){var e=t.getBoundingClientRect();if(v.top<e.top)return!1;if(v.bottom>e.bottom)return!1;if(t===g){if(v.bottom>L)return!1;if(v.left>y)return!1}return!0})?[]:w.map(function(t){var e=t.getBoundingClientRect(),o=0,l=0;if("start"===s)if(b||(b=v.top),g===t)o=t.scrollTop+b;else{var i=Math.min(b-e.top,t.scrollHeight-t.clientHeight-t.scrollTop);o=t.scrollTop+i,b-=o-t.scrollTop}if("center"===s)if(b||(b=v.top+v.height/2),g===t)o=t.scrollTop+b-t.clientHeight/2;else{var n=0-Math.min(e.top+e.height/2-b,t.scrollTop);o=t.scrollTop+n,b+=t.scrollTop-o}if("end"===s)if(b||(b=v.bottom),g===t)o=t.scrollTop+b-t.clientHeight;else{var c=0-Math.min(e.bottom-b,t.scrollTop);o=t.scrollTop+c,b+=t.scrollTop-o}if("nearest"===s)if(b||(b=v.top),g===t){var f=r(t.scrollTop,t.scrollTop+L,L,t.scrollTop+b,t.scrollTop+b+v.height,v.height);o=t.scrollTop+f}else{var h=r(e.top,e.bottom,e.height,b,b+v.height,v.height);o=t.scrollTop+h,b-=h}if("start"===a)if(m||(m=v.left),g===t)l=t.scrollLeft+m;else{var p=Math.min(m-e.left,t.scrollHeight-t.clientLeft-t.scrollLeft);l=t.scrollLeft+p,m-=l-t.scrollLeft}if("center"===a)if(m||(m=v.left+v.width/2),g===t)l=t.scrollLeft+m-t.clientWidth/2;else{var u=0-Math.min(e.left+e.width/2-m,t.scrollLeft);l=t.scrollLeft+u,m+=t.scrollLeft-l}if("end"===a)if(m||(m=v.right),g===t)l=t.scrollLeft+m-t.clientWidth;else{var d=0-Math.min(e.right-m,t.scrollLeft);l=t.scrollLeft+d,m+=t.scrollLeft-l}if("nearest"===a)if(m||(m=v.left),g===t){var w=r(t.scrollLeft,t.scrollLeft+y,y,t.scrollLeft+m,t.scrollLeft+m+v.width,v.width);l=t.scrollLeft+w}else{var T=r(e.left,e.right,e.width,m,m+v.width,v.width);l=t.scrollLeft+T,m-=T}return{el:t,top:o,left:l}})}(i,h);if("function"==typeof a)return a(p);p.forEach(function(t){var e=t.el,o=t.top,l=t.left;e.scroll?e.scroll({top:o,left:l,behavior:a}):(e.scrollTop=o,e.scrollLeft=l)})}});

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

49975

increased by1.51%

Worsened metrics

Lines of code

843

decreased by-1.52%

No dependency changes