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

Comparing version 2.2.8 to 2.2.9

compute.js

@@ -6,6 +6,2 @@ "use strict";
 
-var _viewport = _interopRequireDefault(require("./viewport"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function isElement(el) {
@@ -15,14 +11,17 @@ return el != null && typeof el === 'object' && (el.nodeType === 1 || el.nodeType === 11);
 
-function canOverflow(el, axis, skipOverflowHiddenElements) {
-  var overflowValue = getComputedStyle(el, null)[axis];
-
-  if (skipOverflowHiddenElements && overflowValue === 'hidden') {
+function canOverflow(overflow, skipOverflowHiddenElements) {
+  if (skipOverflowHiddenElements && overflow === 'hidden') {
     return false;
   }
 
-  return overflowValue !== 'visible' && overflowValue !== 'clip';
+  return overflow !== 'visible' && overflow !== 'clip';
 }
 
 function isScrollable(el, skipOverflowHiddenElements) {
-  return el === (0, _viewport.default)() || el.clientHeight < el.scrollHeight && canOverflow(el, 'overflowY', skipOverflowHiddenElements) || el.clientWidth < el.scrollWidth && canOverflow(el, 'overflowX', skipOverflowHiddenElements);
+  if (el.clientHeight < el.scrollHeight || el.clientWidth < el.scrollWidth) {
+    var style = getComputedStyle(el, null);
+    return canOverflow(style.overflowY, skipOverflowHiddenElements) || canOverflow(style.overflowX, skipOverflowHiddenElements);
+  }
+
+  return false;
 }
@@ -60,54 +59,53 @@
 
-  var targetRect = target.getBoundingClientRect();
+  var scrollingElement = document.scrollingElement || document.documentElement;
   var frames = [];
-  var parent;
+  var cursor = target;
 
-  while (isElement(parent = target.parentNode || target.host) && checkBoundary(target)) {
-    if (isScrollable(parent, skipOverflowHiddenElements)) {
-      frames.push(parent);
+  while (isElement(cursor) && checkBoundary(cursor)) {
+    cursor = cursor.parentNode || cursor.host;
+
+    if (cursor === scrollingElement) {
+      frames.push(cursor);
+      break;
     }
 
-    target = parent;
+    if (isScrollable(cursor, skipOverflowHiddenElements)) {
+      frames.push(cursor);
+    }
   }
 
-  var viewport = (0, _viewport.default)();
-  var viewportWidth = window.visualViewport ? window.visualViewport.width : Math.min(viewport.clientWidth, window.innerWidth);
-  var viewportHeight = window.visualViewport ? window.visualViewport.height : Math.min(viewport.clientHeight, window.innerHeight);
-  var viewportX = window.scrollX || window.pageXOffset;
-  var viewportY = window.scrollY || window.pageYOffset;
+  var viewportWidth = window.visualViewport ? visualViewport.width : innerWidth;
+  var viewportHeight = window.visualViewport ? visualViewport.height : innerHeight;
+  var viewportX = window.scrollX || pageXOffset;
+  var viewportY = window.scrollY || pageYOffset;
 
-  if (scrollMode === 'if-needed') {
-    var isVisible = frames.every(function (frame) {
-      var frameRect = frame.getBoundingClientRect();
+  var _target$getBoundingCl = target.getBoundingClientRect(),
+      targetHeight = _target$getBoundingCl.height,
+      targetWidth = _target$getBoundingCl.width,
+      targetTop = _target$getBoundingCl.top,
+      targetRight = _target$getBoundingCl.right,
+      targetBottom = _target$getBoundingCl.bottom,
+      targetLeft = _target$getBoundingCl.left;
 
-      if (targetRect.top < frameRect.top) {
-        return false;
-      }
+  var targetBlock = block === 'start' || block === 'nearest' ? targetTop : block === 'end' ? targetBottom : targetTop + targetHeight / 2;
+  var targetInline = inline === 'center' ? targetLeft + targetWidth / 2 : inline === 'end' ? targetRight : targetLeft;
+  var computations = [];
 
-      if (targetRect.bottom > frameRect.bottom) {
-        return false;
-      }
+  for (var index = 0; index < frames.length; index++) {
+    var frame = frames[index];
 
-      if (frame === viewport) {
-        if (targetRect.bottom > viewportHeight || targetRect.top < 0) {
-          return false;
-        }
+    var _frame$getBoundingCli = frame.getBoundingClientRect(),
+        _height = _frame$getBoundingCli.height,
+        _width = _frame$getBoundingCli.width,
+        top = _frame$getBoundingCli.top,
+        right = _frame$getBoundingCli.right,
+        bottom = _frame$getBoundingCli.bottom,
+        left = _frame$getBoundingCli.left;
 
-        if (targetRect.left > viewportWidth || targetRect.right < 0) {
-          return false;
-        }
+    if (scrollMode === 'if-needed') {
+      if (frame === scrollingElement ? targetBottom <= viewportHeight && targetTop >= 0 && targetLeft <= viewportWidth && targetRight >= 0 : targetTop >= top && targetBottom <= bottom) {
+        return computations;
       }
-
-      return true;
-    });
-
-    if (isVisible) {
-      return [];
     }
-  }
 
-  var targetBlock = block === 'start' ? targetRect.top : block === 'end' ? targetRect.bottom : block === 'nearest' ? targetRect.top : targetRect.top + targetRect.height / 2;
-  var targetInline = inline === 'start' ? targetRect.left : inline === 'center' ? targetRect.left + targetRect.width / 2 : inline === 'end' ? targetRect.right : targetRect.left;
-  var computations = frames.map(function (frame) {
-    var frameRect = frame.getBoundingClientRect();
     var frameStyle = getComputedStyle(frame);
@@ -118,35 +116,66 @@ var borderLeft = parseInt(frameStyle.borderLeftWidth, 10);
     var borderBottom = parseInt(frameStyle.borderBottomWidth, 10);
+    var blockScroll = 0;
+    var inlineScroll = 0;
     var scrollbarWidth = 'offsetWidth' in frame ? frame.offsetWidth - frame.clientWidth - borderLeft - borderRight : 0;
     var scrollbarHeight = 'offsetHeight' in frame ? frame.offsetHeight - frame.clientHeight - borderTop - borderBottom : 0;
-    var blockScroll = 0;
-    var inlineScroll = 0;
 
-    if (block === 'start') {
-      blockScroll = viewport === frame ? viewportY + targetBlock : targetBlock - frameRect.top - borderTop;
-    } else if (block === 'end') {
-      blockScroll = viewport === frame ? viewportY + (targetBlock - viewportHeight) : frame.scrollTop - (frameRect.bottom - targetBlock) + borderBottom + scrollbarHeight;
-    } else if (block === 'nearest') {
-      blockScroll = viewport === frame ? viewportY + alignNearest(viewportY, viewportY + viewportHeight, viewportHeight, borderTop, borderBottom, viewportY + targetBlock, viewportY + targetBlock + targetRect.height, targetRect.height) : frame.scrollTop + alignNearest(frameRect.top, frameRect.bottom, frameRect.height, borderTop, borderBottom + scrollbarHeight, targetBlock, targetBlock + targetRect.height, targetRect.height);
+    if (scrollingElement === frame) {
+      if (block === 'start') {
+        blockScroll = targetBlock;
+      } else if (block === 'end') {
+        blockScroll = targetBlock - viewportHeight;
+      } else if (block === 'nearest') {
+        blockScroll = alignNearest(viewportY, viewportY + viewportHeight, viewportHeight, borderTop, borderBottom, viewportY + targetBlock, viewportY + targetBlock + targetHeight, targetHeight);
+      } else {
+        blockScroll = targetBlock - viewportHeight / 2;
+      }
+
+      if (inline === 'start') {
+        inlineScroll = targetInline;
+      } else if (inline === 'center') {
+        inlineScroll = targetInline - viewportWidth / 2;
+      } else if (inline === 'end') {
+        inlineScroll = targetInline - viewportWidth;
+      } else {
+        inlineScroll = alignNearest(viewportX, viewportX + viewportWidth, viewportWidth, borderLeft, borderRight, viewportX + targetInline, viewportX + targetInline + targetWidth, targetWidth);
+      }
+
+      blockScroll += viewportY;
+      inlineScroll += viewportX;
     } else {
-      blockScroll = viewport === frame ? viewportY + targetBlock - viewportHeight / 2 : frame.scrollTop - (frameRect.top + frameRect.height / 2 - targetBlock);
-    }
+      if (block === 'start') {
+        blockScroll = targetBlock - top - borderTop;
+      } else if (block === 'end') {
+        blockScroll = targetBlock - bottom + borderBottom + scrollbarHeight;
+      } else if (block === 'nearest') {
+        blockScroll = alignNearest(top, bottom, _height, borderTop, borderBottom + scrollbarHeight, targetBlock, targetBlock + targetHeight, targetHeight);
+      } else {
+        blockScroll = targetBlock - (top + _height / 2) + scrollbarHeight / 2;
+      }
 
-    if (inline === 'start') {
-      inlineScroll = viewport === frame ? viewportX + targetInline : frame.scrollLeft + (targetInline - frameRect.left) - borderLeft;
-    } else if (inline === 'center') {
-      inlineScroll = viewport === frame ? viewportX + targetInline - viewportWidth / 2 : frame.scrollLeft - (frameRect.left + frameRect.width / 2 - targetInline);
-    } else if (inline === 'end') {
-      inlineScroll = viewport === frame ? viewportX + (targetInline - viewportWidth) : frame.scrollLeft - (frameRect.right - targetInline) + borderRight + scrollbarWidth;
-    } else {
-      inlineScroll = viewport === frame ? viewportX + alignNearest(viewportX, viewportX + viewportWidth, viewportWidth, borderLeft, borderRight, viewportX + targetInline, viewportX + targetInline + targetRect.width, targetRect.width) : frame.scrollLeft + alignNearest(frameRect.left, frameRect.right, frameRect.width, borderLeft, borderRight + scrollbarWidth, targetInline, targetInline + targetRect.width, targetRect.width);
+      if (inline === 'start') {
+        inlineScroll = targetInline - left - borderLeft;
+      } else if (inline === 'center') {
+        inlineScroll = targetInline - (left + _width / 2) + scrollbarWidth / 2;
+      } else if (inline === 'end') {
+        inlineScroll = targetInline - right + borderRight + scrollbarWidth;
+      } else {
+        inlineScroll = alignNearest(left, right, _width, borderLeft, borderRight + scrollbarWidth, targetInline, targetInline + targetWidth, targetWidth);
+      }
+
+      var scrollLeft = frame.scrollLeft,
+          scrollTop = frame.scrollTop;
+      blockScroll = Math.max(0, Math.min(scrollTop + blockScroll, frame.scrollHeight - _height + scrollbarHeight));
+      inlineScroll = Math.max(0, Math.min(scrollLeft + inlineScroll, frame.scrollWidth - _width + scrollbarWidth));
+      targetBlock += scrollTop - blockScroll;
+      targetInline += scrollLeft - inlineScroll;
     }
 
-    targetBlock += frame.scrollTop - blockScroll;
-    targetInline += frame.scrollLeft - inlineScroll;
-    return {
+    computations.push({
       el: frame,
       top: blockScroll,
       left: inlineScroll
-    };
-  });
+    });
+  }
+
   return computations;
@@ -153,0 +182,0 @@ };

es/compute.js

@@ -1,3 +0,1 @@
-import getViewport from './viewport';
-
 function isElement(el) {
@@ -7,14 +5,17 @@ return el != null && typeof el === 'object' && (el.nodeType === 1 || el.nodeType === 11);
 
-function canOverflow(el, axis, skipOverflowHiddenElements) {
-  var overflowValue = getComputedStyle(el, null)[axis];
-
-  if (skipOverflowHiddenElements && overflowValue === 'hidden') {
+function canOverflow(overflow, skipOverflowHiddenElements) {
+  if (skipOverflowHiddenElements && overflow === 'hidden') {
     return false;
   }
 
-  return overflowValue !== 'visible' && overflowValue !== 'clip';
+  return overflow !== 'visible' && overflow !== 'clip';
 }
 
 function isScrollable(el, skipOverflowHiddenElements) {
-  return el === getViewport() || el.clientHeight < el.scrollHeight && canOverflow(el, 'overflowY', skipOverflowHiddenElements) || el.clientWidth < el.scrollWidth && canOverflow(el, 'overflowX', skipOverflowHiddenElements);
+  if (el.clientHeight < el.scrollHeight || el.clientWidth < el.scrollWidth) {
+    var style = getComputedStyle(el, null);
+    return canOverflow(style.overflowY, skipOverflowHiddenElements) || canOverflow(style.overflowX, skipOverflowHiddenElements);
+  }
+
+  return false;
 }
@@ -52,54 +53,53 @@
 
-  var targetRect = target.getBoundingClientRect();
+  var scrollingElement = document.scrollingElement || document.documentElement;
   var frames = [];
-  var parent;
+  var cursor = target;
 
-  while (isElement(parent = target.parentNode || target.host) && checkBoundary(target)) {
-    if (isScrollable(parent, skipOverflowHiddenElements)) {
-      frames.push(parent);
+  while (isElement(cursor) && checkBoundary(cursor)) {
+    cursor = cursor.parentNode || cursor.host;
+
+    if (cursor === scrollingElement) {
+      frames.push(cursor);
+      break;
     }
 
-    target = parent;
+    if (isScrollable(cursor, skipOverflowHiddenElements)) {
+      frames.push(cursor);
+    }
   }
 
-  var viewport = getViewport();
-  var viewportWidth = window.visualViewport ? window.visualViewport.width : Math.min(viewport.clientWidth, window.innerWidth);
-  var viewportHeight = window.visualViewport ? window.visualViewport.height : Math.min(viewport.clientHeight, window.innerHeight);
-  var viewportX = window.scrollX || window.pageXOffset;
-  var viewportY = window.scrollY || window.pageYOffset;
+  var viewportWidth = window.visualViewport ? visualViewport.width : innerWidth;
+  var viewportHeight = window.visualViewport ? visualViewport.height : innerHeight;
+  var viewportX = window.scrollX || pageXOffset;
+  var viewportY = window.scrollY || pageYOffset;
 
-  if (scrollMode === 'if-needed') {
-    var isVisible = frames.every(function (frame) {
-      var frameRect = frame.getBoundingClientRect();
+  var _target$getBoundingCl = target.getBoundingClientRect(),
+      targetHeight = _target$getBoundingCl.height,
+      targetWidth = _target$getBoundingCl.width,
+      targetTop = _target$getBoundingCl.top,
+      targetRight = _target$getBoundingCl.right,
+      targetBottom = _target$getBoundingCl.bottom,
+      targetLeft = _target$getBoundingCl.left;
 
-      if (targetRect.top < frameRect.top) {
-        return false;
-      }
+  var targetBlock = block === 'start' || block === 'nearest' ? targetTop : block === 'end' ? targetBottom : targetTop + targetHeight / 2;
+  var targetInline = inline === 'center' ? targetLeft + targetWidth / 2 : inline === 'end' ? targetRight : targetLeft;
+  var computations = [];
 
-      if (targetRect.bottom > frameRect.bottom) {
-        return false;
-      }
+  for (var index = 0; index < frames.length; index++) {
+    var frame = frames[index];
 
-      if (frame === viewport) {
-        if (targetRect.bottom > viewportHeight || targetRect.top < 0) {
-          return false;
-        }
+    var _frame$getBoundingCli = frame.getBoundingClientRect(),
+        _height = _frame$getBoundingCli.height,
+        _width = _frame$getBoundingCli.width,
+        top = _frame$getBoundingCli.top,
+        right = _frame$getBoundingCli.right,
+        bottom = _frame$getBoundingCli.bottom,
+        left = _frame$getBoundingCli.left;
 
-        if (targetRect.left > viewportWidth || targetRect.right < 0) {
-          return false;
-        }
+    if (scrollMode === 'if-needed') {
+      if (frame === scrollingElement ? targetBottom <= viewportHeight && targetTop >= 0 && targetLeft <= viewportWidth && targetRight >= 0 : targetTop >= top && targetBottom <= bottom) {
+        return computations;
       }
-
-      return true;
-    });
-
-    if (isVisible) {
-      return [];
     }
-  }
 
-  var targetBlock = block === 'start' ? targetRect.top : block === 'end' ? targetRect.bottom : block === 'nearest' ? targetRect.top : targetRect.top + targetRect.height / 2;
-  var targetInline = inline === 'start' ? targetRect.left : inline === 'center' ? targetRect.left + targetRect.width / 2 : inline === 'end' ? targetRect.right : targetRect.left;
-  var computations = frames.map(function (frame) {
-    var frameRect = frame.getBoundingClientRect();
     var frameStyle = getComputedStyle(frame);
@@ -110,36 +110,67 @@ var borderLeft = parseInt(frameStyle.borderLeftWidth, 10);
     var borderBottom = parseInt(frameStyle.borderBottomWidth, 10);
+    var blockScroll = 0;
+    var inlineScroll = 0;
     var scrollbarWidth = 'offsetWidth' in frame ? frame.offsetWidth - frame.clientWidth - borderLeft - borderRight : 0;
     var scrollbarHeight = 'offsetHeight' in frame ? frame.offsetHeight - frame.clientHeight - borderTop - borderBottom : 0;
-    var blockScroll = 0;
-    var inlineScroll = 0;
 
-    if (block === 'start') {
-      blockScroll = viewport === frame ? viewportY + targetBlock : targetBlock - frameRect.top - borderTop;
-    } else if (block === 'end') {
-      blockScroll = viewport === frame ? viewportY + (targetBlock - viewportHeight) : frame.scrollTop - (frameRect.bottom - targetBlock) + borderBottom + scrollbarHeight;
-    } else if (block === 'nearest') {
-      blockScroll = viewport === frame ? viewportY + alignNearest(viewportY, viewportY + viewportHeight, viewportHeight, borderTop, borderBottom, viewportY + targetBlock, viewportY + targetBlock + targetRect.height, targetRect.height) : frame.scrollTop + alignNearest(frameRect.top, frameRect.bottom, frameRect.height, borderTop, borderBottom + scrollbarHeight, targetBlock, targetBlock + targetRect.height, targetRect.height);
+    if (scrollingElement === frame) {
+      if (block === 'start') {
+        blockScroll = targetBlock;
+      } else if (block === 'end') {
+        blockScroll = targetBlock - viewportHeight;
+      } else if (block === 'nearest') {
+        blockScroll = alignNearest(viewportY, viewportY + viewportHeight, viewportHeight, borderTop, borderBottom, viewportY + targetBlock, viewportY + targetBlock + targetHeight, targetHeight);
+      } else {
+        blockScroll = targetBlock - viewportHeight / 2;
+      }
+
+      if (inline === 'start') {
+        inlineScroll = targetInline;
+      } else if (inline === 'center') {
+        inlineScroll = targetInline - viewportWidth / 2;
+      } else if (inline === 'end') {
+        inlineScroll = targetInline - viewportWidth;
+      } else {
+        inlineScroll = alignNearest(viewportX, viewportX + viewportWidth, viewportWidth, borderLeft, borderRight, viewportX + targetInline, viewportX + targetInline + targetWidth, targetWidth);
+      }
+
+      blockScroll += viewportY;
+      inlineScroll += viewportX;
     } else {
-      blockScroll = viewport === frame ? viewportY + targetBlock - viewportHeight / 2 : frame.scrollTop - (frameRect.top + frameRect.height / 2 - targetBlock);
-    }
+      if (block === 'start') {
+        blockScroll = targetBlock - top - borderTop;
+      } else if (block === 'end') {
+        blockScroll = targetBlock - bottom + borderBottom + scrollbarHeight;
+      } else if (block === 'nearest') {
+        blockScroll = alignNearest(top, bottom, _height, borderTop, borderBottom + scrollbarHeight, targetBlock, targetBlock + targetHeight, targetHeight);
+      } else {
+        blockScroll = targetBlock - (top + _height / 2) + scrollbarHeight / 2;
+      }
 
-    if (inline === 'start') {
-      inlineScroll = viewport === frame ? viewportX + targetInline : frame.scrollLeft + (targetInline - frameRect.left) - borderLeft;
-    } else if (inline === 'center') {
-      inlineScroll = viewport === frame ? viewportX + targetInline - viewportWidth / 2 : frame.scrollLeft - (frameRect.left + frameRect.width / 2 - targetInline);
-    } else if (inline === 'end') {
-      inlineScroll = viewport === frame ? viewportX + (targetInline - viewportWidth) : frame.scrollLeft - (frameRect.right - targetInline) + borderRight + scrollbarWidth;
-    } else {
-      inlineScroll = viewport === frame ? viewportX + alignNearest(viewportX, viewportX + viewportWidth, viewportWidth, borderLeft, borderRight, viewportX + targetInline, viewportX + targetInline + targetRect.width, targetRect.width) : frame.scrollLeft + alignNearest(frameRect.left, frameRect.right, frameRect.width, borderLeft, borderRight + scrollbarWidth, targetInline, targetInline + targetRect.width, targetRect.width);
+      if (inline === 'start') {
+        inlineScroll = targetInline - left - borderLeft;
+      } else if (inline === 'center') {
+        inlineScroll = targetInline - (left + _width / 2) + scrollbarWidth / 2;
+      } else if (inline === 'end') {
+        inlineScroll = targetInline - right + borderRight + scrollbarWidth;
+      } else {
+        inlineScroll = alignNearest(left, right, _width, borderLeft, borderRight + scrollbarWidth, targetInline, targetInline + targetWidth, targetWidth);
+      }
+
+      var scrollLeft = frame.scrollLeft,
+          scrollTop = frame.scrollTop;
+      blockScroll = Math.max(0, Math.min(scrollTop + blockScroll, frame.scrollHeight - _height + scrollbarHeight));
+      inlineScroll = Math.max(0, Math.min(scrollLeft + inlineScroll, frame.scrollWidth - _width + scrollbarWidth));
+      targetBlock += scrollTop - blockScroll;
+      targetInline += scrollLeft - inlineScroll;
     }
 
-    targetBlock += frame.scrollTop - blockScroll;
-    targetInline += frame.scrollLeft - inlineScroll;
-    return {
+    computations.push({
       el: frame,
       top: blockScroll,
       left: inlineScroll
-    };
-  });
+    });
+  }
+
   return computations;
 });

es/index.js

 import compute from './compute';
-import getViewport from './viewport';
 
@@ -13,3 +12,3 @@ function isOptionsObject(options) {
 
-  var viewport = getViewport();
+  var canSmoothScroll = 'scrollBehavior' in document.body.style;
   actions.forEach(function (_ref) {
@@ -20,3 +19,3 @@ var el = _ref.el,
 
-    if (el.scroll && 'scrollBehavior' in viewport.style) {
+    if (el.scroll && canSmoothScroll) {
       el.scroll({
@@ -28,8 +27,4 @@ top: top,
     } else {
-      if (el === viewport) {
-        scrollTo(left, top);
-      } else {
-        el.scrollTop = top;
-        el.scrollLeft = left;
-      }
+      el.scrollTop = top;
+      el.scrollLeft = left;
     }
@@ -36,0 +31,0 @@ });

index.js

@@ -8,4 +8,2 @@ "use strict";
 
-var _viewport = _interopRequireDefault(require("./viewport"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -22,3 +20,3 @@
 
-  var viewport = (0, _viewport.default)();
+  var canSmoothScroll = 'scrollBehavior' in document.body.style;
   actions.forEach(function (_ref) {
@@ -29,3 +27,3 @@ var el = _ref.el,
 
-    if (el.scroll && 'scrollBehavior' in viewport.style) {
+    if (el.scroll && canSmoothScroll) {
       el.scroll({
@@ -37,8 +35,4 @@ top: top,
     } else {
-      if (el === viewport) {
-        scrollTo(left, top);
-      } else {
-        el.scrollTop = top;
-        el.scrollLeft = left;
-      }
+      el.scrollTop = top;
+      el.scrollLeft = left;
     }
@@ -45,0 +39,0 @@ });

package.json

@@ -11,3 +11,3 @@ {
   },
-  "version": "2.2.8",
+  "version": "2.2.9",
   "main": "index.js",
@@ -19,4 +19,3 @@ "module": "es/index.js",
     "typings",
-    "umd",
-    "viewport.js"
+    "umd"
   ],
@@ -55,7 +54,7 @@ "scripts": {
     "lint-staged": "7.2.0",
-    "prettier": "1.13.6",
+    "prettier": "1.13.7",
     "prettier-package-json": "1.6.0",
     "rimraf": "2.6.2",
-    "rollup": "0.61.2",
-    "rollup-plugin-babel": "4.0.0-beta.5",
+    "rollup": "0.62.0",
+    "rollup-plugin-babel": "4.0.0-beta.7",
     "rollup-plugin-commonjs": "9.1.3",
@@ -92,7 +91,4 @@ "rollup-plugin-node-resolve": "3.3.0",
       "path": "./umd/scroll-into-view-if-needed.min.js",
-      "maxSize": "1.75 kB"
-    },
-    {
-      "path": "./umd/scroll-into-view-if-needed.js",
-      "maxSize": "3 kB"
+      "maxSize": "3 kB",
+      "compression": "none"
     }
@@ -99,0 +95,0 @@ ],

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

@@ -7,13 +7,2 @@ (function (global, factory) {
 
-  var viewport;
-  var getViewport = (function () {
-    var doc = document;
-
-    if (!viewport) {
-      viewport = doc.compatMode !== 'CSS1Compat' && doc.scrollingElement || doc.documentElement;
-    }
-
-    return viewport;
-  });
-
   function isElement(el) {
@@ -23,14 +12,17 @@ return el != null && typeof el === 'object' && (el.nodeType === 1 || el.nodeType === 11);
 
-  function canOverflow(el, axis, skipOverflowHiddenElements) {
-    var overflowValue = getComputedStyle(el, null)[axis];
-
-    if (skipOverflowHiddenElements && overflowValue === 'hidden') {
+  function canOverflow(overflow, skipOverflowHiddenElements) {
+    if (skipOverflowHiddenElements && overflow === 'hidden') {
       return false;
     }
 
-    return overflowValue !== 'visible' && overflowValue !== 'clip';
+    return overflow !== 'visible' && overflow !== 'clip';
   }
 
   function isScrollable(el, skipOverflowHiddenElements) {
-    return el === getViewport() || el.clientHeight < el.scrollHeight && canOverflow(el, 'overflowY', skipOverflowHiddenElements) || el.clientWidth < el.scrollWidth && canOverflow(el, 'overflowX', skipOverflowHiddenElements);
+    if (el.clientHeight < el.scrollHeight || el.clientWidth < el.scrollWidth) {
+      var style = getComputedStyle(el, null);
+      return canOverflow(style.overflowY, skipOverflowHiddenElements) || canOverflow(style.overflowX, skipOverflowHiddenElements);
+    }
+
+    return false;
   }
@@ -68,54 +60,53 @@
 
-    var targetRect = target.getBoundingClientRect();
+    var scrollingElement = document.scrollingElement || document.documentElement;
     var frames = [];
-    var parent;
+    var cursor = target;
 
-    while (isElement(parent = target.parentNode || target.host) && checkBoundary(target)) {
-      if (isScrollable(parent, skipOverflowHiddenElements)) {
-        frames.push(parent);
+    while (isElement(cursor) && checkBoundary(cursor)) {
+      cursor = cursor.parentNode || cursor.host;
+
+      if (cursor === scrollingElement) {
+        frames.push(cursor);
+        break;
       }
 
-      target = parent;
+      if (isScrollable(cursor, skipOverflowHiddenElements)) {
+        frames.push(cursor);
+      }
     }
 
-    var viewport = getViewport();
-    var viewportWidth = window.visualViewport ? window.visualViewport.width : Math.min(viewport.clientWidth, window.innerWidth);
-    var viewportHeight = window.visualViewport ? window.visualViewport.height : Math.min(viewport.clientHeight, window.innerHeight);
-    var viewportX = window.scrollX || window.pageXOffset;
-    var viewportY = window.scrollY || window.pageYOffset;
+    var viewportWidth = window.visualViewport ? visualViewport.width : innerWidth;
+    var viewportHeight = window.visualViewport ? visualViewport.height : innerHeight;
+    var viewportX = window.scrollX || pageXOffset;
+    var viewportY = window.scrollY || pageYOffset;
 
-    if (scrollMode === 'if-needed') {
-      var isVisible = frames.every(function (frame) {
-        var frameRect = frame.getBoundingClientRect();
+    var _target$getBoundingCl = target.getBoundingClientRect(),
+        targetHeight = _target$getBoundingCl.height,
+        targetWidth = _target$getBoundingCl.width,
+        targetTop = _target$getBoundingCl.top,
+        targetRight = _target$getBoundingCl.right,
+        targetBottom = _target$getBoundingCl.bottom,
+        targetLeft = _target$getBoundingCl.left;
 
-        if (targetRect.top < frameRect.top) {
-          return false;
-        }
+    var targetBlock = block === 'start' || block === 'nearest' ? targetTop : block === 'end' ? targetBottom : targetTop + targetHeight / 2;
+    var targetInline = inline === 'center' ? targetLeft + targetWidth / 2 : inline === 'end' ? targetRight : targetLeft;
+    var computations = [];
 
-        if (targetRect.bottom > frameRect.bottom) {
-          return false;
-        }
+    for (var index = 0; index < frames.length; index++) {
+      var frame = frames[index];
 
-        if (frame === viewport) {
-          if (targetRect.bottom > viewportHeight || targetRect.top < 0) {
-            return false;
-          }
+      var _frame$getBoundingCli = frame.getBoundingClientRect(),
+          _height = _frame$getBoundingCli.height,
+          _width = _frame$getBoundingCli.width,
+          top = _frame$getBoundingCli.top,
+          right = _frame$getBoundingCli.right,
+          bottom = _frame$getBoundingCli.bottom,
+          left = _frame$getBoundingCli.left;
 
-          if (targetRect.left > viewportWidth || targetRect.right < 0) {
-            return false;
-          }
+      if (scrollMode === 'if-needed') {
+        if (frame === scrollingElement ? targetBottom <= viewportHeight && targetTop >= 0 && targetLeft <= viewportWidth && targetRight >= 0 : targetTop >= top && targetBottom <= bottom) {
+          return computations;
         }
-
-        return true;
-      });
-
-      if (isVisible) {
-        return [];
       }
-    }
 
-    var targetBlock = block === 'start' ? targetRect.top : block === 'end' ? targetRect.bottom : block === 'nearest' ? targetRect.top : targetRect.top + targetRect.height / 2;
-    var targetInline = inline === 'start' ? targetRect.left : inline === 'center' ? targetRect.left + targetRect.width / 2 : inline === 'end' ? targetRect.right : targetRect.left;
-    var computations = frames.map(function (frame) {
-      var frameRect = frame.getBoundingClientRect();
       var frameStyle = getComputedStyle(frame);
@@ -126,35 +117,66 @@ var borderLeft = parseInt(frameStyle.borderLeftWidth, 10);
       var borderBottom = parseInt(frameStyle.borderBottomWidth, 10);
+      var blockScroll = 0;
+      var inlineScroll = 0;
       var scrollbarWidth = 'offsetWidth' in frame ? frame.offsetWidth - frame.clientWidth - borderLeft - borderRight : 0;
       var scrollbarHeight = 'offsetHeight' in frame ? frame.offsetHeight - frame.clientHeight - borderTop - borderBottom : 0;
-      var blockScroll = 0;
-      var inlineScroll = 0;
 
-      if (block === 'start') {
-        blockScroll = viewport === frame ? viewportY + targetBlock : targetBlock - frameRect.top - borderTop;
-      } else if (block === 'end') {
-        blockScroll = viewport === frame ? viewportY + (targetBlock - viewportHeight) : frame.scrollTop - (frameRect.bottom - targetBlock) + borderBottom + scrollbarHeight;
-      } else if (block === 'nearest') {
-        blockScroll = viewport === frame ? viewportY + alignNearest(viewportY, viewportY + viewportHeight, viewportHeight, borderTop, borderBottom, viewportY + targetBlock, viewportY + targetBlock + targetRect.height, targetRect.height) : frame.scrollTop + alignNearest(frameRect.top, frameRect.bottom, frameRect.height, borderTop, borderBottom + scrollbarHeight, targetBlock, targetBlock + targetRect.height, targetRect.height);
+      if (scrollingElement === frame) {
+        if (block === 'start') {
+          blockScroll = targetBlock;
+        } else if (block === 'end') {
+          blockScroll = targetBlock - viewportHeight;
+        } else if (block === 'nearest') {
+          blockScroll = alignNearest(viewportY, viewportY + viewportHeight, viewportHeight, borderTop, borderBottom, viewportY + targetBlock, viewportY + targetBlock + targetHeight, targetHeight);
+        } else {
+          blockScroll = targetBlock - viewportHeight / 2;
+        }
+
+        if (inline === 'start') {
+          inlineScroll = targetInline;
+        } else if (inline === 'center') {
+          inlineScroll = targetInline - viewportWidth / 2;
+        } else if (inline === 'end') {
+          inlineScroll = targetInline - viewportWidth;
+        } else {
+          inlineScroll = alignNearest(viewportX, viewportX + viewportWidth, viewportWidth, borderLeft, borderRight, viewportX + targetInline, viewportX + targetInline + targetWidth, targetWidth);
+        }
+
+        blockScroll += viewportY;
+        inlineScroll += viewportX;
       } else {
-        blockScroll = viewport === frame ? viewportY + targetBlock - viewportHeight / 2 : frame.scrollTop - (frameRect.top + frameRect.height / 2 - targetBlock);
-      }
+        if (block === 'start') {
+          blockScroll = targetBlock - top - borderTop;
+        } else if (block === 'end') {
+          blockScroll = targetBlock - bottom + borderBottom + scrollbarHeight;
+        } else if (block === 'nearest') {
+          blockScroll = alignNearest(top, bottom, _height, borderTop, borderBottom + scrollbarHeight, targetBlock, targetBlock + targetHeight, targetHeight);
+        } else {
+          blockScroll = targetBlock - (top + _height / 2) + scrollbarHeight / 2;
+        }
 
-      if (inline === 'start') {
-        inlineScroll = viewport === frame ? viewportX + targetInline : frame.scrollLeft + (targetInline - frameRect.left) - borderLeft;
-      } else if (inline === 'center') {
-        inlineScroll = viewport === frame ? viewportX + targetInline - viewportWidth / 2 : frame.scrollLeft - (frameRect.left + frameRect.width / 2 - targetInline);
-      } else if (inline === 'end') {
-        inlineScroll = viewport === frame ? viewportX + (targetInline - viewportWidth) : frame.scrollLeft - (frameRect.right - targetInline) + borderRight + scrollbarWidth;
-      } else {
-        inlineScroll = viewport === frame ? viewportX + alignNearest(viewportX, viewportX + viewportWidth, viewportWidth, borderLeft, borderRight, viewportX + targetInline, viewportX + targetInline + targetRect.width, targetRect.width) : frame.scrollLeft + alignNearest(frameRect.left, frameRect.right, frameRect.width, borderLeft, borderRight + scrollbarWidth, targetInline, targetInline + targetRect.width, targetRect.width);
+        if (inline === 'start') {
+          inlineScroll = targetInline - left - borderLeft;
+        } else if (inline === 'center') {
+          inlineScroll = targetInline - (left + _width / 2) + scrollbarWidth / 2;
+        } else if (inline === 'end') {
+          inlineScroll = targetInline - right + borderRight + scrollbarWidth;
+        } else {
+          inlineScroll = alignNearest(left, right, _width, borderLeft, borderRight + scrollbarWidth, targetInline, targetInline + targetWidth, targetWidth);
+        }
+
+        var scrollLeft = frame.scrollLeft,
+            scrollTop = frame.scrollTop;
+        blockScroll = Math.max(0, Math.min(scrollTop + blockScroll, frame.scrollHeight - _height + scrollbarHeight));
+        inlineScroll = Math.max(0, Math.min(scrollLeft + inlineScroll, frame.scrollWidth - _width + scrollbarWidth));
+        targetBlock += scrollTop - blockScroll;
+        targetInline += scrollLeft - inlineScroll;
       }
 
-      targetBlock += frame.scrollTop - blockScroll;
-      targetInline += frame.scrollLeft - inlineScroll;
-      return {
+      computations.push({
         el: frame,
         top: blockScroll,
         left: inlineScroll
-      };
-    });
+      });
+    }
+
     return computations;
@@ -172,3 +194,3 @@ });
 
-    var viewport = getViewport();
+    var canSmoothScroll = 'scrollBehavior' in document.body.style;
     actions.forEach(function (_ref) {
@@ -179,3 +201,3 @@ var el = _ref.el,
 
-      if (el.scroll && 'scrollBehavior' in viewport.style) {
+      if (el.scroll && canSmoothScroll) {
         el.scroll({
@@ -187,8 +209,4 @@ top: top,
       } else {
-        if (el === viewport) {
-          scrollTo(left, top);
-        } else {
-          el.scrollTop = top;
-          el.scrollLeft = left;
-        }
+        el.scrollTop = top;
+        el.scrollLeft = left;
       }
@@ -195,0 +213,0 @@ });

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

@@ -1,1 +0,1 @@
-!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";var t,e=function(){var e=document;return t||(t="CSS1Compat"!==e.compatMode&&e.scrollingElement||e.documentElement),t};function o(t){return null!=t&&"object"==typeof t&&(1===t.nodeType||11===t.nodeType)}function n(t,e,o){var n=getComputedStyle(t,null)[e];return(!o||"hidden"!==n)&&("visible"!==n&&"clip"!==n)}function i(t,o){return t===e()||t.clientHeight<t.scrollHeight&&n(t,"overflowY",o)||t.clientWidth<t.scrollWidth&&n(t,"overflowX",o)}function r(t,e,o,n,i,r,l,f){return r<t&&l>e||r>t&&l<e?0:r<t&&f<o||l>e&&f>o?r-t-n:l>e&&f<o||r<t&&f>o?l-e+i:0}var l=function(t,n){var l=n.scrollMode,f=n.block,d=n.inline,c=n.boundary,h=n.skipOverflowHiddenElements,s="function"==typeof c?c:function(t){return t!==c};if(!o(t))throw new Error("Element is required in scrollIntoView");for(var u,a=t.getBoundingClientRect(),p=[];o(u=t.parentNode||t.host)&&s(t);)i(u,h)&&p.push(u),t=u;var w=e(),g=window.visualViewport?window.visualViewport.width:Math.min(w.clientWidth,window.innerWidth),v=window.visualViewport?window.visualViewport.height:Math.min(w.clientHeight,window.innerHeight),b=window.scrollX||window.pageXOffset,m=window.scrollY||window.pageYOffset;if("if-needed"===l&&p.every(function(t){var e=t.getBoundingClientRect();if(a.top<e.top)return!1;if(a.bottom>e.bottom)return!1;if(t===w){if(a.bottom>v||a.top<0)return!1;if(a.left>g||a.right<0)return!1}return!0}))return[];var y="start"===f?a.top:"end"===f?a.bottom:"nearest"===f?a.top:a.top+a.height/2,W="start"===d?a.left:"center"===d?a.left+a.width/2:"end"===d?a.right:a.left;return p.map(function(t){var e=t.getBoundingClientRect(),o=getComputedStyle(t),n=parseInt(o.borderLeftWidth,10),i=parseInt(o.borderTopWidth,10),l=parseInt(o.borderRightWidth,10),c=parseInt(o.borderBottomWidth,10),h="offsetWidth"in t?t.offsetWidth-t.clientWidth-n-l:0,s="offsetHeight"in t?t.offsetHeight-t.clientHeight-i-c:0,u=0,p=0;return u="start"===f?w===t?m+y:y-e.top-i:"end"===f?w===t?m+(y-v):t.scrollTop-(e.bottom-y)+c+s:"nearest"===f?w===t?m+r(m,m+v,v,i,c,m+y,m+y+a.height,a.height):t.scrollTop+r(e.top,e.bottom,e.height,i,c+s,y,y+a.height,a.height):w===t?m+y-v/2:t.scrollTop-(e.top+e.height/2-y),p="start"===d?w===t?b+W:t.scrollLeft+(W-e.left)-n:"center"===d?w===t?b+W-g/2:t.scrollLeft-(e.left+e.width/2-W):"end"===d?w===t?b+(W-g):t.scrollLeft-(e.right-W)+l+h:w===t?b+r(b,b+g,g,n,l,b+W,b+W+a.width,a.width):t.scrollLeft+r(e.left,e.right,e.width,n,l+h,W,W+a.width,a.width),y+=t.scrollTop-u,W+=t.scrollLeft-p,{el:t,top:u,left:p}})};function f(t){return t===Object(t)&&0!==Object.keys(t).length}return function(t,o){if(f(o)&&"function"==typeof o.behavior)return o.behavior(l(t,o));var n=function(t){return!1===t?{block:"end",inline:"nearest"}:f(t)?t:{block:"start",inline:"nearest"}}(o);return function(t,o){void 0===o&&(o="auto");var n=e();t.forEach(function(t){var e=t.el,i=t.top,r=t.left;e.scroll&&"scrollBehavior"in n.style?e.scroll({top:i,left:r,behavior:o}):e===n?scrollTo(r,i):(e.scrollTop=i,e.scrollLeft=r)})}(l(t,n),n.behavior)}});
+!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(e){return null!=e&&"object"==typeof e&&(1===e.nodeType||11===e.nodeType)}function t(e,t){return(!t||"hidden"!==e)&&("visible"!==e&&"clip"!==e)}function n(e,n){if(e.clientHeight<e.scrollHeight||e.clientWidth<e.scrollWidth){var o=getComputedStyle(e,null);return t(o.overflowY,n)||t(o.overflowX,n)}return!1}function o(e,t,n,o,r,i,l,d){return i<e&&l>t||i>e&&l<t?0:i<e&&d<n||l>t&&d>n?i-e-o:l>t&&d<n||i<e&&d>n?l-t+r:0}var r=function(t,r){var i=r.scrollMode,l=r.block,d=r.inline,f=r.boundary,s=r.skipOverflowHiddenElements,c="function"==typeof f?f:function(e){return e!==f};if(!e(t))throw new Error("Element is required in scrollIntoView");for(var u=document.scrollingElement||document.documentElement,a=[],h=t;e(h)&&c(h);){if((h=h.parentNode||h.host)===u){a.push(h);break}n(h,s)&&a.push(h)}for(var p=window.visualViewport?visualViewport.width:innerWidth,v=window.visualViewport?visualViewport.height:innerHeight,g=window.scrollX||pageXOffset,w=window.scrollY||pageYOffset,b=t.getBoundingClientRect(),m=b.height,y=b.width,W=b.top,H=b.right,k=b.bottom,E=b.left,I="start"===l||"nearest"===l?W:"end"===l?k:W+m/2,V="center"===d?E+y/2:"end"===d?H:E,M=[],O=0;O<a.length;O++){var T=a[O],j=T.getBoundingClientRect(),x=j.height,B=j.width,C=j.top,L=j.right,R=j.bottom,X=j.left;if("if-needed"===i&&(T===u?k<=v&&W>=0&&E<=p&&H>=0:W>=C&&k<=R))return M;var Y=getComputedStyle(T),S=parseInt(Y.borderLeftWidth,10),q=parseInt(Y.borderTopWidth,10),N=parseInt(Y.borderRightWidth,10),z=parseInt(Y.borderBottomWidth,10),A=0,D=0,F="offsetWidth"in T?T.offsetWidth-T.clientWidth-S-N:0,G="offsetHeight"in T?T.offsetHeight-T.clientHeight-q-z:0;if(u===T)A="start"===l?I:"end"===l?I-v:"nearest"===l?o(w,w+v,v,q,z,w+I,w+I+m,m):I-v/2,D="start"===d?V:"center"===d?V-p/2:"end"===d?V-p:o(g,g+p,p,S,N,g+V,g+V+y,y),A+=w,D+=g;else{A="start"===l?I-C-q:"end"===l?I-R+z+G:"nearest"===l?o(C,R,x,q,z+G,I,I+m,m):I-(C+x/2)+G/2,D="start"===d?V-X-S:"center"===d?V-(X+B/2)+F/2:"end"===d?V-L+N+F:o(X,L,B,S,N+F,V,V+y,y);var J=T.scrollLeft,K=T.scrollTop;I+=K-(A=Math.max(0,Math.min(K+A,T.scrollHeight-x+G))),V+=J-(D=Math.max(0,Math.min(J+D,T.scrollWidth-B+F)))}M.push({el:T,top:A,left:D})}return M};function i(e){return e===Object(e)&&0!==Object.keys(e).length}return function(e,t){if(i(t)&&"function"==typeof t.behavior)return t.behavior(r(e,t));var n=function(e){return!1===e?{block:"end",inline:"nearest"}:i(e)?e:{block:"start",inline:"nearest"}}(t);return function(e,t){void 0===t&&(t="auto");var n="scrollBehavior"in document.body.style;e.forEach(function(e){var o=e.el,r=e.top,i=e.left;o.scroll&&n?o.scroll({top:r,left:i,behavior:t}):(o.scrollTop=r,o.scrollLeft=i)})}(r(e,n),n.behavior)}});

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

Lines of code

648

increased by5.88%

Worsened metrics

Total package byte prevSize

60083

decreased by-0.04%

Number of package files

14

decreased by-17.65%

No dependency changes