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

Improved scrolling & pagination #2676

Merged
merged 13 commits into from
Mar 1, 2019
Merged

Improved scrolling & pagination #2676

Changes from 1 commit
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
b3e6cbf
restore scroll state when timeline resizes using ResizeObserver
bwindels Feb 21, 2019
ecb0748
remove fix for old chrome bug
bwindels Feb 21, 2019
03784e5
replace getBoundingClientRect() with offset/scrollTop & clientHeight
bwindels Feb 21, 2019
41ae618
only clear min-height on scroll & adding items (componentDidUpdate)
bwindels Feb 22, 2019
3823642
some cleanup
bwindels Feb 22, 2019
db7203e
make sure the min-height doesn't get cleared by checkScroll
bwindels Feb 22, 2019
32f055b
clarify why we need this
bwindels Feb 22, 2019
8bb8ec1
clear min-height on timeline resets and other occasions where we load it
bwindels Feb 22, 2019
ba5f163
fall back to InteractionObserver for detecting timeline resizes
bwindels Feb 22, 2019
4203079
remove test for #528 as we removed that fix
bwindels Feb 25, 2019
c920dd2
check top of node instead of bottom, since coming in from last
bwindels Feb 26, 2019
712522a
set chrome path for travis CI explicitly
bwindels Feb 28, 2019
0c06a70
pr feedback
bwindels Feb 28, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 27 additions & 6 deletions src/components/structures/ScrollPanel.js
View file
Open in desktop
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);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: Could also do i <= 1000 in the loop, if you like.

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