From f696b9a573005bed5690794a578b0c7d05b199d2 Mon Sep 17 00:00:00 2001
From: Huang Xin <chrox.huang@gmail.com>
Date: Fri, 10 Oct 2025 13:56:41 +0800
Subject: [PATCH] fix: handle scrolling/panning in zoomed in PDFs, closes #2184
 (#2194)

---
 .../reader/components/notebook/Notebook.tsx   |  3 +-
 .../app/reader/components/sidebar/SideBar.tsx | 29 +++++++++----------
 .../src/app/reader/hooks/usePagination.ts     | 10 +++++--
 3 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/apps/readest-app/src/app/reader/components/notebook/Notebook.tsx b/apps/readest-app/src/app/reader/components/notebook/Notebook.tsx
index 1236714a..8fda174d 100644
--- a/apps/readest-app/src/app/reader/components/notebook/Notebook.tsx
+++ b/apps/readest-app/src/app/reader/components/notebook/Notebook.tsx
@@ -231,8 +231,7 @@ const Notebook: React.FC = ({}) => {
         `}</style>
         <div
           className={clsx(
-            'drag-bar bg-base-100 absolute -left-2 top-0 h-full w-0.5 cursor-col-resize p-2',
-            isNotebookPinned ? 'bg-base-100' : 'bg-transparent',
+            'drag-bar absolute -left-2 top-0 h-full w-0.5 cursor-col-resize bg-transparent p-2',
           )}
           role='slider'
           tabIndex={0}
diff --git a/apps/readest-app/src/app/reader/components/sidebar/SideBar.tsx b/apps/readest-app/src/app/reader/components/sidebar/SideBar.tsx
index 314068a7..b23562de 100644
--- a/apps/readest-app/src/app/reader/components/sidebar/SideBar.tsx
+++ b/apps/readest-app/src/app/reader/components/sidebar/SideBar.tsx
@@ -242,6 +242,20 @@ const SideBar: React.FC<{
             }
           }
         `}</style>
+        <div
+          className={clsx(
+            'drag-bar absolute -right-2 top-0 h-full w-0.5 cursor-col-resize bg-transparent p-1',
+            isMobile && 'hidden',
+          )}
+          role='slider'
+          tabIndex={0}
+          aria-label={_('Resize Sidebar')}
+          aria-orientation='horizontal'
+          aria-valuenow={parseFloat(sideBarWidth)}
+          onMouseDown={handleHorizontalDragStart}
+          onTouchStart={handleHorizontalDragStart}
+          onKeyDown={handleDragKeyDown}
+        ></div>
         <div className='flex-shrink-0'>
           {isMobile && (
             <div
@@ -291,21 +305,6 @@ const SideBar: React.FC<{
         ) : (
           <SidebarContent bookDoc={bookDoc} sideBarBookKey={sideBarBookKey!} />
         )}
-        <div
-          className={clsx(
-            'drag-bar bg-base-100 absolute -right-2 top-0 h-full w-0.5 cursor-col-resize p-1',
-            isSideBarPinned ? 'bg-base-100' : 'bg-transparent',
-            isMobile && 'hidden',
-          )}
-          role='slider'
-          tabIndex={0}
-          aria-label={_('Resize Sidebar')}
-          aria-orientation='horizontal'
-          aria-valuenow={parseFloat(sideBarWidth)}
-          onMouseDown={handleHorizontalDragStart}
-          onTouchStart={handleHorizontalDragStart}
-          onKeyDown={handleDragKeyDown}
-        ></div>
       </div>
     </>
   ) : null;
diff --git a/apps/readest-app/src/app/reader/hooks/usePagination.ts b/apps/readest-app/src/app/reader/hooks/usePagination.ts
index df6424f1..01d1015a 100644
--- a/apps/readest-app/src/app/reader/hooks/usePagination.ts
+++ b/apps/readest-app/src/app/reader/hooks/usePagination.ts
@@ -115,7 +115,11 @@ export const usePagination = (
               }
             }
           }
-        } else if (msg.data.type === 'iframe-wheel' && !viewSettings.scrolled) {
+        } else if (
+          msg.data.type === 'iframe-wheel' &&
+          !viewSettings.scrolled &&
+          (!bookData.isFixedLayout || viewSettings.zoomLevel <= 100)
+        ) {
           // The wheel event is handled by the iframe itself in scrolled mode.
           const { deltaY } = msg.data;
           if (deltaY > 0) {
@@ -143,8 +147,8 @@ export const usePagination = (
         }
       } else if (
         msg.type === 'touch-swipe' &&
-        bookData.bookDoc?.rendition?.layout === 'pre-paginated' &&
-        viewSettings?.zoomLevel === 100
+        bookData.isFixedLayout &&
+        viewSettings!.zoomLevel <= 100
       ) {
         const { deltaX, deltaY } = msg.detail;
         if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > 30) {