feat(setting): add an option to hide Scrollbar in scroll mode, closes #3480

* feat(setting) impl settings option: hide Scrollbar of scroll mode * refactor(setting): disable hide scrollbar in paginated mode, add i18n translations - Add disabled prop to Hide Scrollbar toggle when not in scroll mode - Remove unnecessary `as const` assertion on string literal - Add "Hide Scrollbar" translations for all 28 locales Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Huang Xin <chrox.huang@gmail.com> Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-07 12:21:58 +08:00
parent dac4f2e8ec
commit 9f8894c1e0
34 changed files with 101 additions and 28 deletions
@@ -1112,5 +1112,6 @@
  "Page: {{number}}": "صفحة: {{number}}",
  "Annotation page number": "رقم صفحة التعליق",
  "Translating...": "جارٍ الترجمة...",
-  "Show Battery Percentage": "عرض نسبة البطارية"
+  "Show Battery Percentage": "عرض نسبة البطارية",
+  "Hide Scrollbar": "إخفاء شريط التمرير"
 }
@@ -1064,5 +1064,6 @@
  "Page: {{number}}": "পৃষ্ঠা: {{number}}",
  "Annotation page number": "টীকা পৃষ্ঠা নম্বর",
  "Translating...": "অনুবাদ করা হচ্ছে...",
-  "Show Battery Percentage": "ব্যাটারি শতাংশ দেখান"
+  "Show Battery Percentage": "ব্যাটারি শতাংশ দেখান",
+  "Hide Scrollbar": "স্ক্রলবার লুকান"
 }
@@ -1052,5 +1052,6 @@
  "Page: {{number}}": "ཤོག་ལྷེ།: {{number}}",
  "Annotation page number": "མཆན་འགྲེལ་ཤོག་ཨང་།",
  "Translating...": "ཡིག་བསྒྱུར་བྱེད་བཞིན་པ།...",
-  "Show Battery Percentage": "གློག་རྫས་བརྒྱ་ཆ་སྟོན།"
+  "Show Battery Percentage": "གློག་རྫས་བརྒྱ་ཆ་སྟོན།",
+  "Hide Scrollbar": "འགྲིལ་ཤིང་སྦེད་པ།"
 }
@@ -1064,5 +1064,6 @@
  "Page: {{number}}": "Seite: {{number}}",
  "Annotation page number": "Seitenzahl der Anmerkung",
  "Translating...": "Übersetzen...",
-  "Show Battery Percentage": "Akkustand in Prozent anzeigen"
+  "Show Battery Percentage": "Akkustand in Prozent anzeigen",
+  "Hide Scrollbar": "Scrollleiste ausblenden"
 }
@@ -1064,5 +1064,6 @@
  "Page: {{number}}": "Σελίδα: {{number}}",
  "Annotation page number": "Αριθμός σελίδας σχολίου",
  "Translating...": "Μετάφραση...",
-  "Show Battery Percentage": "Εμφάνιση ποσοστού μπαταρίας"
+  "Show Battery Percentage": "Εμφάνιση ποσοστού μπαταρίας",
+  "Hide Scrollbar": "Απόκρυψη γραμμής κύλισης"
 }
@@ -1076,5 +1076,6 @@
  "Page: {{number}}": "Página: {{number}}",
  "Annotation page number": "Número de página de la anotación",
  "Translating...": "Traduciendo...",
-  "Show Battery Percentage": "Mostrar porcentaje de batería"
+  "Show Battery Percentage": "Mostrar porcentaje de batería",
+  "Hide Scrollbar": "Ocultar barra de desplazamiento"
 }
@@ -1064,5 +1064,6 @@
  "Page: {{number}}": "صفحه: {{number}}",
  "Annotation page number": "شماره صفحه یادداشت",
  "Translating...": "در حال ترجمه...",
-  "Show Battery Percentage": "نمایش درصد باتری"
+  "Show Battery Percentage": "نمایش درصد باتری",
+  "Hide Scrollbar": "مخفی کردن نوار پیمایش"
 }
@@ -1076,5 +1076,6 @@
  "Page: {{number}}": "Page : {{number}}",
  "Annotation page number": "Numéro de page de l'annotation",
  "Translating...": "Traduction en cours...",
-  "Show Battery Percentage": "Afficher le pourcentage de batterie"
+  "Show Battery Percentage": "Afficher le pourcentage de batterie",
+  "Hide Scrollbar": "Masquer la barre de défilement"
 }
@@ -1076,5 +1076,6 @@
  "Page: {{number}}": "עמוד: {{number}}",
  "Annotation page number": "מספר עמוד הערה",
  "Translating...": "מתרגם...",
-  "Show Battery Percentage": "הצג אחוזי סוללה"
+  "Show Battery Percentage": "הצג אחוזי סוללה",
+  "Hide Scrollbar": "הסתר סרגל גלילה"
 }
@@ -1064,5 +1064,6 @@
  "Page: {{number}}": "पृष्ठ: {{number}}",
  "Annotation page number": "व्याख्या पृष्ठ संख्या",
  "Translating...": "अनुवाद हो रहा है...",
-  "Show Battery Percentage": "बैटरी प्रतिशत दिखाएं"
+  "Show Battery Percentage": "बैटरी प्रतिशत दिखाएं",
+  "Hide Scrollbar": "स्क्रॉलबार छुपाएँ"
 }
@@ -1052,5 +1052,6 @@
  "Page: {{number}}": "Halaman: {{number}}",
  "Annotation page number": "Nomor halaman anotasi",
  "Translating...": "Menerjemahkan...",
-  "Show Battery Percentage": "Tampilkan Persentase Baterai"
+  "Show Battery Percentage": "Tampilkan Persentase Baterai",
+  "Hide Scrollbar": "Sembunyikan Bilah Gulir"
 }
@@ -1076,5 +1076,6 @@
  "Page: {{number}}": "Pagina: {{number}}",
  "Annotation page number": "Numero di pagina dell'annotazione",
  "Translating...": "Traduzione...",
-  "Show Battery Percentage": "Mostra percentuale batteria"
+  "Show Battery Percentage": "Mostra percentuale batteria",
+  "Hide Scrollbar": "Nascondi barra di scorrimento"
 }
@@ -1052,5 +1052,6 @@
  "Page: {{number}}": "ページ: {{number}}",
  "Annotation page number": "注釈のページ番号",
  "Translating...": "翻訳中...",
-  "Show Battery Percentage": "バッテリー残量を表示"
+  "Show Battery Percentage": "バッテリー残量を表示",
+  "Hide Scrollbar": "スクロールバーを非表示"
 }
@@ -1052,5 +1052,6 @@
  "Page: {{number}}": "페이지: {{number}}",
  "Annotation page number": "주석 페이지 번호",
  "Translating...": "번역 중...",
-  "Show Battery Percentage": "배터리 백분율 표시"
+  "Show Battery Percentage": "배터리 백분율 표시",
+  "Hide Scrollbar": "스크롤바 숨기기"
 }
@@ -1052,5 +1052,6 @@
  "Page: {{number}}": "Halaman: {{number}}",
  "Annotation page number": "Nombor halaman anotasi",
  "Translating...": "Menterjemah...",
-  "Show Battery Percentage": "Tunjukkan Peratusan Bateri"
+  "Show Battery Percentage": "Tunjukkan Peratusan Bateri",
+  "Hide Scrollbar": "Sembunyikan Bar Tatal"
 }
@@ -1064,5 +1064,6 @@
  "Page: {{number}}": "Pagina: {{number}}",
  "Annotation page number": "Annotatiepaginanummer",
  "Translating...": "Vertalen...",
-  "Show Battery Percentage": "Batterijpercentage weergeven"
+  "Show Battery Percentage": "Batterijpercentage weergeven",
+  "Hide Scrollbar": "Schuifbalk verbergen"
 }
@@ -1088,5 +1088,6 @@
  "Page: {{number}}": "Strona: {{number}}",
  "Annotation page number": "Numer strony adnotacji",
  "Translating...": "Tłumaczenie...",
-  "Show Battery Percentage": "Pokaż procent baterii"
+  "Show Battery Percentage": "Pokaż procent baterii",
+  "Hide Scrollbar": "Ukryj pasek przewijania"
 }
@@ -1076,5 +1076,6 @@
  "Page: {{number}}": "Página: {{number}}",
  "Annotation page number": "Número de página da anotação",
  "Translating...": "Traduzindo...",
-  "Show Battery Percentage": "Mostrar porcentagem da bateria"
+  "Show Battery Percentage": "Mostrar porcentagem da bateria",
+  "Hide Scrollbar": "Ocultar barra de rolagem"
 }
@@ -1088,5 +1088,6 @@
  "Page: {{number}}": "Страница: {{number}}",
  "Annotation page number": "Номер страницы аннотации",
  "Translating...": "Перевод...",
-  "Show Battery Percentage": "Показывать процент заряда батареи"
+  "Show Battery Percentage": "Показывать процент заряда батареи",
+  "Hide Scrollbar": "Скрыть полосу прокрутки"
 }
@@ -1064,5 +1064,6 @@
  "Page: {{number}}": "පිටුව: {{number}}",
  "Annotation page number": "විවරණ පිටු අංකය",
  "Translating...": "පරිවර්තනය වෙමින් පවතී...",
-  "Show Battery Percentage": "බැටරි ප්‍රතිශතය පෙන්වන්න"
+  "Show Battery Percentage": "බැටරි ප්‍රතිශතය පෙන්වන්න",
+  "Hide Scrollbar": "අනුචලන තීරුව සඟවන්න"
 }
@@ -1088,5 +1088,6 @@
  "Show Current Time": "Prikaži trenutni čas",
  "Use 24 Hour Clock": "Uporabi 24-urni zapis časa",
  "Show Current Battery Status": "Prikaži trenutno stanje baterije",
-  "Show Battery Percentage": "Prikaži odstotek baterije"
+  "Show Battery Percentage": "Prikaži odstotek baterije",
+  "Hide Scrollbar": "Skrij drsni trak"
 }
@@ -1064,5 +1064,6 @@
  "Page: {{number}}": "Sida: {{number}}",
  "Annotation page number": "Annoteringssidnummer",
  "Translating...": "Översätter...",
-  "Show Battery Percentage": "Visa batteriprocent"
+  "Show Battery Percentage": "Visa batteriprocent",
+  "Hide Scrollbar": "Dölj rullningslist"
 }
@@ -1064,5 +1064,6 @@
  "Page: {{number}}": "பக்கம்: {{number}}",
  "Annotation page number": "சிறுகுறிப்புப் பக்க எண்",
  "Translating...": "மொழிபெயர்க்கிறது...",
-  "Show Battery Percentage": "பேட்டரி சதவீதத்தைக் காண்பி"
+  "Show Battery Percentage": "பேட்டரி சதவீதத்தைக் காண்பி",
+  "Hide Scrollbar": "உருள்பட்டையை மறை"
 }
@@ -1052,5 +1052,6 @@
  "Page: {{number}}": "หน้า: {{number}}",
  "Annotation page number": "หมายเลขหน้าคำอธิบายประกอบ",
  "Translating...": "กำลังแปล...",
-  "Show Battery Percentage": "แสดงเปอร์เซ็นต์แบตเตอรี่"
+  "Show Battery Percentage": "แสดงเปอร์เซ็นต์แบตเตอรี่",
+  "Hide Scrollbar": "ซ่อนแถบเลื่อน"
 }
@@ -1064,5 +1064,6 @@
  "Page: {{number}}": "Sayfa: {{number}}",
  "Annotation page number": "Açıklama sayfa numarası",
  "Translating...": "Çevriliyor...",
-  "Show Battery Percentage": "Pil Yüzdesini Göster"
+  "Show Battery Percentage": "Pil Yüzdesini Göster",
+  "Hide Scrollbar": "Kaydırma çubuğunu gizle"
 }
@@ -1088,5 +1088,6 @@
  "Page: {{number}}": "Сторінка: {{number}}",
  "Annotation page number": "Номер сторінки анотації",
  "Translating...": "Переклад...",
-  "Show Battery Percentage": "Показувати відсоток заряду батареї"
+  "Show Battery Percentage": "Показувати відсоток заряду батареї",
+  "Hide Scrollbar": "Сховати смугу прокрутки"
 }
@@ -1052,5 +1052,6 @@
  "Page: {{number}}": "Trang: {{number}}",
  "Annotation page number": "Số trang chú thích",
  "Translating...": "Đang dịch...",
-  "Show Battery Percentage": "Hiển thị phần trăm pin"
+  "Show Battery Percentage": "Hiển thị phần trăm pin",
+  "Hide Scrollbar": "Ẩn thanh cuộn"
 }
@@ -76,6 +76,7 @@
  "Sans-Serif Font": "无衬线字体",
  "Save": "保存",
  "Scrolled Mode": "滚动模式",
+  "Hide Scrollbar": "隐藏滚动条",
  "Search": "搜索",
  "Search Books...": "搜索书籍...",
  "Search...": "搜索...",
@@ -1052,5 +1052,6 @@
  "Page: {{number}}": "頁面: {{number}}",
  "Annotation page number": "註解頁碼",
  "Translating...": "翻譯中...",
-  "Show Battery Percentage": "顯示電池百分比"
+  "Show Battery Percentage": "顯示電池百分比",
+  "Hide Scrollbar": "隱藏滾動條"
 }
@@ -24,6 +24,7 @@ import { useKOSync } from '../hooks/useKOSync';
 import {
  applyFixedlayoutStyles,
  applyImageStyle,
+  applyScrollbarStyle,
  applyScrollModeClass,
  applyTableStyle,
  applyThemeModeClass,
@@ -222,6 +223,7 @@ const FoliateViewer: React.FC<{
      applyTableStyle(detail.doc);
      applyThemeModeClass(detail.doc, isDarkMode);
      applyScrollModeClass(detail.doc, viewSettings.scrolled || false);
+      applyScrollbarStyle(document, viewSettings.hideScrollbar || false);
      keepTextAlignment(detail.doc);
      handleA11yNavigation(viewRef.current, detail.doc, detail.index);

@@ -566,6 +568,7 @@ const FoliateViewer: React.FC<{
        }
        applyThemeModeClass(doc, isDarkMode);
        applyScrollModeClass(doc, viewSettings.scrolled || false);
+        applyScrollbarStyle(document, viewSettings.hideScrollbar || false);
      });
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -575,6 +578,7 @@ const FoliateViewer: React.FC<{
    viewSettings?.scrolled,
    viewSettings?.overrideColor,
    viewSettings?.invertImgColorInDark,
+    viewSettings?.hideScrollbar,
  ]);

  useEffect(() => {
@@ -29,6 +29,7 @@ const ControlPanel: React.FC<SettingsPanelPanelProp> = ({ bookKey, onRegisterRes
  const [isScrolledMode, setScrolledMode] = useState(viewSettings.scrolled);
  const [isContinuousScroll, setIsContinuousScroll] = useState(viewSettings.continuousScroll);
  const [scrollingOverlap, setScrollingOverlap] = useState(viewSettings.scrollingOverlap);
+  const [hideScrollbar, setHideScrollbar] = useState(viewSettings.hideScrollbar || false);
  const [volumeKeysToFlip, setVolumeKeysToFlip] = useState(viewSettings.volumeKeysToFlip);
  const [showPaginationButtons, setShowPaginationButtons] = useState(
    viewSettings.showPaginationButtons,
@@ -57,6 +58,7 @@ const ControlPanel: React.FC<SettingsPanelPanelProp> = ({ bookKey, onRegisterRes
      scrolled: setScrolledMode,
      continuousScroll: setIsContinuousScroll,
      scrollingOverlap: setScrollingOverlap,
+      hideScrollbar: setHideScrollbar,
      volumeKeysToFlip: setVolumeKeysToFlip,
      showPaginationButtons: setShowPaginationButtons,
      disableClick: setIsDisableClick,
@@ -88,6 +90,11 @@ const ControlPanel: React.FC<SettingsPanelPanelProp> = ({ bookKey, onRegisterRes
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isScrolledMode]);

+  useEffect(() => {
+    saveViewSettings(envConfig, bookKey, 'hideScrollbar', hideScrollbar, false, false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [hideScrollbar]);
+
  useEffect(() => {
    saveViewSettings(envConfig, bookKey, 'continuousScroll', isContinuousScroll, false, false);
    // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -255,6 +262,16 @@ const ControlPanel: React.FC<SettingsPanelPanelProp> = ({ bookKey, onRegisterRes
              step={10}
              data-setting-id='settings.control.overlapPixels'
            />
+            <div className='config-item' data-setting-id='settings.control.scroll.hideScrollbar'>
+              <span className=''>{_('Hide Scrollbar')}</span>
+              <input
+                type='checkbox'
+                className='toggle'
+                checked={hideScrollbar}
+                disabled={!viewSettings.scrolled}
+                onChange={() => setHideScrollbar(!hideScrollbar)}
+              />
+            </div>
          </div>
        </div>
      </div>
@@ -193,6 +193,7 @@ export const DEFAULT_BOOK_LAYOUT: BookLayout = {
  rtl: false,
  scrollingOverlap: 0,
  allowScript: false,
+  hideScrollbar: false,
 };

 export const DEFAULT_BOOK_LANGUAGE: BookLanguage = {
@@ -132,6 +132,7 @@ export interface BookLayout {
  rtl: boolean;
  scrollingOverlap: number;
  allowScript: boolean;
+  hideScrollbar: boolean;
 }

 export interface BookStyle {
@@ -808,6 +808,27 @@ export const applyScrollModeClass = (document: Document, isScrollMode: boolean)
  document.body.classList.add(isScrollMode ? 'scroll-mode' : 'paginated-mode');
 };

+/**
+  @param document should be the global `document`
+*/
+export const applyScrollbarStyle = (document: Document, hideScrollbar: boolean) => {
+  const styleId = 'scrollbar-hide-style';
+  let styleEl = document.getElementById(styleId) as HTMLStyleElement;
+
+  if (hideScrollbar) {
+    if (!styleEl) {
+      styleEl = document.createElement('style');
+      styleEl.id = styleId;
+      document.head.appendChild(styleEl);
+    }
+    styleEl.textContent = 'foliate-view::part(container) { scrollbar-width: none; }';
+  } else {
+    if (styleEl) {
+      styleEl.textContent = 'foliate-view::part(container) { scrollbar-width: thin; }';
+    }
+  }
+};
+
 export const applyImageStyle = (document: Document) => {
  document.querySelectorAll('img').forEach((img) => {
    const widthAttr = img.getAttribute('width');