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

Comparing version 2.1.7 to 2.2.0

compute.js

@@ -22,9 +22,14 @@ "use strict";
 
-var canOverflow = function canOverflow(el, axis) {
+var canOverflow = function canOverflow(el, axis, skipOverflowHiddenElements) {
   var overflowValue = getComputedStyle(el, null)['overflow' + axis];
+
+  if (skipOverflowHiddenElements && overflowValue === 'hidden') {
+    return false;
+  }
+
   return overflowValue !== 'visible' && overflowValue !== 'clip';
 };
 
-var isScrollable = function isScrollable(el) {
-  return hasScrollableSpace(el, 'Y') && canOverflow(el, 'Y') || hasScrollableSpace(el, 'X') && canOverflow(el, 'X');
+var isScrollable = function isScrollable(el, skipOverflowHiddenElements) {
+  return hasScrollableSpace(el, 'Y') && canOverflow(el, 'Y', skipOverflowHiddenElements) || hasScrollableSpace(el, 'X') && canOverflow(el, 'X', skipOverflowHiddenElements);
 };
@@ -60,3 +65,5 @@
       inline = _options$inline === void 0 ? 'nearest' : _options$inline,
-      boundary = _options.boundary;
+      boundary = _options.boundary,
+      _options$skipOverflow = _options.skipOverflowHiddenElements,
+      skipOverflowHiddenElements = _options$skipOverflow === void 0 ? false : _options$skipOverflow;
   var checkBoundary = typeof boundary == 'function' ? boundary : function (parent) {
@@ -76,3 +83,3 @@ return parent !== boundary;
   while (isElement(parent = target.parentNode) && checkBoundary(target)) {
-    if (isScrollable(parent) || parent === viewport) {
+    if (isScrollable(parent, skipOverflowHiddenElements) || parent === viewport) {
       frames.push(parent);
@@ -79,0 +86,0 @@ }

es/compute.js

@@ -17,9 +17,14 @@ var isElement = function isElement(el) {
 
-var canOverflow = function canOverflow(el, axis) {
+var canOverflow = function canOverflow(el, axis, skipOverflowHiddenElements) {
   var overflowValue = getComputedStyle(el, null)['overflow' + axis];
+
+  if (skipOverflowHiddenElements && overflowValue === 'hidden') {
+    return false;
+  }
+
   return overflowValue !== 'visible' && overflowValue !== 'clip';
 };
 
-var isScrollable = function isScrollable(el) {
-  return hasScrollableSpace(el, 'Y') && canOverflow(el, 'Y') || hasScrollableSpace(el, 'X') && canOverflow(el, 'X');
+var isScrollable = function isScrollable(el, skipOverflowHiddenElements) {
+  return hasScrollableSpace(el, 'Y') && canOverflow(el, 'Y', skipOverflowHiddenElements) || hasScrollableSpace(el, 'X') && canOverflow(el, 'X', skipOverflowHiddenElements);
 };
@@ -55,3 +60,5 @@
       inline = _options$inline === void 0 ? 'nearest' : _options$inline,
-      boundary = _options.boundary;
+      boundary = _options.boundary,
+      _options$skipOverflow = _options.skipOverflowHiddenElements,
+      skipOverflowHiddenElements = _options$skipOverflow === void 0 ? false : _options$skipOverflow;
   var checkBoundary = typeof boundary == 'function' ? boundary : function (parent) {
@@ -71,3 +78,3 @@ return parent !== boundary;
   while (isElement(parent = target.parentNode) && checkBoundary(target)) {
-    if (isScrollable(parent) || parent === viewport) {
+    if (isScrollable(parent, skipOverflowHiddenElements) || parent === viewport) {
       frames.push(parent);
@@ -74,0 +81,0 @@ }

package.json

@@ -11,3 +11,3 @@ {
   },
-  "version": "2.1.7",
+  "version": "2.2.0",
   "main": "index.js",
@@ -62,3 +62,3 @@ "module": "es/index.js",
     "rollup-plugin-uglify": "3.0.0",
-    "semantic-release": "15.3.1",
+    "semantic-release": "15.4.0",
     "typescript": "2.8.3"
@@ -65,0 +65,0 @@ },

README.md

@@ -253,2 +253,12 @@ [![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)
 
+#### skipOverflowHiddenElements
+
+Type: `Boolean`<br> Default: `false`
+
+> Introduced in `v2.2.0`
+
+By default the [spec](https://drafts.csswg.org/cssom-view/#scrolling-box) states that `overflow: hidden` elements should be scrollable because it has [been used to allow programatic scrolling](https://drafts.csswg.org/css-overflow-3/#valdef-overflow-hidden). This behavior can sometimes lead to [scrolling issues](https://github.com/stipsan/scroll-into-view-if-needed/pull/225#issue-186419520) when you have a node that is a child of an `overflow: hidden` node.
+
+This package follows the convention [adopted by Firefox](https://hg.mozilla.org/integration/fx-team/rev/c48c3ec05012#l7.18) of setting a boolean option to _not_ scroll all nodes with `overflow: hidden` set.
+
 # TypeScript support
@@ -268,3 +278,3 @@
 })
-// jest understands that scrolling is a Promise, you can safely await on it
+// TypeScript understands that scrolling is a Promise, you can safely await on it
 scrolling.then(() => console.log('done scrolling'))
@@ -271,0 +281,0 @@ ```

typings/types.d.ts

 export declare type ScrollBehavior = 'auto' | 'instant' | 'smooth';
 export declare type ScrollLogicalPosition = 'start' | 'center' | 'end' | 'nearest';
 export declare type ScrollMode = 'always' | 'if-needed';
+export declare type SkipOverflowHiddenElements = boolean;
 export interface Options {
@@ -9,2 +10,3 @@ block?: ScrollLogicalPosition;
     boundary?: CustomScrollBoundary;
+    skipOverflowHiddenElements?: SkipOverflowHiddenElements;
 }
@@ -11,0 +13,0 @@ export interface CustomScrollBoundaryCallback {

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

@@ -23,9 +23,14 @@ (function (global, factory) {
 
-  var canOverflow = function canOverflow(el, axis) {
+  var canOverflow = function canOverflow(el, axis, skipOverflowHiddenElements) {
     var overflowValue = getComputedStyle(el, null)['overflow' + axis];
+
+    if (skipOverflowHiddenElements && overflowValue === 'hidden') {
+      return false;
+    }
+
     return overflowValue !== 'visible' && overflowValue !== 'clip';
   };
 
-  var isScrollable = function isScrollable(el) {
-    return hasScrollableSpace(el, 'Y') && canOverflow(el, 'Y') || hasScrollableSpace(el, 'X') && canOverflow(el, 'X');
+  var isScrollable = function isScrollable(el, skipOverflowHiddenElements) {
+    return hasScrollableSpace(el, 'Y') && canOverflow(el, 'Y', skipOverflowHiddenElements) || hasScrollableSpace(el, 'X') && canOverflow(el, 'X', skipOverflowHiddenElements);
   };
@@ -61,3 +66,5 @@
         inline = _options$inline === void 0 ? 'nearest' : _options$inline,
-        boundary = _options.boundary;
+        boundary = _options.boundary,
+        _options$skipOverflow = _options.skipOverflowHiddenElements,
+        skipOverflowHiddenElements = _options$skipOverflow === void 0 ? false : _options$skipOverflow;
     var checkBoundary = typeof boundary == 'function' ? boundary : function (parent) {
@@ -77,3 +84,3 @@ return parent !== boundary;
     while (isElement(parent = target.parentNode) && checkBoundary(target)) {
-      if (isScrollable(parent) || parent === viewport) {
+      if (isScrollable(parent, skipOverflowHiddenElements) || parent === viewport) {
         frames.push(parent);
@@ -80,0 +87,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(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},i=function(t,e){var o=getComputedStyle(t,null)["overflow"+e];return"visible"!==o&&"clip"!==o},n=function(t,e,o,i,n,l){return i<t&&n>e||i>t&&n<e?0:i<t&&l<o||n>e&&l>o?i-t:n>e&&l<o||i<t&&l>o?n-e:0},l=function(t,l){void 0===l&&(l={});var r=l,c=r.scrollMode,f=void 0===c?"always":c,s=r.block,u=void 0===s?"center":s,d=r.inline,h=void 0===d?"nearest":d,a=r.boundary,p="function"==typeof a?a:function(t){return t!==a};if(!e(t))throw new Error("Element is required in scrollIntoView");for(var v,w,g=t.getBoundingClientRect(),m=document.documentElement,b=[];e(v=t.parentNode)&&p(t);)(o(w=v,"Y")&&i(w,"Y")||o(w,"X")&&i(w,"X")||v===m)&&b.push(v),t=v;var y,T,L=window.visualViewport?window.visualViewport.width:m.clientWidth,H=window.visualViewport?window.visualViewport.height:m.clientHeight,M=window.scrollX||window.pageXOffset,E=window.scrollY||window.pageYOffset;if("if-needed"===f&&b.every(function(t){var e=t.getBoundingClientRect();if(g.top<e.top)return!1;if(g.bottom>e.bottom)return!1;if(t===m){if(g.bottom>H)return!1;if(g.left>L)return!1}return!0}))return[];return b.map(function(t){var e=t.getBoundingClientRect(),o=0,i=0;if("start"===u)if(y||(y=g.top),m===t)o=E+y;else{var l=Math.min(y-e.top,t.scrollHeight-t.clientHeight-t.scrollTop);o=t.scrollTop+l,y-=o-t.scrollTop}if("center"===u)if(y||(y=g.top+g.height/2),m===t)o=E+y-t.clientHeight/2;else{var r=0-Math.min(e.top+e.height/2-y,t.scrollTop);o=t.scrollTop+r,y+=t.scrollTop-o}if("end"===u)if(y||(y=g.bottom),m===t)o=E+y-t.clientHeight;else{var c=0-Math.min(e.bottom-y,t.scrollTop);o=t.scrollTop+c,y+=t.scrollTop-o}if("nearest"===u)if(y||(y=g.top),m===t){var f=n(E,E+H,H,E+y,E+y+g.height,g.height);o=E+f}else{var s=n(e.top,e.bottom,e.height,y,y+g.height,g.height);o=t.scrollTop+s,y-=s}if("start"===h)if(T||(T=g.left),m===t)i=M+T;else{var d=Math.min(T-e.left,t.scrollHeight-t.clientLeft-t.scrollLeft);i=t.scrollLeft+d,T-=i-t.scrollLeft}if("center"===h)if(T||(T=g.left+g.width/2),m===t)i=M+T-t.clientWidth/2;else{var a=0-Math.min(e.left+e.width/2-T,t.scrollLeft);i=t.scrollLeft+a,T+=t.scrollLeft-i}if("end"===h)if(T||(T=g.right),m===t)i=M+T-t.clientWidth;else{var p=0-Math.min(e.right-T,t.scrollLeft);i=t.scrollLeft+p,T+=t.scrollLeft-i}if("nearest"===h)if(T||(T=g.left),m===t){var v=n(M,M+L,L,M+T,M+T+g.width,g.width);i=M+v}else{var w=n(e.left,e.right,e.width,T,T+g.width,g.width);i=t.scrollLeft+w,T-=w}return{el:t,top:o,left:i}})},r=function(t){return"function"==typeof t},c=function(t){return t===Object(t)&&0!==Object.keys(t).length},f=function(e,o){void 0===o&&(o="auto"),void 0===t&&(t="scrollBehavior"in document.documentElement.style),e.forEach(function(e){var i=e.el,n=e.top,l=e.left;i.scroll&&t?i.scroll({top:n,left:l,behavior:o}):i===document.documentElement?window.scrollTo(l,n):(i.scrollTop=n,i.scrollLeft=l)})},s=function(t){return void 0===t&&(t=!0),!0===t||null===t?{block:"start",inline:"nearest"}:!1===t?{block:"end",inline:"nearest"}:c(t)?t:{block:"start",inline:"nearest"}};return function(t,e){if(void 0===e&&(e=!0),c(e)&&r(e.behavior))return e.behavior(l(t,e));var o=s(e);return f(l(t,o),o.behavior)}});
+!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(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},i=function(t,e,o){var i=getComputedStyle(t,null)["overflow"+e];return(!o||"hidden"!==i)&&("visible"!==i&&"clip"!==i)},n=function(t,e){return o(t,"Y")&&i(t,"Y",e)||o(t,"X")&&i(t,"X",e)},l=function(t,e,o,i,n,l){return i<t&&n>e||i>t&&n<e?0:i<t&&l<o||n>e&&l>o?i-t:n>e&&l<o||i<t&&l>o?n-e:0},r=function(t,o){void 0===o&&(o={});var i=o,r=i.scrollMode,c=void 0===r?"always":r,f=i.block,s=void 0===f?"center":f,u=i.inline,d=void 0===u?"nearest":u,h=i.boundary,a=i.skipOverflowHiddenElements,p=void 0!==a&&a,v="function"==typeof h?h:function(t){return t!==h};if(!e(t))throw new Error("Element is required in scrollIntoView");for(var w,g=t.getBoundingClientRect(),m=document.documentElement,b=[];e(w=t.parentNode)&&v(t);)(n(w,p)||w===m)&&b.push(w),t=w;var y,T,L=window.visualViewport?window.visualViewport.width:m.clientWidth,H=window.visualViewport?window.visualViewport.height:m.clientHeight,E=window.scrollX||window.pageXOffset,M=window.scrollY||window.pageYOffset;if("if-needed"===c&&b.every(function(t){var e=t.getBoundingClientRect();if(g.top<e.top)return!1;if(g.bottom>e.bottom)return!1;if(t===m){if(g.bottom>H)return!1;if(g.left>L)return!1}return!0}))return[];return b.map(function(t){var e=t.getBoundingClientRect(),o=0,i=0;if("start"===s)if(y||(y=g.top),m===t)o=M+y;else{var n=Math.min(y-e.top,t.scrollHeight-t.clientHeight-t.scrollTop);o=t.scrollTop+n,y-=o-t.scrollTop}if("center"===s)if(y||(y=g.top+g.height/2),m===t)o=M+y-t.clientHeight/2;else{var r=0-Math.min(e.top+e.height/2-y,t.scrollTop);o=t.scrollTop+r,y+=t.scrollTop-o}if("end"===s)if(y||(y=g.bottom),m===t)o=M+y-t.clientHeight;else{var c=0-Math.min(e.bottom-y,t.scrollTop);o=t.scrollTop+c,y+=t.scrollTop-o}if("nearest"===s)if(y||(y=g.top),m===t){var f=l(M,M+H,H,M+y,M+y+g.height,g.height);o=M+f}else{var u=l(e.top,e.bottom,e.height,y,y+g.height,g.height);o=t.scrollTop+u,y-=u}if("start"===d)if(T||(T=g.left),m===t)i=E+T;else{var h=Math.min(T-e.left,t.scrollHeight-t.clientLeft-t.scrollLeft);i=t.scrollLeft+h,T-=i-t.scrollLeft}if("center"===d)if(T||(T=g.left+g.width/2),m===t)i=E+T-t.clientWidth/2;else{var a=0-Math.min(e.left+e.width/2-T,t.scrollLeft);i=t.scrollLeft+a,T+=t.scrollLeft-i}if("end"===d)if(T||(T=g.right),m===t)i=E+T-t.clientWidth;else{var p=0-Math.min(e.right-T,t.scrollLeft);i=t.scrollLeft+p,T+=t.scrollLeft-i}if("nearest"===d)if(T||(T=g.left),m===t){var v=l(E,E+L,L,E+T,E+T+g.width,g.width);i=E+v}else{var w=l(e.left,e.right,e.width,T,T+g.width,g.width);i=t.scrollLeft+w,T-=w}return{el:t,top:o,left:i}})},c=function(t){return"function"==typeof t},f=function(t){return t===Object(t)&&0!==Object.keys(t).length},s=function(e,o){void 0===o&&(o="auto"),void 0===t&&(t="scrollBehavior"in document.documentElement.style),e.forEach(function(e){var i=e.el,n=e.top,l=e.left;i.scroll&&t?i.scroll({top:n,left:l,behavior:o}):i===document.documentElement?window.scrollTo(l,n):(i.scrollTop=n,i.scrollLeft=l)})},u=function(t){return void 0===t&&(t=!0),!0===t||null===t?{block:"start",inline:"nearest"}:!1===t?{block:"end",inline:"nearest"}:f(t)?t:{block:"start",inline:"nearest"}};return function(t,e){if(void 0===e&&(e=!0),f(e)&&c(e.behavior))return e.behavior(r(t,e));var o=u(e);return s(r(t,o),o.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

Total package byte prevSize

64528

increased by3.53%

Lines of code

886

increased by1.96%

Number of lines in readme file

439

increased by2.33%

No dependency changes