diff --git a/UNRELEASED.md b/UNRELEASED.md index be2f604cd9..f163b9c50e 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -1,3 +1,6 @@ # Unreleased -__Nothing Yet!__ +**Changed:** + +- bpk-component-infinite-scroll: + - Changed IntersectionObserver Threshold from 1 to 0.99. diff --git a/packages/bpk-component-infinite-scroll/src/withInfiniteScroll-test.js b/packages/bpk-component-infinite-scroll/src/withInfiniteScroll-test.js index 500af6524a..f57a982523 100644 --- a/packages/bpk-component-infinite-scroll/src/withInfiniteScroll-test.js +++ b/packages/bpk-component-infinite-scroll/src/withInfiniteScroll-test.js @@ -50,7 +50,7 @@ describe('withInfiniteScroll', () => { beforeEach(() => { global.IntersectionObserver = class { constructor(callback) { - intersect = async () => callback([{ intersectionRatio: 1 }]); + intersect = async () => callback([{ isIntersecting: true }]); } observe() {} // eslint-disable-line unobserve() {} // eslint-disable-line diff --git a/packages/bpk-component-infinite-scroll/src/withInfiniteScroll.js b/packages/bpk-component-infinite-scroll/src/withInfiniteScroll.js index 528be00225..a1e3cf3cb8 100644 --- a/packages/bpk-component-infinite-scroll/src/withInfiniteScroll.js +++ b/packages/bpk-component-infinite-scroll/src/withInfiniteScroll.js @@ -111,7 +111,7 @@ const withInfiniteScroll = ( this.props.dataSource.onDataChange(this.updateData); this.observer = new IntersectionObserver(this.handleIntersection, { - threshold: 1, + threshold: 0.99, // using 0.99 instead of 1 to avoid problems with float precision in IE11 }); } @@ -194,7 +194,7 @@ const withInfiniteScroll = ( handleIntersection = (entries: Array) => { const { onScroll } = this.props; const entry = entries[0]; - if (entry.intersectionRatio >= 1) { + if (entry.isIntersecting) { if (this.sentinel) { this.observer.unobserve(this.sentinel); }