feat: can set rootMargin for IntersectionObserver.

src/config/i18n.js

@@ -1784,6 +1784,11 @@ export const I18N = {
     en: `Highlight after translation`,
     zh_TW: `翻譯後高亮`,
   },
+  pagescroll_root_margin: {
+    zh: `滚动加载提前触发 (px)`,
+    en: `Early triggering of scroll loading (px)`,
+    zh_TW: `滾動載入提前觸發 (px)`,
+  }
 };
 
 export const newI18n = (lang) => (key) => I18N[key]?.[lang] || "";

src/config/setting.js

@@ -182,4 +182,5 @@ export const DEFAULT_SETTING = {
   transAllnow: false, // 是否立即全部翻译
   subtitleSetting: DEFAULT_SUBTITLE_SETTING, // 字幕设置
   logLevel: LogLevel.INFO.value, // 日志级别
+  rootMargin: 200, // 提前触发翻译
 };

src/libs/translator.js

@@ -544,11 +544,13 @@ export class Translator {
 
   // 监控翻译单元的可见性
   #createIntersectionObserver() {
+    const { transInterval, rootMargin = 200 } = this.#setting;
+
     const pending = new Set();
     const flush = debounce(() => {
       pending.forEach((node) => this.#performSyncNode(node));
       pending.clear();
-    }, this.#setting.transInterval);
+    }, transInterval);
 
     return new IntersectionObserver(
       (entries) => {
@@ -562,7 +564,7 @@ export class Translator {
           }
         });
       },
-      { threshold: 0.01 }
+      { threshold: 0.01, rootMargin: `${rootMargin}px 0px ${rootMargin}px 0px` }
     );
   }
 

src/views/Options/Setting.js

@@ -105,6 +105,7 @@ export default function Settings() {
     skipLangs = [],
     // detectRemote = true,
     transAllnow = false,
+    rootMargin = 200,
   } = setting;
   const { isHide = false, fabClickAction = 0 } = fab || {};
 
@@ -298,34 +299,6 @@ export default function Settings() {
                 <MenuItem value={2}>{i18n("secondary_context_menus")}</MenuItem>
               </TextField>
             </Grid>
-            <Grid item xs={12} sm={12} md={6} lg={3}>
-              <TextField
-                select
-                size="small"
-                fullWidth
-                name="transAllnow"
-                value={transAllnow}
-                label={i18n("trigger_mode")}
-                onChange={handleChange}
-              >
-                <MenuItem value={false}>{i18n("mk_pagescroll")}</MenuItem>
-                <MenuItem value={true}>{i18n("mk_pageopen")}</MenuItem>
-              </TextField>
-            </Grid>
-            {/* <Grid item xs={12} sm={12} md={6} lg={3}>
-              <TextField
-                select
-                size="small"
-                fullWidth
-                name="detectRemote"
-                value={detectRemote}
-                label={i18n("detect_lang_remote")}
-                onChange={handleChange}
-              >
-                <MenuItem value={true}>{i18n("enable")}</MenuItem>
-                <MenuItem value={false}>{i18n("disable")}</MenuItem>
-              </TextField>
-            </Grid> */}
             <Grid item xs={12} sm={12} md={6} lg={3}>
               <TextField
                 select
@@ -344,6 +317,47 @@ export default function Settings() {
                 ))}
               </TextField>
             </Grid>
+            <Grid item xs={12} sm={12} md={6} lg={3}>
+              <TextField
+                select
+                size="small"
+                fullWidth
+                name="transAllnow"
+                value={transAllnow}
+                label={i18n("trigger_mode")}
+                onChange={handleChange}
+              >
+                <MenuItem value={false}>{i18n("mk_pagescroll")}</MenuItem>
+                <MenuItem value={true}>{i18n("mk_pageopen")}</MenuItem>
+              </TextField>
+            </Grid>
+            <Grid item xs={12} sm={12} md={6} lg={3}>
+              <ValidationInput
+                fullWidth
+                size="small"
+                label={i18n("pagescroll_root_margin")}
+                type="number"
+                name="rootMargin"
+                value={rootMargin}
+                onChange={handleChange}
+                min={0}
+                max={1000}
+              />
+            </Grid>
+            {/* <Grid item xs={12} sm={12} md={6} lg={3}>
+              <TextField
+                select
+                size="small"
+                fullWidth
+                name="detectRemote"
+                value={detectRemote}
+                label={i18n("detect_lang_remote")}
+                onChange={handleChange}
+              >
+                <MenuItem value={true}>{i18n("enable")}</MenuItem>
+                <MenuItem value={false}>{i18n("disable")}</MenuItem>
+              </TextField>
+            </Grid> */}
             <Grid item xs={12} sm={12} md={6} lg={3}>
               <TextField
                 select