Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
fall back to InteractionObserver for detecting timeline resizes
Browse files Browse the repository at this point in the history
this is not nearly as smooth as using ResizeObserver, as the
callback rate is a lot lower, but seems to be quite a bit better
than what we have right now, without the 7% cpu hog that
the requestAnimationFrame polling fallback has.
  • Loading branch information
bwindels committed Feb 26, 2019
1 parent 8bb8ec1 commit ba5f163
Showing 1 changed file with 27 additions and 6 deletions.
33 changes: 27 additions & 6 deletions src/components/structures/ScrollPanel.js
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,28 @@ if (DEBUG_SCROLL) {
* scroll down further. If stickyBottom is disabled, we just save the scroll
* offset as normal.
*/


function createTimelineResizeDetector(scrollNode, itemlist, callback) {
if (typeof ResizeObserver !== "undefined") {
const ro = new ResizeObserver(callback);
ro.observe(itemlist);
return ro;
} else if (typeof IntersectionObserver !== "undefined") {
const threshold = [];
for (let i = 0; i < 1000; ++i) {
threshold.push(i / 1000);
}
threshold.push(1);
const io = new IntersectionObserver(
callback,
{root: scrollNode, threshold},
);
io.observe(itemlist);
return io;
}
}

module.exports = React.createClass({
displayName: 'ScrollPanel',

Expand Down Expand Up @@ -161,12 +183,11 @@ module.exports = React.createClass({
componentDidMount: function() {
this.checkScroll();

if (typeof ResizeObserver !== "undefined") {
this._timelineSizeObserver = new ResizeObserver(() => {
this._restoreSavedScrollState();
});
this._timelineSizeObserver.observe(this.refs.itemlist);
}
this._timelineSizeObserver = createTimelineResizeDetector(
this._getScrollNode(),
this.refs.itemlist,
() => { this._restoreSavedScrollState(); },
);
},

componentDidUpdate: function() {
Expand Down

0 comments on commit ba5f163

Please sign in to comment.