refactor: refactor lock scroll

apps/ligo-virgo/src/pages/workspace/docs/Page.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable filename-rules/match */
-import { useEffect, useRef, type UIEvent } from 'react';
+import { useEffect, useRef, type UIEvent, useState } from 'react';
 import { useParams } from 'react-router';
 import {
     MuiBox as Box,
@@ -37,8 +37,6 @@ export function Page(props: PageProps) {
     const { user } = useUserAndSpaces();
     const templatesPortalFlag = useFlag('BooleanTemplatesPortal', false);
     const dailyNotesFlag = useFlag('BooleanDailyNotes', false);
-    const editorRef = useRef<BlockEditor>();
-    const scrollContainerRef = useRef();
 
     useEffect(() => {
         if (!user?.id || !page_id) return;
@@ -61,16 +59,6 @@ export function Page(props: PageProps) {
         updateRecentPages();
     }, [user, props.workspace, page_id]);
 
-    const onScroll = (event: UIEvent) => {
-        editorRef.current.getHooks().onRootNodeScroll(event);
-        editorRef.current.scrollManager.emitScrollEvent(event);
-    };
-
-    useEffect(() => {
-        editorRef.current.scrollManager.scrollContainer =
-            scrollContainerRef.current;
-    }, []);
-
     return (
         <LigoApp>
             <LigoLeftContainer style={{ width: fixedDisplay ? '300px' : 0 }}>
@@ -115,30 +103,74 @@ export function Page(props: PageProps) {
                     </WorkspaceSidebarContent>
                 </WorkspaceSidebar>
             </LigoLeftContainer>
-            <LigoRightContainer ref={scrollContainerRef} onScroll={onScroll}>
-                {page_id ? (
-                    <AffineEditor
-                        workspace={props.workspace}
-                        rootBlockId={page_id}
-                        ref={editorRef}
-                    />
-                ) : (
-                    <Box
-                        sx={{
-                            display: 'flex',
-                            justifyContent: 'center',
-                            alignItems: 'center',
-                            width: '100%',
-                        }}
-                    >
-                        <CircularProgress />
-                    </Box>
-                )}
-            </LigoRightContainer>
+            <EditorContainer workspace={props.workspace} pageId={page_id} />
         </LigoApp>
     );
 }
 
+const EditorContainer = ({
+    pageId,
+    workspace,
+}: {
+    pageId: string;
+    workspace: string;
+}) => {
+    const [lockScroll, setLockScroll] = useState(false);
+    const scrollContainerRef = useRef();
+    const editorRef = useRef<BlockEditor>();
+    const onScroll = (event: UIEvent) => {
+        editorRef.current.getHooks().onRootNodeScroll(event);
+        editorRef.current.scrollManager.emitScrollEvent(event);
+    };
+
+    useEffect(() => {
+        editorRef.current.scrollManager.scrollContainer =
+            scrollContainerRef.current;
+
+        editorRef.current.scrollManager.scrollController = {
+            lockScroll: () => setLockScroll(true),
+            unLockScroll: () => setLockScroll(false),
+        };
+    }, []);
+
+    return (
+        <StyledEditorContainer
+            lockScroll={lockScroll}
+            ref={scrollContainerRef}
+            onScroll={onScroll}
+        >
+            {pageId ? (
+                <AffineEditor
+                    workspace={workspace}
+                    rootBlockId={pageId}
+                    ref={editorRef}
+                />
+            ) : (
+                <Box
+                    sx={{
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        width: '100%',
+                    }}
+                >
+                    <CircularProgress />
+                </Box>
+            )}
+        </StyledEditorContainer>
+    );
+};
+
+const StyledEditorContainer = styled('div')<{ lockScroll: boolean }>(
+    ({ lockScroll }) => {
+        return {
+            width: '100%',
+            overflowY: lockScroll ? 'hidden' : 'auto',
+            flex: 'auto',
+        };
+    }
+);
+
 const LigoApp = styled('div')({
     width: '100vw',
     display: 'flex',
@@ -147,12 +179,6 @@ const LigoApp = styled('div')({
     margin: '10px 0',
 });
 
-const LigoRightContainer = styled('div')({
-    width: '100%',
-    overflowY: 'auto',
-    flex: 'auto',
-});
-
 const LigoLeftContainer = styled('div')({
     flex: '0 0 auto',
     position: 'relative',

apps/ligo-virgo/src/styles.css

@@ -14,6 +14,8 @@ html {
     font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Tahoma,
         PingFang SC, Microsoft Yahei, Arial, Hiragino Sans GB, sans-serif,
         Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+    /* prevent page shaking when scroll show or hide*/
+    padding-left: calc(100vw - 100%);
 }
 
 *,