scroll-into-view-if-needed
Advanced tools
Comparing version 2.2.20 to 2.2.21
10
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; |
@@ -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 @@ } |
@@ -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 |
(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; |
@@ -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)}}}); |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
45167
369
+ Addedcompute-scroll-into-view@1.0.20(transitive)
- Removedcompute-scroll-into-view@1.0.11(transitive)