Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

scroll-into-view-if-needed

Package Overview
Dependencies
Maintainers
1
Versions
83
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version 2.2.4 to 2.2.5

66

CHANGELOG.md

@@ -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)}});
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc