imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use passive option for scroll handler

Browse source
This commit is contained in:
Germain Souquet 2021-05-28 14:59:14 +01:00
parent 71b217e4a1
commit f10e95956b
5 changed files with 32 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/components/structures/AutoHideScrollbar.js
View file

@ -23,6 +23,20 @@ export default class AutoHideScrollbar extends React.Component {
this._collectContainerRef = this._collectContainerRef.bind(this);
}
componentDidMount() {
if (this.containerRef && this.props.onScroll) {
// Using the passive option to not block the main thread
// https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#improving_scrolling_performance_with_passive_listeners
this.containerRef.addEventListener("scroll", this.props.onScroll, { passive: true });
}
}
componentWillUnmount() {
if (this.containerRef && this.props.onScroll) {
this.containerRef.removeEventListener("scroll", this.props.onScroll);
}
}
_collectContainerRef(ref) {
if (ref && !this.containerRef) {
this.containerRef = ref;
@ -41,7 +55,6 @@ export default class AutoHideScrollbar extends React.Component {
ref={this._collectContainerRef}
style={this.props.style}
className={["mx_AutoHideScrollbar", this.props.className].join(" ")}
onScroll={this.props.onScroll}
onWheel={this.props.onWheel}
tabIndex={this.props.tabIndex}
>

4
src/components/structures/IndicatorScrollbar.js
View file

@ -59,7 +59,9 @@ export default class IndicatorScrollbar extends React.Component {
_collectScroller(scroller) {
if (scroller && !this._scrollElement) {
this._scrollElement = scroller;
this._scrollElement.addEventListener("scroll", this.checkOverflow);
// Using the passive option to not block the main thread
// https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#improving_scrolling_performance_with_passive_listeners
this._scrollElement.addEventListener("scroll", this.checkOverflow, { passive: true });
this.checkOverflow();
}
}

7
src/components/structures/LeftPanel.tsx
View file

@ -97,6 +97,9 @@ export default class LeftPanel extends React.Component<IProps, IState> {
public componentDidMount() {
UIStore.instance.trackElementDimensions("ListContainer", this.listContainerRef.current);
UIStore.instance.on("ListContainer", this.refreshStickyHeaders);
// Using the passive option to not block the main thread
// https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#improving_scrolling_performance_with_passive_listeners
this.listContainerRef.current.addEventListener("scroll", this.onScroll, { passive: true });
}
public componentWillUnmount() {
@ -108,6 +111,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
SpaceStore.instance.off(UPDATE_SELECTED_SPACE, this.updateActiveSpace);
UIStore.instance.stopTrackingElementDimensions("ListContainer");
UIStore.instance.removeListener("ListContainer", this.refreshStickyHeaders);
this.listContainerRef.current.removeEventListener("scroll", this.onScroll);
}
public componentDidUpdate(prevProps: IProps, prevState: IState): void {
@ -295,7 +299,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
}
}
private onScroll = (ev: React.MouseEvent<HTMLDivElement>) => {
private onScroll = (ev: Event) => {
const list = ev.target as HTMLDivElement;
this.handleStickyHeaders(list);
};
@ -459,7 +463,6 @@ export default class LeftPanel extends React.Component<IProps, IState> {
<div className="mx_LeftPanel_roomListWrapper">
<div
className={roomListClasses}
onScroll={this.onScroll}
ref={this.listContainerRef}
// Firefox sometimes makes this element focusable due to
// overflow:scroll;, so force it out of tab order.