diff --git a/src/layouts/PrimaryPageLayout/index.tsx b/src/layouts/PrimaryPageLayout/index.tsx
index 15d19ff..a8dd6ee 100644
--- a/src/layouts/PrimaryPageLayout/index.tsx
+++ b/src/layouts/PrimaryPageLayout/index.tsx
@@ -60,7 +60,7 @@ const PrimaryPageLayout = forwardRef(
 
     if (isSmallScreen) {
       return (
-        <DeepBrowsingProvider active={current === pageName}>
+        <DeepBrowsingProvider active={current === pageName && display}>
           <div
             ref={smallScreenScrollAreaRef}
             style={{
@@ -77,7 +77,7 @@ const PrimaryPageLayout = forwardRef(
     }
 
     return (
-      <DeepBrowsingProvider active={current === pageName} scrollAreaRef={scrollAreaRef}>
+      <DeepBrowsingProvider active={current === pageName && display} scrollAreaRef={scrollAreaRef}>
         <ScrollArea
           className="h-screen overflow-auto"
           scrollBarClassName="z-50 pt-12"
diff --git a/src/providers/DeepBrowsingProvider.tsx b/src/providers/DeepBrowsingProvider.tsx
index 2096b11..440d3ce 100644
--- a/src/providers/DeepBrowsingProvider.tsx
+++ b/src/providers/DeepBrowsingProvider.tsx
@@ -31,7 +31,6 @@ export function DeepBrowsingProvider({
   const [lastScrollTop, setLastScrollTop] = useState(lastScrollTopRef.current)
 
   useEffect(() => {
-    setDeepBrowsing(false)
     if (!active) return
 
     const handleScroll = () => {
@@ -51,16 +50,11 @@ export function DeepBrowsingProvider({
       }
     }
 
-    if (!scrollAreaRef) {
-      window.addEventListener('scroll', handleScroll)
-      return () => {
-        window.removeEventListener('scroll', handleScroll)
-      }
-    }
+    const target = scrollAreaRef ? scrollAreaRef.current : window
 
-    scrollAreaRef.current?.addEventListener('scroll', handleScroll)
+    target?.addEventListener('scroll', handleScroll)
     return () => {
-      scrollAreaRef.current?.removeEventListener('scroll', handleScroll)
+      target?.removeEventListener('scroll', handleScroll)
     }
   }, [active])