mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-22 17:25:50 +03:00
Code Issues Projects Releases Packages Wiki Activity

fall back to InteractionObserver for detecting timeline resizes

Browse source 
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.
This commit is contained in:
Bruno Windels 2019-02-22 18:30:22 +01:00
parent 8bb8ec141e
commit ba5f16358f
1 changed files with 27 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
src/components/structures/ScrollPanel.js
View file

@ -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',
@ -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() {