From a54a66f6f94a12f3441ec004a545a691ea5766dc Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 10 Mar 2022 18:00:13 +0000 Subject: [PATCH 1/2] Remove data-scrollbar handling, it never quite did the right thing --- res/css/structures/_RoomView.scss | 4 ---- src/components/structures/ScrollPanel.tsx | 25 ++--------------------- 2 files changed, 2 insertions(+), 27 deletions(-) diff --git a/res/css/structures/_RoomView.scss b/res/css/structures/_RoomView.scss index a6b2970ddf6..d23ab4477da 100644 --- a/res/css/structures/_RoomView.scss +++ b/res/css/structures/_RoomView.scss @@ -70,10 +70,6 @@ limitations under the License. overflow-y: auto; flex: 1 1 0; overflow-anchor: none; - - &[data-scrollbar=false] { - overflow-y: hidden; - } } .mx_RoomView_messagePanelSearchSpinner { diff --git a/src/components/structures/ScrollPanel.tsx b/src/components/structures/ScrollPanel.tsx index d650cfc9623..9cb0cec5149 100644 --- a/src/components/structures/ScrollPanel.tsx +++ b/src/components/structures/ScrollPanel.tsx @@ -23,7 +23,6 @@ import { replaceableComponent } from "../../utils/replaceableComponent"; import { getKeyBindingsManager } from "../../KeyBindingsManager"; import ResizeNotifier from "../../utils/ResizeNotifier"; import { KeyBindingAction } from "../../accessibility/KeyboardShortcuts"; -import UIStore, { UI_EVENTS } from "../../stores/UIStore"; const DEBUG_SCROLL = false; @@ -206,17 +205,13 @@ export default class ScrollPanel extends React.Component { constructor(props, context) { super(props, context); - if (this.props.resizeNotifier) { - this.props.resizeNotifier.on("middlePanelResizedNoisy", this.onResize); - } + this.props.resizeNotifier?.on("middlePanelResizedNoisy", this.onResize); this.resetScrollState(); } componentDidMount() { this.checkScroll(); - - UIStore.instance.on(UI_EVENTS.Resize, this.onUiResize); } componentDidUpdate() { @@ -236,11 +231,7 @@ export default class ScrollPanel extends React.Component { // (We could use isMounted(), but facebook have deprecated that.) this.unmounted = true; - if (this.props.resizeNotifier) { - this.props.resizeNotifier.removeListener("middlePanelResizedNoisy", this.onResize); - } - - UIStore.instance.off(UI_EVENTS.Resize, this.onUiResize); + this.props.resizeNotifier?.removeListener("middlePanelResizedNoisy", this.onResize); } private onScroll = ev => { @@ -735,17 +726,6 @@ export default class ScrollPanel extends React.Component { } } - private onUiResize = () => { - this.setDataScrollbar(); - }; - - private setDataScrollbar(contentHeight = this.getMessagesHeight()) { - const sn = this.getScrollNode(); - const minHeight = sn.clientHeight; - const displayScrollbar = contentHeight > minHeight; - sn.dataset.scrollbar = displayScrollbar.toString(); - } - // need a better name that also indicates this will change scrollTop? Rebalance height? Reveal content? private async updateHeight(): Promise { // wait until user has stopped scrolling @@ -767,7 +747,6 @@ export default class ScrollPanel extends React.Component { const minHeight = sn.clientHeight; const height = Math.max(minHeight, contentHeight); this.pages = Math.ceil(height / PAGE_SIZE); - this.setDataScrollbar(contentHeight); this.bottomGrowth = 0; const newHeight = `${this.getListHeight()}px`; From 1a9c40eda9a4b957bd3ac2d7de120733e10f9fa3 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 11 Mar 2022 07:51:31 +0000 Subject: [PATCH 2/2] Remove pagination forced overscroll space --- src/components/structures/ScrollPanel.tsx | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/src/components/structures/ScrollPanel.tsx b/src/components/structures/ScrollPanel.tsx index 9cb0cec5149..51992b75296 100644 --- a/src/components/structures/ScrollPanel.tsx +++ b/src/components/structures/ScrollPanel.tsx @@ -32,11 +32,6 @@ const UNPAGINATION_PADDING = 6000; // The number of milliseconds to debounce calls to onUnfillRequest, to prevent // many scroll events causing many unfilling requests. const UNFILL_REQUEST_DEBOUNCE_MS = 200; -// _updateHeight makes the height a ceiled multiple of this so we -// don't have to update the height too often. It also allows the user -// to scroll past the pagination spinner a bit so they don't feel blocked so -// much while the content loads. -const PAGE_SIZE = 400; let debuglog; if (DEBUG_SCROLL) { @@ -198,7 +193,7 @@ export default class ScrollPanel extends React.Component { private preventShrinkingState: IPreventShrinkingState; private unfillDebouncer: number; private bottomGrowth: number; - private pages: number; + private height: number; private heightUpdateInProgress: boolean; private divScroll: HTMLDivElement; @@ -543,7 +538,7 @@ export default class ScrollPanel extends React.Component { stuckAtBottom: this.props.startAtBottom, }; this.bottomGrowth = 0; - this.pages = 0; + this.height = 0; this.scrollTimeout = new Timer(100); this.heightUpdateInProgress = false; }; @@ -745,8 +740,7 @@ export default class ScrollPanel extends React.Component { const itemlist = this.itemlist.current; const contentHeight = this.getMessagesHeight(); const minHeight = sn.clientHeight; - const height = Math.max(minHeight, contentHeight); - this.pages = Math.ceil(height / PAGE_SIZE); + this.height = Math.max(minHeight, contentHeight); this.bottomGrowth = 0; const newHeight = `${this.getListHeight()}px`; @@ -815,7 +809,7 @@ export default class ScrollPanel extends React.Component { } private getListHeight(): number { - return this.bottomGrowth + (this.pages * PAGE_SIZE); + return this.bottomGrowth + this.height; } private getMessagesHeight(): number {