From 9f8894c1e0572423509e9cceeffc4d4bc70bc308 Mon Sep 17 00:00:00 2001
From: srsng <113006793+srsng@users.noreply.github.com>
Date: Sat, 7 Mar 2026 12:21:58 +0800
Subject: [PATCH] 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>
---
 .../public/locales/ar/translation.json        |  3 ++-
 .../public/locales/bn/translation.json        |  3 ++-
 .../public/locales/bo/translation.json        |  3 ++-
 .../public/locales/de/translation.json        |  3 ++-
 .../public/locales/el/translation.json        |  3 ++-
 .../public/locales/es/translation.json        |  3 ++-
 .../public/locales/fa/translation.json        |  3 ++-
 .../public/locales/fr/translation.json        |  3 ++-
 .../public/locales/he/translation.json        |  3 ++-
 .../public/locales/hi/translation.json        |  3 ++-
 .../public/locales/id/translation.json        |  3 ++-
 .../public/locales/it/translation.json        |  3 ++-
 .../public/locales/ja/translation.json        |  3 ++-
 .../public/locales/ko/translation.json        |  3 ++-
 .../public/locales/ms/translation.json        |  3 ++-
 .../public/locales/nl/translation.json        |  3 ++-
 .../public/locales/pl/translation.json        |  3 ++-
 .../public/locales/pt/translation.json        |  3 ++-
 .../public/locales/ru/translation.json        |  3 ++-
 .../public/locales/si/translation.json        |  3 ++-
 .../public/locales/sl/translation.json        |  3 ++-
 .../public/locales/sv/translation.json        |  3 ++-
 .../public/locales/ta/translation.json        |  3 ++-
 .../public/locales/th/translation.json        |  3 ++-
 .../public/locales/tr/translation.json        |  3 ++-
 .../public/locales/uk/translation.json        |  3 ++-
 .../public/locales/vi/translation.json        |  3 ++-
 .../public/locales/zh-CN/translation.json     |  1 +
 .../public/locales/zh-TW/translation.json     |  3 ++-
 .../app/reader/components/FoliateViewer.tsx   |  4 ++++
 .../src/components/settings/ControlPanel.tsx  | 17 +++++++++++++++
 apps/readest-app/src/services/constants.ts    |  1 +
 apps/readest-app/src/types/book.ts            |  1 +
 apps/readest-app/src/utils/style.ts           | 21 +++++++++++++++++++
 34 files changed, 101 insertions(+), 28 deletions(-)

diff --git a/apps/readest-app/public/locales/ar/translation.json b/apps/readest-app/public/locales/ar/translation.json
index 1146b1da..5b3d524c 100644
--- a/apps/readest-app/public/locales/ar/translation.json
+++ b/apps/readest-app/public/locales/ar/translation.json
@@ -1112,5 +1112,6 @@
   "Page: {{number}}": "صفحة: {{number}}",
   "Annotation page number": "رقم صفحة التعליق",
   "Translating...": "جارٍ الترجمة...",
-  "Show Battery Percentage": "عرض نسبة البطارية"
+  "Show Battery Percentage": "عرض نسبة البطارية",
+  "Hide Scrollbar": "إخفاء شريط التمرير"
 }
diff --git a/apps/readest-app/public/locales/bn/translation.json b/apps/readest-app/public/locales/bn/translation.json
index fbf86dc1..fa831628 100644
--- a/apps/readest-app/public/locales/bn/translation.json
+++ b/apps/readest-app/public/locales/bn/translation.json
@@ -1064,5 +1064,6 @@
   "Page: {{number}}": "পৃষ্ঠা: {{number}}",
   "Annotation page number": "টীকা পৃষ্ঠা নম্বর",
   "Translating...": "অনুবাদ করা হচ্ছে...",
-  "Show Battery Percentage": "ব্যাটারি শতাংশ দেখান"
+  "Show Battery Percentage": "ব্যাটারি শতাংশ দেখান",
+  "Hide Scrollbar": "স্ক্রলবার লুকান"
 }
diff --git a/apps/readest-app/public/locales/bo/translation.json b/apps/readest-app/public/locales/bo/translation.json
index 0f9b05b8..040b07cf 100644
--- a/apps/readest-app/public/locales/bo/translation.json
+++ b/apps/readest-app/public/locales/bo/translation.json
@@ -1052,5 +1052,6 @@
   "Page: {{number}}": "ཤོག་ལྷེ།: {{number}}",
   "Annotation page number": "མཆན་འགྲེལ་ཤོག་ཨང་།",
   "Translating...": "ཡིག་བསྒྱུར་བྱེད་བཞིན་པ།...",
-  "Show Battery Percentage": "གློག་རྫས་བརྒྱ་ཆ་སྟོན།"
+  "Show Battery Percentage": "གློག་རྫས་བརྒྱ་ཆ་སྟོན།",
+  "Hide Scrollbar": "འགྲིལ་ཤིང་སྦེད་པ།"
 }
diff --git a/apps/readest-app/public/locales/de/translation.json b/apps/readest-app/public/locales/de/translation.json
index 4010cf9a..4a7ab063 100644
--- a/apps/readest-app/public/locales/de/translation.json
+++ b/apps/readest-app/public/locales/de/translation.json
@@ -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"
 }
diff --git a/apps/readest-app/public/locales/el/translation.json b/apps/readest-app/public/locales/el/translation.json
index 7b751283..a9abeb34 100644
--- a/apps/readest-app/public/locales/el/translation.json
+++ b/apps/readest-app/public/locales/el/translation.json
@@ -1064,5 +1064,6 @@
   "Page: {{number}}": "Σελίδα: {{number}}",
   "Annotation page number": "Αριθμός σελίδας σχολίου",
   "Translating...": "Μετάφραση...",
-  "Show Battery Percentage": "Εμφάνιση ποσοστού μπαταρίας"
+  "Show Battery Percentage": "Εμφάνιση ποσοστού μπαταρίας",
+  "Hide Scrollbar": "Απόκρυψη γραμμής κύλισης"
 }
diff --git a/apps/readest-app/public/locales/es/translation.json b/apps/readest-app/public/locales/es/translation.json
index 6f49d5b7..559789f4 100644
--- a/apps/readest-app/public/locales/es/translation.json
+++ b/apps/readest-app/public/locales/es/translation.json
@@ -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"
 }
diff --git a/apps/readest-app/public/locales/fa/translation.json b/apps/readest-app/public/locales/fa/translation.json
index a6a1a2f9..d1cb7ae7 100644
--- a/apps/readest-app/public/locales/fa/translation.json
+++ b/apps/readest-app/public/locales/fa/translation.json
@@ -1064,5 +1064,6 @@
   "Page: {{number}}": "صفحه: {{number}}",
   "Annotation page number": "شماره صفحه یادداشت",
   "Translating...": "در حال ترجمه...",
-  "Show Battery Percentage": "نمایش درصد باتری"
+  "Show Battery Percentage": "نمایش درصد باتری",
+  "Hide Scrollbar": "مخفی کردن نوار پیمایش"
 }
diff --git a/apps/readest-app/public/locales/fr/translation.json b/apps/readest-app/public/locales/fr/translation.json
index 03e49f69..9c67606c 100644
--- a/apps/readest-app/public/locales/fr/translation.json
+++ b/apps/readest-app/public/locales/fr/translation.json
@@ -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"
 }
diff --git a/apps/readest-app/public/locales/he/translation.json b/apps/readest-app/public/locales/he/translation.json
index fe051515..3a0cdf85 100644
--- a/apps/readest-app/public/locales/he/translation.json
+++ b/apps/readest-app/public/locales/he/translation.json
@@ -1076,5 +1076,6 @@
   "Page: {{number}}": "עמוד: {{number}}",
   "Annotation page number": "מספר עמוד הערה",
   "Translating...": "מתרגם...",
-  "Show Battery Percentage": "הצג אחוזי סוללה"
+  "Show Battery Percentage": "הצג אחוזי סוללה",
+  "Hide Scrollbar": "הסתר סרגל גלילה"
 }
diff --git a/apps/readest-app/public/locales/hi/translation.json b/apps/readest-app/public/locales/hi/translation.json
index c91ebc76..b40f05d3 100644
--- a/apps/readest-app/public/locales/hi/translation.json
+++ b/apps/readest-app/public/locales/hi/translation.json
@@ -1064,5 +1064,6 @@
   "Page: {{number}}": "पृष्ठ: {{number}}",
   "Annotation page number": "व्याख्या पृष्ठ संख्या",
   "Translating...": "अनुवाद हो रहा है...",
-  "Show Battery Percentage": "बैटरी प्रतिशत दिखाएं"
+  "Show Battery Percentage": "बैटरी प्रतिशत दिखाएं",
+  "Hide Scrollbar": "स्क्रॉलबार छुपाएँ"
 }
diff --git a/apps/readest-app/public/locales/id/translation.json b/apps/readest-app/public/locales/id/translation.json
index 6939a8e4..91478b16 100644
--- a/apps/readest-app/public/locales/id/translation.json
+++ b/apps/readest-app/public/locales/id/translation.json
@@ -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"
 }
diff --git a/apps/readest-app/public/locales/it/translation.json b/apps/readest-app/public/locales/it/translation.json
index 4d50eabe..3db2d137 100644
--- a/apps/readest-app/public/locales/it/translation.json
+++ b/apps/readest-app/public/locales/it/translation.json
@@ -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"
 }
diff --git a/apps/readest-app/public/locales/ja/translation.json b/apps/readest-app/public/locales/ja/translation.json
index babf18cf..c3af9b67 100644
--- a/apps/readest-app/public/locales/ja/translation.json
+++ b/apps/readest-app/public/locales/ja/translation.json
@@ -1052,5 +1052,6 @@
   "Page: {{number}}": "ページ: {{number}}",
   "Annotation page number": "注釈のページ番号",
   "Translating...": "翻訳中...",
-  "Show Battery Percentage": "バッテリー残量を表示"
+  "Show Battery Percentage": "バッテリー残量を表示",
+  "Hide Scrollbar": "スクロールバーを非表示"
 }
diff --git a/apps/readest-app/public/locales/ko/translation.json b/apps/readest-app/public/locales/ko/translation.json
index 65af9e8a..6e186420 100644
--- a/apps/readest-app/public/locales/ko/translation.json
+++ b/apps/readest-app/public/locales/ko/translation.json
@@ -1052,5 +1052,6 @@
   "Page: {{number}}": "페이지: {{number}}",
   "Annotation page number": "주석 페이지 번호",
   "Translating...": "번역 중...",
-  "Show Battery Percentage": "배터리 백분율 표시"
+  "Show Battery Percentage": "배터리 백분율 표시",
+  "Hide Scrollbar": "스크롤바 숨기기"
 }
diff --git a/apps/readest-app/public/locales/ms/translation.json b/apps/readest-app/public/locales/ms/translation.json
index 056d7231..7f924ab0 100644
--- a/apps/readest-app/public/locales/ms/translation.json
+++ b/apps/readest-app/public/locales/ms/translation.json
@@ -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"
 }
diff --git a/apps/readest-app/public/locales/nl/translation.json b/apps/readest-app/public/locales/nl/translation.json
index 81127224..09f10097 100644
--- a/apps/readest-app/public/locales/nl/translation.json
+++ b/apps/readest-app/public/locales/nl/translation.json
@@ -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"
 }
diff --git a/apps/readest-app/public/locales/pl/translation.json b/apps/readest-app/public/locales/pl/translation.json
index dfb73414..4d16cd19 100644
--- a/apps/readest-app/public/locales/pl/translation.json
+++ b/apps/readest-app/public/locales/pl/translation.json
@@ -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"
 }
diff --git a/apps/readest-app/public/locales/pt/translation.json b/apps/readest-app/public/locales/pt/translation.json
index 411b0a14..49d28557 100644
--- a/apps/readest-app/public/locales/pt/translation.json
+++ b/apps/readest-app/public/locales/pt/translation.json
@@ -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"
 }
diff --git a/apps/readest-app/public/locales/ru/translation.json b/apps/readest-app/public/locales/ru/translation.json
index 236eea5f..fe01628a 100644
--- a/apps/readest-app/public/locales/ru/translation.json
+++ b/apps/readest-app/public/locales/ru/translation.json
@@ -1088,5 +1088,6 @@
   "Page: {{number}}": "Страница: {{number}}",
   "Annotation page number": "Номер страницы аннотации",
   "Translating...": "Перевод...",
-  "Show Battery Percentage": "Показывать процент заряда батареи"
+  "Show Battery Percentage": "Показывать процент заряда батареи",
+  "Hide Scrollbar": "Скрыть полосу прокрутки"
 }
diff --git a/apps/readest-app/public/locales/si/translation.json b/apps/readest-app/public/locales/si/translation.json
index 129461c9..b40f03e6 100644
--- a/apps/readest-app/public/locales/si/translation.json
+++ b/apps/readest-app/public/locales/si/translation.json
@@ -1064,5 +1064,6 @@
   "Page: {{number}}": "පිටුව: {{number}}",
   "Annotation page number": "විවරණ පිටු අංකය",
   "Translating...": "පරිවර්තනය වෙමින් පවතී...",
-  "Show Battery Percentage": "බැටරි ප්‍රතිශතය පෙන්වන්න"
+  "Show Battery Percentage": "බැටරි ප්‍රතිශතය පෙන්වන්න",
+  "Hide Scrollbar": "අනුචලන තීරුව සඟවන්න"
 }
diff --git a/apps/readest-app/public/locales/sl/translation.json b/apps/readest-app/public/locales/sl/translation.json
index 15f78e95..66f7c782 100644
--- a/apps/readest-app/public/locales/sl/translation.json
+++ b/apps/readest-app/public/locales/sl/translation.json
@@ -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"
 }
diff --git a/apps/readest-app/public/locales/sv/translation.json b/apps/readest-app/public/locales/sv/translation.json
index d677d98b..2633bfb0 100644
--- a/apps/readest-app/public/locales/sv/translation.json
+++ b/apps/readest-app/public/locales/sv/translation.json
@@ -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"
 }
diff --git a/apps/readest-app/public/locales/ta/translation.json b/apps/readest-app/public/locales/ta/translation.json
index 83a755a7..1e390374 100644
--- a/apps/readest-app/public/locales/ta/translation.json
+++ b/apps/readest-app/public/locales/ta/translation.json
@@ -1064,5 +1064,6 @@
   "Page: {{number}}": "பக்கம்: {{number}}",
   "Annotation page number": "சிறுகுறிப்புப் பக்க எண்",
   "Translating...": "மொழிபெயர்க்கிறது...",
-  "Show Battery Percentage": "பேட்டரி சதவீதத்தைக் காண்பி"
+  "Show Battery Percentage": "பேட்டரி சதவீதத்தைக் காண்பி",
+  "Hide Scrollbar": "உருள்பட்டையை மறை"
 }
diff --git a/apps/readest-app/public/locales/th/translation.json b/apps/readest-app/public/locales/th/translation.json
index 65e90d27..1fe9e2c2 100644
--- a/apps/readest-app/public/locales/th/translation.json
+++ b/apps/readest-app/public/locales/th/translation.json
@@ -1052,5 +1052,6 @@
   "Page: {{number}}": "หน้า: {{number}}",
   "Annotation page number": "หมายเลขหน้าคำอธิบายประกอบ",
   "Translating...": "กำลังแปล...",
-  "Show Battery Percentage": "แสดงเปอร์เซ็นต์แบตเตอรี่"
+  "Show Battery Percentage": "แสดงเปอร์เซ็นต์แบตเตอรี่",
+  "Hide Scrollbar": "ซ่อนแถบเลื่อน"
 }
diff --git a/apps/readest-app/public/locales/tr/translation.json b/apps/readest-app/public/locales/tr/translation.json
index 671ea783..10506287 100644
--- a/apps/readest-app/public/locales/tr/translation.json
+++ b/apps/readest-app/public/locales/tr/translation.json
@@ -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"
 }
diff --git a/apps/readest-app/public/locales/uk/translation.json b/apps/readest-app/public/locales/uk/translation.json
index d76b5c35..b01f376c 100644
--- a/apps/readest-app/public/locales/uk/translation.json
+++ b/apps/readest-app/public/locales/uk/translation.json
@@ -1088,5 +1088,6 @@
   "Page: {{number}}": "Сторінка: {{number}}",
   "Annotation page number": "Номер сторінки анотації",
   "Translating...": "Переклад...",
-  "Show Battery Percentage": "Показувати відсоток заряду батареї"
+  "Show Battery Percentage": "Показувати відсоток заряду батареї",
+  "Hide Scrollbar": "Сховати смугу прокрутки"
 }
diff --git a/apps/readest-app/public/locales/vi/translation.json b/apps/readest-app/public/locales/vi/translation.json
index 690652b9..c91d8040 100644
--- a/apps/readest-app/public/locales/vi/translation.json
+++ b/apps/readest-app/public/locales/vi/translation.json
@@ -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"
 }
diff --git a/apps/readest-app/public/locales/zh-CN/translation.json b/apps/readest-app/public/locales/zh-CN/translation.json
index 6f05b27f..8e1728d2 100644
--- a/apps/readest-app/public/locales/zh-CN/translation.json
+++ b/apps/readest-app/public/locales/zh-CN/translation.json
@@ -76,6 +76,7 @@
   "Sans-Serif Font": "无衬线字体",
   "Save": "保存",
   "Scrolled Mode": "滚动模式",
+  "Hide Scrollbar": "隐藏滚动条",
   "Search": "搜索",
   "Search Books...": "搜索书籍...",
   "Search...": "搜索...",
diff --git a/apps/readest-app/public/locales/zh-TW/translation.json b/apps/readest-app/public/locales/zh-TW/translation.json
index a68e7322..28dd4bce 100644
--- a/apps/readest-app/public/locales/zh-TW/translation.json
+++ b/apps/readest-app/public/locales/zh-TW/translation.json
@@ -1052,5 +1052,6 @@
   "Page: {{number}}": "頁面: {{number}}",
   "Annotation page number": "註解頁碼",
   "Translating...": "翻譯中...",
-  "Show Battery Percentage": "顯示電池百分比"
+  "Show Battery Percentage": "顯示電池百分比",
+  "Hide Scrollbar": "隱藏滾動條"
 }
diff --git a/apps/readest-app/src/app/reader/components/FoliateViewer.tsx b/apps/readest-app/src/app/reader/components/FoliateViewer.tsx
index f8d65be0..6c80b15b 100644
--- a/apps/readest-app/src/app/reader/components/FoliateViewer.tsx
+++ b/apps/readest-app/src/app/reader/components/FoliateViewer.tsx
@@ -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(() => {
diff --git a/apps/readest-app/src/components/settings/ControlPanel.tsx b/apps/readest-app/src/components/settings/ControlPanel.tsx
index 7bb71594..74aff5f2 100644
--- a/apps/readest-app/src/components/settings/ControlPanel.tsx
+++ b/apps/readest-app/src/components/settings/ControlPanel.tsx
@@ -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>
diff --git a/apps/readest-app/src/services/constants.ts b/apps/readest-app/src/services/constants.ts
index 191f5894..24301591 100644
--- a/apps/readest-app/src/services/constants.ts
+++ b/apps/readest-app/src/services/constants.ts
@@ -193,6 +193,7 @@ export const DEFAULT_BOOK_LAYOUT: BookLayout = {
   rtl: false,
   scrollingOverlap: 0,
   allowScript: false,
+  hideScrollbar: false,
 };
 
 export const DEFAULT_BOOK_LANGUAGE: BookLanguage = {
diff --git a/apps/readest-app/src/types/book.ts b/apps/readest-app/src/types/book.ts
index 5e071753..9d6f581e 100644
--- a/apps/readest-app/src/types/book.ts
+++ b/apps/readest-app/src/types/book.ts
@@ -132,6 +132,7 @@ export interface BookLayout {
   rtl: boolean;
   scrollingOverlap: number;
   allowScript: boolean;
+  hideScrollbar: boolean;
 }
 
 export interface BookStyle {
diff --git a/apps/readest-app/src/utils/style.ts b/apps/readest-app/src/utils/style.ts
index 54ec9558..6c8e578f 100644
--- a/apps/readest-app/src/utils/style.ts
+++ b/apps/readest-app/src/utils/style.ts
@@ -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');