scroll-into-view-if-needed
Advanced tools
Comparing version 2.2.4 to 2.2.5
@@ -13,11 +13,11 @@ # Changelog | ||
* Support for `behavior`, `block` and `inline` options, from [the spec](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView). | ||
* `scrollMode: "if-needed" | "always"` to control the `if-needed` behavior, based on [the csswg proposal to the spec](https://github.com/w3c/csswg-drafts/pull/1805). | ||
- Support for `behavior`, `block` and `inline` options, from [the spec](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView). | ||
- `scrollMode: "if-needed" | "always"` to control the `if-needed` behavior, based on [the csswg proposal to the spec](https://github.com/w3c/csswg-drafts/pull/1805). | ||
### Removed | ||
* `centerIfNeeded`, use `scrollMode: "if-needed", block: "center"` instead. | ||
* `duration` to trigger animation, use [`smooth-scroll-into-view-if-needed`](https://github.com/stipsan/smooth-scroll-into-view-if-needed) instead. | ||
* `handleScroll(parent, {scrollLeft, scrollTop}, options)`, use `behavior: function(actions)` instead, where `actions` is an array of `{el, top, left}` allowing you to scroll everything in parallel or in a sequence, it's up to you. | ||
* `offset`, use wrapper elements and CSS like padding or margins instead. | ||
- `centerIfNeeded`, use `scrollMode: "if-needed", block: "center"` instead. | ||
- `duration` to trigger animation, use [`smooth-scroll-into-view-if-needed`](https://github.com/stipsan/smooth-scroll-into-view-if-needed) instead. | ||
- `handleScroll(parent, {scrollLeft, scrollTop}, options)`, use `behavior: function(actions)` instead, where `actions` is an array of `{el, top, left}` allowing you to scroll everything in parallel or in a sequence, it's up to you. | ||
- `offset`, use wrapper elements and CSS like padding or margins instead. | ||
@@ -28,3 +28,3 @@ ## [1.5.0] - 2018-02-25 | ||
* `sideEffects: false` in package.json to enable optimizations introduced in webpack v4. | ||
- `sideEffects: false` in package.json to enable optimizations introduced in webpack v4. | ||
@@ -35,7 +35,7 @@ ## [1.4.0] - 2017-11-17 | ||
* New `handleScroll` option allows customizing scrolling behavior. | ||
- New `handleScroll` option allows customizing scrolling behavior. | ||
### Changed | ||
* Animation logic is separated from scroll calculation logic. This allows skip | ||
- Animation logic is separated from scroll calculation logic. This allows skip | ||
importing animation dependencies and reduces bundle sizes when you don't need | ||
@@ -48,3 +48,3 @@ the built in animation feature. | ||
* New API interface (#148 @tonybdesign) | ||
- New API interface (#148 @tonybdesign) | ||
@@ -55,3 +55,3 @@ ## [1.2.8] - 2017-11-05 | ||
* Missing TypeScript definitions and rollup/webpack pkg.module files from | ||
- Missing TypeScript definitions and rollup/webpack pkg.module files from | ||
published package (#145) | ||
@@ -63,3 +63,3 @@ | ||
* Package published on npm contained unnecessary files bloating the package | ||
- Package published on npm contained unnecessary files bloating the package | ||
(#144) | ||
@@ -71,3 +71,3 @@ | ||
* Don't use postinstall as it runs in userland (#143) | ||
- Don't use postinstall as it runs in userland (#143) | ||
@@ -78,3 +78,3 @@ ## [1.2.5] - 2017-11-05 | ||
* Migrate tests to | ||
- Migrate tests to | ||
[new page](https://stipsan.github.io/scroll-into-view-if-needed/) that | ||
@@ -87,3 +87,3 @@ showcases how it works (#141) | ||
* TypeScript requires HTMLElement when it should accept Element (#140) | ||
- TypeScript requires HTMLElement when it should accept Element (#140) | ||
@@ -94,3 +94,3 @@ ## [1.2.3] - 2017-11-04 | ||
* Incorrect TypeScript declarations and export format (#136) | ||
- Incorrect TypeScript declarations and export format (#136) | ||
@@ -101,3 +101,3 @@ ## [1.2.2] - 2017-10-29 | ||
* Incorrect export declaration in TS typings (#132) | ||
- Incorrect export declaration in TS typings (#132) | ||
@@ -108,3 +108,3 @@ ## [1.2.1] - 2017-10-02 | ||
* Fifth option should be optional (#129) | ||
- Fifth option should be optional (#129) | ||
@@ -115,3 +115,3 @@ ## [1.2.0] - 2017-10-01 | ||
* Set offset feature (#127 @iwangulenko) | ||
- Set offset feature (#127 @iwangulenko) | ||
@@ -122,3 +122,3 @@ ## [1.1.1] - 2017-10-01 | ||
* Windows compatibility and CommonJS interop change back to Babel 5 | ||
- Windows compatibility and CommonJS interop change back to Babel 5 | ||
functionality (#121 @khell) | ||
@@ -130,3 +130,3 @@ | ||
* An optional argument finalElement was added to limit the scope of the function | ||
- An optional argument finalElement was added to limit the scope of the function | ||
(#108 @hemnstill) | ||
@@ -138,7 +138,7 @@ | ||
* MIT License (#107 @JKillian) | ||
- MIT License (#107 @JKillian) | ||
### Changed | ||
* Reduced size of dist build by switching from rollup to babel (#106 @JKillian) | ||
- Reduced size of dist build by switching from rollup to babel (#106 @JKillian) | ||
@@ -149,3 +149,3 @@ ## [1.0.6] - 2016-11-17 | ||
* Updated typescript definition making options optional (#75 @pelotom) | ||
- Updated typescript definition making options optional (#75 @pelotom) | ||
@@ -156,7 +156,7 @@ ## [1.0.5] - 2016-11-12 | ||
* Fix TypeScript definition file issues (#74 @forabi) | ||
- Fix TypeScript definition file issues (#74 @forabi) | ||
### Documentation | ||
* React example snippet in readme. | ||
- React example snippet in readme. | ||
@@ -167,4 +167,4 @@ ## [1.0.4] - 2016-10-31 | ||
* Changelog readme. | ||
* TypeScript definition file (#73 @forabi) | ||
- Changelog readme. | ||
- TypeScript definition file (#73 @forabi) | ||
@@ -175,3 +175,3 @@ ## 1.0.3 - 2016-09-30 | ||
* link to official ponyfill page (#68 @sindresorhus) | ||
- link to official ponyfill page (#68 @sindresorhus) | ||
@@ -182,11 +182,11 @@ ## 1.0.2 - 2016-04-18 | ||
* Greenkeeper | ||
- Greenkeeper | ||
### Fixes | ||
* Incomatibility with default webpack config. | ||
- Incomatibility with default webpack config. | ||
## 1.0.1 - 2016-04-18 | ||
* PULLED: accidentally pushed incomplete build to npm! | ||
- PULLED: accidentally pushed incomplete build to npm! | ||
@@ -197,3 +197,3 @@ ## 1.0.0 - 2016-04-18 | ||
* Initial release. | ||
- Initial release. | ||
@@ -200,0 +200,0 @@ [unreleased]: https://github.com/stipsan/scroll-into-view-if-needed/compare/v1.5.0...HEAD |
@@ -102,7 +102,7 @@ "use strict"; | ||
if (frame === viewport) { | ||
if (targetRect.bottom > viewportHeight) { | ||
if (targetRect.bottom > viewportHeight || targetRect.top < 0) { | ||
return false; | ||
} | ||
if (targetRect.left > viewportWidth) { | ||
if (targetRect.left > viewportWidth || targetRect.right < 0) { | ||
return false; | ||
@@ -109,0 +109,0 @@ } |
@@ -95,7 +95,7 @@ import getViewport from './viewport'; | ||
if (frame === viewport) { | ||
if (targetRect.bottom > viewportHeight) { | ||
if (targetRect.bottom > viewportHeight || targetRect.top < 0) { | ||
return false; | ||
} | ||
if (targetRect.left > viewportWidth) { | ||
if (targetRect.left > viewportWidth || targetRect.right < 0) { | ||
return false; | ||
@@ -102,0 +102,0 @@ } |
@@ -11,3 +11,3 @@ { | ||
}, | ||
"version": "2.2.4", | ||
"version": "2.2.5", | ||
"main": "index.js", | ||
@@ -50,10 +50,10 @@ "module": "es/index.js", | ||
"eslint-plugin-import": "2.12.0", | ||
"eslint-plugin-react": "7.8.2", | ||
"eslint-plugin-react": "7.9.1", | ||
"flowgen": "1.2.2", | ||
"husky": "0.14.3", | ||
"lint-staged": "7.1.2", | ||
"prettier": "1.12.1", | ||
"lint-staged": "7.1.3", | ||
"prettier": "1.13.5", | ||
"prettier-package-json": "1.6.0", | ||
"rimraf": "2.6.2", | ||
"rollup": "0.59.3", | ||
"rollup": "0.60.1", | ||
"rollup-plugin-babel": "4.0.0-beta.4", | ||
@@ -64,6 +64,6 @@ "rollup-plugin-commonjs": "9.1.3", | ||
"rollup-plugin-terser": "1.0.1", | ||
"semantic-release": "15.5.0", | ||
"semantic-release": "15.5.1", | ||
"tslint": "5.10.0", | ||
"tslint-config-prettier": "1.13.0", | ||
"typescript": "2.8.3" | ||
"typescript": "2.9.1" | ||
}, | ||
@@ -70,0 +70,0 @@ "keywords": [ |
@@ -234,6 +234,6 @@ [![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) | ||
* Prevent the browser window from scrolling. | ||
* Scroll things into view below the fold without scrolling to it. | ||
* Scroll elements into view in a list, without scrolling container elements. | ||
* Prematurely optimizing performance instead of code-splitting your app. | ||
- Prevent the browser window from scrolling. | ||
- Scroll things into view below the fold without scrolling to it. | ||
- Scroll elements into view in a list, without scrolling container elements. | ||
- Prematurely optimizing performance instead of code-splitting your app. | ||
@@ -422,17 +422,17 @@ You can also pass a function to do more dynamic checks to override the scroll scoping: | ||
* [smooth-scroll-into-view-if-needed](http://npmjs.com/package/smooth-scroll-into-view-if-needed) – ponyfills smooth scrolling. | ||
* [react-scroll-into-view-if-needed](https://www.npmjs.com/package/react-scroll-into-view-if-needed) – A thin wrapper to scroll your component into view. | ||
* [Don't be shy, add yours!](https://github.com/stipsan/scroll-into-view-if-needed/edit/master/README.md) | ||
- [smooth-scroll-into-view-if-needed](http://npmjs.com/package/smooth-scroll-into-view-if-needed) – ponyfills smooth scrolling. | ||
- [react-scroll-into-view-if-needed](https://www.npmjs.com/package/react-scroll-into-view-if-needed) – A thin wrapper to scroll your component into view. | ||
- [Don't be shy, add yours!](https://github.com/stipsan/scroll-into-view-if-needed/edit/master/README.md) | ||
# Who's using this | ||
* [zeit.co/docs](https://github.com/zeit/docs) – Documentation of ZEIT Now and other services. | ||
* [Selenium IDE](https://github.com/SeleniumHQ/selenium-ide) – An integrated development environment for Selenium scripts. | ||
* [Box UI Elements](https://github.com/box/box-ui-elements) – Box UI Elements are pre-built UI components that allow developers to add elements of the main Box web application into their own applications. | ||
* [react-responsive-ui](https://github.com/catamphetamine/react-responsive-ui) – Responsive React UI components. | ||
* [Mineral UI](https://github.com/mineral-ui/mineral-ui) – | ||
- [zeit.co/docs](https://github.com/zeit/docs) – Documentation of ZEIT Now and other services. | ||
- [Selenium IDE](https://github.com/SeleniumHQ/selenium-ide) – An integrated development environment for Selenium scripts. | ||
- [Box UI Elements](https://github.com/box/box-ui-elements) – Box UI Elements are pre-built UI components that allow developers to add elements of the main Box web application into their own applications. | ||
- [react-responsive-ui](https://github.com/catamphetamine/react-responsive-ui) – Responsive React UI components. | ||
- [Mineral UI](https://github.com/mineral-ui/mineral-ui) – | ||
A design system and React component library for the web that lets you quickly build high-quality, accessible apps. | ||
* [Covalent](https://github.com/Teradata/covalent) – Teradata UI Platform built on Angular Material. | ||
* [docs.expo.io](https://github.com/expo/expo-docs) – Documentation for Expo, its SDK, client and services. | ||
* [Add yourself to the list 😉](https://github.com/stipsan/scroll-into-view-if-needed/edit/master/README.md) | ||
- [Covalent](https://github.com/Teradata/covalent) – Teradata UI Platform built on Angular Material. | ||
- [docs.expo.io](https://github.com/expo/expo-docs) – Documentation for Expo, its SDK, client and services. | ||
- [Add yourself to the list 😉](https://github.com/stipsan/scroll-into-view-if-needed/edit/master/README.md) | ||
@@ -439,0 +439,0 @@ [gzip-badge]: http://img.badgesize.io/https://unpkg.com/scroll-into-view-if-needed/umd/scroll-into-view-if-needed.min.js?compression=gzip&label=gzip%20size&style=flat-square |
@@ -1,2 +0,2 @@ | ||
declare global { | ||
declare global { | ||
interface Window { | ||
@@ -3,0 +3,0 @@ visualViewport?: { |
@@ -108,7 +108,7 @@ (function (global, factory) { | ||
if (frame === viewport) { | ||
if (targetRect.bottom > viewportHeight) { | ||
if (targetRect.bottom > viewportHeight || targetRect.top < 0) { | ||
return false; | ||
} | ||
if (targetRect.left > viewportWidth) { | ||
if (targetRect.left > viewportWidth || targetRect.right < 0) { | ||
return false; | ||
@@ -115,0 +115,0 @@ } |
@@ -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(){return t||(t="CSS1Compat"===document.compatMode?document.documentElement:document.scrollingElement||document.documentElement),t},o=function(t){return null!=t&&"object"==typeof t&&(1===t.nodeType||11===t.nodeType)},i=function(t,e){return"X"===e?t.clientWidth<t.scrollWidth:t.clientHeight<t.scrollHeight},n=function(t,e,o){var i=getComputedStyle(t,null)["overflow"+e];return(!o||"hidden"!==i)&&("visible"!==i&&"clip"!==i)},r=function(t,o){return t===e()||i(t,"Y")&&n(t,"Y",o)||i(t,"X")&&n(t,"X",o)},l=function(t,e,o,i,n,r,l,f){return r<t&&l>e||r>t&&l<e?0:r<t&&f<o||l>e&&f>o?r-t-i:l>e&&f<o||r<t&&f>o?l-e+n:0},f=function(t,i){void 0===i&&(i={});var n=i,f=n.scrollMode,c=void 0===f?"always":f,d=n.block,s=void 0===d?"center":d,u=n.inline,a=void 0===u?"nearest":u,h=n.boundary,p=n.skipOverflowHiddenElements,v=void 0!==p&&p,w="function"==typeof h?h:function(t){return t!==h};if(!o(t))throw new Error("Element is required in scrollIntoView");for(var m,g=t.getBoundingClientRect(),b=[];o(m=t.parentNode||t.host)&&w(t);)r(m,v)&&b.push(m),t=m;var y,T,L=e(),M=window.visualViewport?window.visualViewport.width:Math.min(L.clientWidth,window.innerWidth),H=window.visualViewport?window.visualViewport.height:Math.min(L.clientHeight,window.innerHeight),W=window.scrollX||window.pageXOffset,C=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===L){if(g.bottom>H)return!1;if(g.left>M)return!1}return!0}))return[];return b.map(function(t){var e=t.getBoundingClientRect(),o=getComputedStyle(t),i=parseInt(o.borderLeftWidth,10),n=parseInt(o.borderTopWidth,10),r=parseInt(o.borderRightWidth,10),f=parseInt(o.borderBottomWidth,10),c=0,d=0;if("start"===s)if(y||(y=g.top),L===t)c=C+y;else{var u=Math.min(y-e.top,t.scrollHeight-t.clientHeight-t.scrollTop);c=t.scrollTop+u-n}if("center"===s)if(y||(y=g.top+g.height/2),L===t)c=C+y-H/2;else{var h=0-Math.min(e.top+e.height/2-y,t.scrollTop);c=t.scrollTop+h}if("end"===s)if(y||(y=g.bottom),L===t)c=C+y-H;else{var p=0-Math.min(e.bottom-y,t.scrollTop);c=t.scrollTop+p+f}if("nearest"===s)if(y||(y=g.top),L===t){var v=l(C,C+H,H,n,f,C+y,C+y+g.height,g.height);c=C+v}else{var w=l(e.top,e.bottom,e.height,n,f,y,y+g.height,g.height);c=t.scrollTop+w}if("start"===a)if(T||(T=g.left),L===t)d=W+T;else{var m=Math.min(T-e.left,t.scrollHeight-t.clientLeft-t.scrollLeft);d=t.scrollLeft+m-i}if("center"===a)if(T||(T=g.left+g.width/2),L===t)d=W+T-M/2;else{var b=0-Math.min(e.left+e.width/2-T,t.scrollLeft);d=t.scrollLeft+b}if("end"===a)if(T||(T=g.right),L===t)d=W+T-M;else{var E=0-Math.min(e.right-T,t.scrollLeft);d=t.scrollLeft+E+r}if("nearest"===a)if(T||(T=g.left),L===t){var k=l(W,W+M,M,i,r,W+T,W+T+g.width,g.width);d=W+k}else{var I=l(e.left,e.right,e.width,i,r,T,T+g.width,g.width);d=t.scrollLeft+I}return y+=t.scrollTop-c,T+=t.scrollLeft-d,{el:t,top:c,left:d}})},c=function(t){return"function"==typeof t},d=function(t){return t===Object(t)&&0!==Object.keys(t).length},s=function(t,o){void 0===o&&(o="auto");var i=e(),n="scrollBehavior"in i.style;t.forEach(function(t){var e=t.el,r=t.top,l=t.left;e.scroll&&n?e.scroll({top:r,left:l,behavior:o}):e===i?window.scrollTo(l,r):(e.scrollTop=r,e.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"}:d(t)?t:{block:"start",inline:"nearest"}};return function(t,e){if(void 0===e&&(e=!0),d(e)&&c(e.behavior))return e.behavior(f(t,e));var o=u(e);return s(f(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(){return t||(t="CSS1Compat"===document.compatMode?document.documentElement:document.scrollingElement||document.documentElement),t},o=function(t){return null!=t&&"object"==typeof t&&(1===t.nodeType||11===t.nodeType)},i=function(t,e){return"X"===e?t.clientWidth<t.scrollWidth:t.clientHeight<t.scrollHeight},n=function(t,e,o){var i=getComputedStyle(t,null)["overflow"+e];return(!o||"hidden"!==i)&&("visible"!==i&&"clip"!==i)},r=function(t,o){return t===e()||i(t,"Y")&&n(t,"Y",o)||i(t,"X")&&n(t,"X",o)},l=function(t,e,o,i,n,r,l,f){return r<t&&l>e||r>t&&l<e?0:r<t&&f<o||l>e&&f>o?r-t-i:l>e&&f<o||r<t&&f>o?l-e+n:0},f=function(t,i){void 0===i&&(i={});var n=i,f=n.scrollMode,c=void 0===f?"always":f,d=n.block,s=void 0===d?"center":d,u=n.inline,h=void 0===u?"nearest":u,a=n.boundary,p=n.skipOverflowHiddenElements,v=void 0!==p&&p,w="function"==typeof a?a:function(t){return t!==a};if(!o(t))throw new Error("Element is required in scrollIntoView");for(var m,g=t.getBoundingClientRect(),b=[];o(m=t.parentNode||t.host)&&w(t);)r(m,v)&&b.push(m),t=m;var y,T,L=e(),M=window.visualViewport?window.visualViewport.width:Math.min(L.clientWidth,window.innerWidth),H=window.visualViewport?window.visualViewport.height:Math.min(L.clientHeight,window.innerHeight),W=window.scrollX||window.pageXOffset,C=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===L){if(g.bottom>H||g.top<0)return!1;if(g.left>M||g.right<0)return!1}return!0}))return[];return b.map(function(t){var e=t.getBoundingClientRect(),o=getComputedStyle(t),i=parseInt(o.borderLeftWidth,10),n=parseInt(o.borderTopWidth,10),r=parseInt(o.borderRightWidth,10),f=parseInt(o.borderBottomWidth,10),c=0,d=0;if("start"===s)if(y||(y=g.top),L===t)c=C+y;else{var u=Math.min(y-e.top,t.scrollHeight-t.clientHeight-t.scrollTop);c=t.scrollTop+u-n}if("center"===s)if(y||(y=g.top+g.height/2),L===t)c=C+y-H/2;else{var a=0-Math.min(e.top+e.height/2-y,t.scrollTop);c=t.scrollTop+a}if("end"===s)if(y||(y=g.bottom),L===t)c=C+y-H;else{var p=0-Math.min(e.bottom-y,t.scrollTop);c=t.scrollTop+p+f}if("nearest"===s)if(y||(y=g.top),L===t){var v=l(C,C+H,H,n,f,C+y,C+y+g.height,g.height);c=C+v}else{var w=l(e.top,e.bottom,e.height,n,f,y,y+g.height,g.height);c=t.scrollTop+w}if("start"===h)if(T||(T=g.left),L===t)d=W+T;else{var m=Math.min(T-e.left,t.scrollHeight-t.clientLeft-t.scrollLeft);d=t.scrollLeft+m-i}if("center"===h)if(T||(T=g.left+g.width/2),L===t)d=W+T-M/2;else{var b=0-Math.min(e.left+e.width/2-T,t.scrollLeft);d=t.scrollLeft+b}if("end"===h)if(T||(T=g.right),L===t)d=W+T-M;else{var E=0-Math.min(e.right-T,t.scrollLeft);d=t.scrollLeft+E+r}if("nearest"===h)if(T||(T=g.left),L===t){var k=l(W,W+M,M,i,r,W+T,W+T+g.width,g.width);d=W+k}else{var I=l(e.left,e.right,e.width,i,r,T,T+g.width,g.width);d=t.scrollLeft+I}return y+=t.scrollTop-c,T+=t.scrollLeft-d,{el:t,top:c,left:d}})},c=function(t){return"function"==typeof t},d=function(t){return t===Object(t)&&0!==Object.keys(t).length},s=function(t,o){void 0===o&&(o="auto");var i=e(),n="scrollBehavior"in i.style;t.forEach(function(t){var e=t.el,r=t.top,l=t.left;e.scroll&&n?e.scroll({top:r,left:l,behavior:o}):e===i?window.scrollTo(l,r):(e.scrollTop=r,e.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"}:d(t)?t:{block:"start",inline:"nearest"}};return function(t,e){if(void 0===e&&(e=!0),d(e)&&c(e.behavior))return e.behavior(f(t,e));var o=u(e);return s(f(t,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
67430