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

Comparing version 2.2.20 to 2.2.21

index.js

 "use strict";
 
 exports.__esModule = true;
-exports.default = void 0;
+exports["default"] = void 0;
 
 var _computeScrollIntoView = _interopRequireDefault(require("compute-scroll-into-view"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -60,3 +60,3 @@ function isOptionsObject(options) {
   if (isOptionsObject(options) && typeof options.behavior === 'function') {
-    return options.behavior(targetIsDetached ? [] : (0, _computeScrollIntoView.default)(target, options));
+    return options.behavior(targetIsDetached ? [] : (0, _computeScrollIntoView["default"])(target, options));
   }
@@ -69,7 +69,7 @@
   var computeOptions = getOptions(options);
-  return defaultBehavior((0, _computeScrollIntoView.default)(target, computeOptions), computeOptions.behavior);
+  return defaultBehavior((0, _computeScrollIntoView["default"])(target, computeOptions), computeOptions.behavior);
 }
 
 var _default = scrollIntoView;
-exports.default = _default;
+exports["default"] = _default;
 module.exports = exports.default;

package.json

@@ -5,3 +5,3 @@ {
   "license": "MIT",
-  "author": "Stian Didriksen",
+  "author": "Cody Olsen",
   "homepage": "https://scroll-into-view-if-needed.netlify.com",
@@ -12,3 +12,3 @@ "repository": {
   },
-  "version": "2.2.20",
+  "version": "2.2.21",
   "main": "index.js",
@@ -37,34 +37,34 @@ "module": "es/index.js",
   "dependencies": {
-    "compute-scroll-into-view": "1.0.11"
+    "compute-scroll-into-view": "^1.0.12"
   },
   "devDependencies": {
-    "@babel/cli": "7.1.2",
-    "@babel/core": "7.1.2",
-    "@babel/plugin-external-helpers": "7.0.0",
-    "@babel/preset-env": "7.1.0",
-    "@babel/preset-typescript": "7.1.0",
-    "babel-eslint": "10.0.1",
-    "babel-plugin-add-module-exports": "1.0.0",
-    "babel-plugin-dev-expression": "0.2.1",
-    "concurrently": "4.0.1",
+    "@babel/cli": "7.7.7",
+    "@babel/core": "7.7.7",
+    "@babel/plugin-external-helpers": "7.7.4",
+    "@babel/preset-env": "7.7.7",
+    "@babel/preset-typescript": "7.7.7",
+    "babel-eslint": "10.0.3",
+    "babel-plugin-add-module-exports": "1.0.2",
+    "babel-plugin-dev-expression": "0.2.2",
+    "concurrently": "5.0.2",
     "eslint": "4.19.1",
-    "eslint-config-prettier": "3.1.0",
-    "eslint-plugin-import": "2.14.0",
-    "eslint-plugin-react": "7.11.1",
-    "flowgen": "1.2.3",
-    "husky": "1.1.2",
-    "lint-staged": "7.3.0",
-    "prettier": "1.14.3",
-    "prettier-package-json": "2.0.1",
-    "rimraf": "2.6.2",
-    "rollup": "0.66.6",
-    "rollup-plugin-babel": "4.0.3",
+    "eslint-config-prettier": "4.0.0",
+    "eslint-plugin-import": "2.19.1",
+    "eslint-plugin-react": "7.17.0",
+    "flowgen": "1.10.0",
+    "husky": "1.3.1",
+    "lint-staged": "8.1.1",
+    "prettier": "1.19.1",
+    "prettier-package-json": "2.1.3",
+    "rimraf": "2.6.3",
+    "rollup": "1.27.14",
+    "rollup-plugin-babel": "4.3.3",
     "rollup-plugin-commonjs": "9.2.0",
-    "rollup-plugin-node-resolve": "3.4.0",
-    "rollup-plugin-replace": "2.1.0",
-    "rollup-plugin-terser": "3.0.0",
-    "semantic-release": "15.9.17",
-    "tslint": "5.11.0",
-    "tslint-config-prettier": "1.15.0",
-    "typescript": "3.1.3"
+    "rollup-plugin-node-resolve": "4.0.0",
+    "rollup-plugin-replace": "2.2.0",
+    "rollup-plugin-terser": "4.0.3",
+    "semantic-release": "15.14.0",
+    "tslint": "5.20.1",
+    "tslint-config-prettier": "1.18.0",
+    "typescript": "3.1.6"
   },
@@ -93,3 +93,3 @@ "keywords": [
       "path": "./umd/scroll-into-view-if-needed.min.js",
-      "maxSize": "3 kB",
+      "maxSize": "3.2 kB",
       "compression": "none"
@@ -96,0 +96,0 @@ }

README.md

@@ -72,3 +72,3 @@ [![CircleCI Status](https://img.shields.io/circleci/project/github/stipsan/scroll-into-view-if-needed.svg?style=flat-square)](https://circleci.com/gh/stipsan/scroll-into-view-if-needed)
 scrollIntoView(node, { scrollMode: 'if-needed' })
-// You end up with the same bundlesize as people who need
+// You would end up with the same bundlesize as people who need
 // smooth scrolling to work in browsers that don't support it natively
@@ -78,3 +78,3 @@ scrollIntoView(node, { behavior: 'smooth', scrollMode: 'if-needed' })
 
-Because of this you need to choose a strategy that matches your priorities: load time, consistency or quality.
+That's why only native smooth scrolling is supported out of the box. There are two common ways you can smooth scroll browsers that don't support it natively. Below is all three, which one is best for you depends on what is the most important to your use case:: load time, consistency or quality.
 
@@ -81,0 +81,0 @@ ##### Load time

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

 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
   typeof define === 'function' && define.amd ? define(factory) :
-  (global.scrollIntoView = factory());
+  (global = global || self, global.scrollIntoView = factory());
 }(this, (function () { 'use strict';
@@ -19,6 +19,24 @@
 
+  function getFrameElement(el) {
+    if (!el.ownerDocument || !el.ownerDocument.defaultView) {
+      return null;
+    }
+
+    return el.ownerDocument.defaultView.frameElement;
+  }
+
+  function isHiddenByFrame(el) {
+    var frame = getFrameElement(el);
+
+    if (!frame) {
+      return false;
+    }
+
+    return frame.clientHeight < el.scrollHeight || frame.clientWidth < el.scrollWidth;
+  }
+
   function isScrollable(el, 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 canOverflow(style.overflowY, skipOverflowHiddenElements) || canOverflow(style.overflowX, skipOverflowHiddenElements) || isHiddenByFrame(el);
     }
@@ -101,10 +119,10 @@
       var _frame$getBoundingCli = frame.getBoundingClientRect(),
-          _height = _frame$getBoundingCli.height,
-          _width = _frame$getBoundingCli.width,
-          _top = _frame$getBoundingCli.top,
+          height = _frame$getBoundingCli.height,
+          width = _frame$getBoundingCli.width,
+          top = _frame$getBoundingCli.top,
           right = _frame$getBoundingCli.right,
           bottom = _frame$getBoundingCli.bottom,
-          _left = _frame$getBoundingCli.left;
+          left = _frame$getBoundingCli.left;
 
-      if (scrollMode === 'if-needed' && targetTop >= 0 && targetLeft >= 0 && targetBottom <= viewportHeight && targetRight <= viewportWidth && targetTop >= _top && targetBottom <= bottom && targetLeft >= _left && targetRight <= right) {
+      if (scrollMode === 'if-needed' && targetTop >= 0 && targetLeft >= 0 && targetBottom <= viewportHeight && targetRight <= viewportWidth && targetTop >= top && targetBottom <= bottom && targetLeft >= left && targetRight <= right) {
         return computations;
@@ -148,19 +166,19 @@ }
         if (block === 'start') {
-          blockScroll = targetBlock - _top - borderTop;
+          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);
+          blockScroll = alignNearest(top, bottom, height, borderTop, borderBottom + scrollbarHeight, targetBlock, targetBlock + targetHeight, targetHeight);
         } else {
-          blockScroll = targetBlock - (_top + _height / 2) + scrollbarHeight / 2;
+          blockScroll = targetBlock - (top + height / 2) + scrollbarHeight / 2;
         }
 
         if (inline === 'start') {
-          inlineScroll = targetInline - _left - borderLeft;
+          inlineScroll = targetInline - left - borderLeft;
         } else if (inline === 'center') {
-          inlineScroll = targetInline - (_left + _width / 2) + scrollbarWidth / 2;
+          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);
+          inlineScroll = alignNearest(left, right, width, borderLeft, borderRight + scrollbarWidth, targetInline, targetInline + targetWidth, targetWidth);
         }
@@ -170,4 +188,4 @@
             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));
+        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;
@@ -174,0 +192,0 @@ targetInline += scrollLeft - inlineScroll;

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(e){return null!=e&&"object"==typeof e&&1===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,c=r.boundary,f=r.skipOverflowHiddenElements,a="function"==typeof c?c:function(e){return e!==c};if(!e(t))throw new TypeError("Invalid target");for(var u=document.scrollingElement||document.documentElement,s=[],h=t;e(h)&&a(h);){if((h=h.parentNode)===u){s.push(h);break}h===document.body&&n(h)&&!n(document.documentElement)||n(h,f)&&s.push(h)}for(var p=window.visualViewport?visualViewport.width:innerWidth,m=window.visualViewport?visualViewport.height:innerHeight,v=window.scrollX||pageXOffset,g=window.scrollY||pageYOffset,b=t.getBoundingClientRect(),w=b.height,y=b.width,W=b.top,H=b.right,E=b.bottom,M=b.left,k="start"===l||"nearest"===l?W:"end"===l?E:W+w/2,x="center"===d?M+y/2:"end"===d?H:M,I=[],O=0;O<s.length;O++){var T=s[O],V=T.getBoundingClientRect(),j=V.height,B=V.width,C=V.top,L=V.right,R=V.bottom,X=V.left;if("if-needed"===i&&W>=0&&M>=0&&E<=m&&H<=p&&W>=C&&E<=R&&M>=X&&H<=L)return I;var Y=getComputedStyle(T),S=parseInt(Y.borderLeftWidth,10),D=parseInt(Y.borderTopWidth,10),N=parseInt(Y.borderRightWidth,10),q=parseInt(Y.borderBottomWidth,10),z=0,A=0,F="offsetWidth"in T?T.offsetWidth-T.clientWidth-S-N:0,G="offsetHeight"in T?T.offsetHeight-T.clientHeight-D-q:0;if(u===T)z="start"===l?k:"end"===l?k-m:"nearest"===l?o(g,g+m,m,D,q,g+k,g+k+w,w):k-m/2,A="start"===d?x:"center"===d?x-p/2:"end"===d?x-p:o(v,v+p,p,S,N,v+x,v+x+y,y),z=Math.max(0,z+g),A=Math.max(0,A+v);else{z="start"===l?k-C-D:"end"===l?k-R+q+G:"nearest"===l?o(C,R,j,D,q+G,k,k+w,w):k-(C+j/2)+G/2,A="start"===d?x-X-S:"center"===d?x-(X+B/2)+F/2:"end"===d?x-L+N+F:o(X,L,B,S,N+F,x,x+y,y);var J=T.scrollLeft,K=T.scrollTop;k+=K-(z=Math.max(0,Math.min(K+z,T.scrollHeight-j+G))),x+=J-(A=Math.max(0,Math.min(J+A,T.scrollWidth-B+F)))}I.push({el:T,top:z,left:A})}return I};function i(e){return e===Object(e)&&0!==Object.keys(e).length}return function(e,t){var n=!e.ownerDocument.documentElement.contains(e);if(i(t)&&"function"==typeof t.behavior)return t.behavior(n?[]:r(e,t));if(!n){var o=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,o),o.behavior)}}});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).scrollIntoView=t()}(this,function(){"use strict";function e(e){return null!=e&&"object"==typeof e&&1===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)||function(e){var t=function(e){return e.ownerDocument&&e.ownerDocument.defaultView?e.ownerDocument.defaultView.frameElement:null}(e);return!!t&&(t.clientHeight<e.scrollHeight||t.clientWidth<e.scrollWidth)}(e)}return!1}function o(e,t,n,o,r,i,l,c){return i<e&&l>t||i>e&&l<t?0:i<=e&&c<=n||l>=t&&c>=n?i-e-o:l>t&&c<n||i<e&&c>n?l-t+r:0}var r=function(t,r){var i=r.scrollMode,l=r.block,c=r.inline,d=r.boundary,u=r.skipOverflowHiddenElements,f="function"==typeof d?d:function(e){return e!==d};if(!e(t))throw new TypeError("Invalid target");for(var a=document.scrollingElement||document.documentElement,s=[],h=t;e(h)&&f(h);){if((h=h.parentNode)===a){s.push(h);break}h===document.body&&n(h)&&!n(document.documentElement)||n(h,u)&&s.push(h)}for(var p=window.visualViewport?visualViewport.width:innerWidth,m=window.visualViewport?visualViewport.height:innerHeight,v=window.scrollX||pageXOffset,g=window.scrollY||pageYOffset,w=t.getBoundingClientRect(),b=w.height,y=w.width,W=w.top,H=w.right,E=w.bottom,M=w.left,V="start"===l||"nearest"===l?W:"end"===l?E:W+b/2,k="center"===c?M+y/2:"end"===c?H:M,x=[],I=0;I<s.length;I++){var O=s[I],T=O.getBoundingClientRect(),j=T.height,B=T.width,C=T.top,D=T.right,L=T.bottom,R=T.left;if("if-needed"===i&&W>=0&&M>=0&&E<=m&&H<=p&&W>=C&&E<=L&&M>=R&&H<=D)return x;var X=getComputedStyle(O),Y=parseInt(X.borderLeftWidth,10),S=parseInt(X.borderTopWidth,10),N=parseInt(X.borderRightWidth,10),q=parseInt(X.borderBottomWidth,10),z=0,A=0,F="offsetWidth"in O?O.offsetWidth-O.clientWidth-Y-N:0,G="offsetHeight"in O?O.offsetHeight-O.clientHeight-S-q:0;if(a===O)z="start"===l?V:"end"===l?V-m:"nearest"===l?o(g,g+m,m,S,q,g+V,g+V+b,b):V-m/2,A="start"===c?k:"center"===c?k-p/2:"end"===c?k-p:o(v,v+p,p,Y,N,v+k,v+k+y,y),z=Math.max(0,z+g),A=Math.max(0,A+v);else{z="start"===l?V-C-S:"end"===l?V-L+q+G:"nearest"===l?o(C,L,j,S,q+G,V,V+b,b):V-(C+j/2)+G/2,A="start"===c?k-R-Y:"center"===c?k-(R+B/2)+F/2:"end"===c?k-D+N+F:o(R,D,B,Y,N+F,k,k+y,y);var J=O.scrollLeft,K=O.scrollTop;V+=K-(z=Math.max(0,Math.min(K+z,O.scrollHeight-j+G))),k+=J-(A=Math.max(0,Math.min(J+A,O.scrollWidth-B+F)))}x.push({el:O,top:z,left:A})}return x};function i(e){return e===Object(e)&&0!==Object.keys(e).length}return function(e,t){var n=!e.ownerDocument.documentElement.contains(e);if(i(t)&&"function"==typeof t.behavior)return t.behavior(n?[]:r(e,t));if(!n){var o=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,o),o.behavior)}}});

No alert changes

Improved metrics

Total package byte prevSize

45167

1.9%

Lines of code

369

3.94%

Dependency changes

• + Added

  compute-scroll-into-view@1.0.20
  (transitive)

• - Removed

  compute-scroll-into-view@1.0.11
  (transitive)

• Updated

  compute-scroll-into-view@^1.0.12