feat: continuous scroll

Author: dfface

epub_browser/assets/annotation.css

@@ -498,7 +498,8 @@
 
 .color-info-tip,
 .color-tip-default,
-.color-tip-reorder {
+.color-tip-reorder,
+.continuous-scroll-tip {
     cursor: help;
     color: var(--text-secondary);
     font-size: 0.8rem;
@@ -511,7 +512,8 @@
 
 .color-info-tip:hover,
 .color-tip-default:hover,
-.color-tip-reorder:hover {
+.color-tip-reorder:hover,
+.continuous-scroll-tip:hover {
     opacity: 1;
 }
 
@@ -551,6 +553,38 @@
     content: 'Drag to reorder.';
 }
 
+.continuous-scroll-tip:hover::after {
+    content: attr(data-tip);
+    position: absolute;
+    bottom: calc(100% + 8px);
+    left: 50%;
+    transform: translateX(-50%);
+    background: var(--text);
+    color: var(--background);
+    padding: 8px 12px;
+    border-radius: 6px;
+    font-size: 0.75rem;
+    white-space: normal;
+    word-break: break-word;
+    width: max-content;
+    max-width: min(320px, calc(100vw - 40px));
+    line-height: 1.5;
+    text-align: left;
+    z-index: 100;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+}
+
+.continuous-scroll-tip:hover::before {
+    content: '';
+    position: absolute;
+    bottom: calc(100% + 2px);
+    left: 50%;
+    transform: translateX(-50%);
+    border: 5px solid transparent;
+    border-top-color: var(--text);
+    z-index: 100;
+}
+
 .color-add-btn {
     width: 24px;
     height: 24px;

epub_browser/assets/chapter.js

@@ -1893,20 +1893,20 @@ function initScript() {
 
     // 绑定 continuous scroll toggle 开关
     var continuousScrollToggle = document.getElementById('continuousScrollToggle');
-    var continuousScrollHint = document.getElementById('continuousScrollHint');
+    var continuousScrollTip = document.getElementById('continuousScrollTip');
     if (continuousScrollToggle) {
         // 翻页模式下禁用该开关
         if (isPaginationMode) {
             continuousScrollToggle.disabled = true;
             continuousScrollToggle.checked = false;
-            if (continuousScrollHint) {
-                continuousScrollHint.textContent = 'Continuous scroll is only available in Scrolling mode. Switch to Scrolling mode first to enable this feature.';
+            if (continuousScrollTip) {
+                continuousScrollTip.setAttribute('data-tip', 'Continuous scroll is only available in Scrolling mode. Switch to Scrolling mode first to enable this feature.');
             }
         } else {
             continuousScrollToggle.disabled = false;
             continuousScrollToggle.checked = isContinuousScroll;
-            if (continuousScrollHint) {
-                continuousScrollHint.textContent = 'When enabled, scrolling past the end of a chapter automatically loads the next chapter. Scroll progress save/restore is disabled (chapter position tracked via URL). Tip: in scrolling mode, double-tap Space for similar seamless reading.';
+            if (continuousScrollTip) {
+                continuousScrollTip.setAttribute('data-tip', 'Automatically loads the next chapter when scrolling past the end. Note: scroll progress save/restore is disabled. Tip: press Space for a similar seamless reading experience when this is off.');
             }
         }
 

epub_browser/processor.py

@@ -1414,8 +1414,10 @@ def create_chapter_template(self, content, style_links, chapter_index, chapter_t
                         <input type="checkbox" id="continuousScrollToggle">
                         <span class="switch-slider"></span>
                         <span class="switch-text">Enable Continuous Scroll</span>
+                        <span class="continuous-scroll-tip" id="continuousScrollTip" data-tip="">
+                            <i class="fas fa-info-circle"></i>
+                        </span>
                     </label>
-                    <small class="setting-hint" id="continuousScrollHint">Only available in Scrolling mode. When enabled, scrolling past the end of a chapter will automatically load the next chapter, creating a seamless reading experience across chapter boundaries.</small>
                 </div>
             </div>
         </div>