fix: make continuous scroll an option and disabled by default, closes #516, #373 (#522)

apps/readest-app/src/app/reader/components/FoliateViewer.tsx

@@ -91,7 +91,8 @@ const FoliateViewer: React.FC<{
 
     if (detail.reason === 'scroll') {
       const renderer = viewRef.current?.renderer;
-      if (renderer) {
+      const viewSettings = getViewSettings(bookKey)!;
+      if (renderer && viewSettings.continuousScroll) {
         if (renderer.start <= 0) {
           viewRef.current?.prev(1);
           // sometimes viewSize has subpixel value that the end never reaches

apps/readest-app/src/app/reader/components/settings/MiscPanel.tsx

@@ -17,6 +17,7 @@ const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
 
   const [animated, setAnimated] = useState(viewSettings.animated!);
   const [isDisableClick, setIsDisableClick] = useState(viewSettings.disableClick!);
+  const [isContinuousScroll, setIsContinuousScroll] = useState(viewSettings.continuousScroll!);
   const [draftStylesheet, setDraftStylesheet] = useState(viewSettings.userStylesheet!);
   const [draftStylesheetSaved, setDraftStylesheetSaved] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -92,6 +93,16 @@ const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isDisableClick]);
 
+  useEffect(() => {
+    viewSettings.continuousScroll = isContinuousScroll;
+    setViewSettings(bookKey, viewSettings);
+    if (isFontLayoutSettingsGlobal) {
+      settings.globalViewSettings.continuousScroll = isContinuousScroll;
+      setSettings(settings);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isContinuousScroll]);
+
   return (
     <div className='my-4 w-full space-y-6'>
       <div className='w-full'>
@@ -115,7 +126,16 @@ const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
         <h2 className='mb-2 font-medium'>{_('Behavior')}</h2>
         <div className='card border-base-200 bg-base-100 border shadow'>
           <div className='divide-y'>
-            <div className='config-item config-item-top config-item-bottom'>
+            <div className='config-item config-item-top'>
+              <span className=''>{_('Continuous Scroll')}</span>
+              <input
+                type='checkbox'
+                className='toggle'
+                checked={isContinuousScroll}
+                onChange={() => setIsContinuousScroll(!isContinuousScroll)}
+              />
+            </div>
+            <div className='config-item config-item-bottom'>
               <span className=''>{_('Disable Click-to-Flip')}</span>
               <input
                 type='checkbox'