diff --git a/packages/editor-mobile/src/components/statusbar.tsx b/packages/editor-mobile/src/components/statusbar.tsx index c014ce393..fdf27a289 100644 --- a/packages/editor-mobile/src/components/statusbar.tsx +++ b/packages/editor-mobile/src/components/statusbar.tsx @@ -62,9 +62,12 @@ function StatusBar({ }; }, [tab.id, statusBar]); + const scrollState = useRef({ + isMovingUp: false, + startingOffset: 0 + }); const onScroll = React.useCallback((event: Event) => { const currentOffset = (event.target as HTMLElement)?.scrollTop; - post("editor-event:scroll", currentOffset); if (currentOffset < 200) { if (stickyRef.current) { stickyRef.current = false; @@ -76,11 +79,39 @@ function StatusBar({ } if (Date.now() - lastStickyChangeTime.current < 300) return; if (currentOffset > prevScroll.current) { - setSticky(false); - stickyRef.current = false; + if ( + !scrollState.current.startingOffset || + scrollState.current.isMovingUp + ) { + scrollState.current.startingOffset = currentOffset; + } + scrollState.current.isMovingUp = false; } else { - setSticky(true); - stickyRef.current = true; + if ( + !scrollState.current.startingOffset || + !scrollState.current.isMovingUp + ) { + scrollState.current.startingOffset = currentOffset; + } + scrollState.current.isMovingUp = true; + } + + if (scrollState.current.isMovingUp) { + if (currentOffset < scrollState.current.startingOffset - 50) { + if (!stickyRef.current) { + stickyRef.current = true; + setSticky(true); + } + scrollState.current.startingOffset = 0; + } + } else { + if (currentOffset > scrollState.current.startingOffset + 50) { + if (stickyRef.current) { + stickyRef.current = false; + setSticky(false); + } + scrollState.current.startingOffset = 0; + } } lastStickyChangeTime.current = Date.now(); prevScroll.current = currentOffset; diff --git a/packages/editor/src/extensions/keep-in-view/keep-in-view.ts b/packages/editor/src/extensions/keep-in-view/keep-in-view.ts index b3809d976..8d862ae8a 100644 --- a/packages/editor/src/extensions/keep-in-view/keep-in-view.ts +++ b/packages/editor/src/extensions/keep-in-view/keep-in-view.ts @@ -82,9 +82,7 @@ export function keepLastLineInView( ) return; - const isPopupVisible = document.getElementsByClassName( - "editor-mobile-toolbar-popup" - ); + const isPopupVisible = document.querySelector(".editor-mobile-toolbar-popup"); const node = editor.state.selection.$from; if (node.pos > editor.state.doc.nodeSize) return;