Make chapter section scroll to current chapter when scroll into view port when expanded (#4725)

* * Make chapter section scroll to current chapter when scroll into view port when expanded * * Use existing element instead of new dummy element
2024-04-02 12:53:43 -04:00
parent 4dea7746c5
commit bf4f6e42b4
2 changed files with 22 additions and 1 deletions
@@ -33,7 +33,27 @@ export default defineComponent({

    compact: function () {
      return !this.chapters[0].thumbnail
-    }
+    },
+
+    observeVisibilityOptions() {
+      return {
+        callback: (isVisible, _entry) => {
+          // This is also fired when **hidden**
+          // No point doing anything if not visible
+          if (!isVisible) { return }
+          // Only auto scroll when expanded
+          if (!this.showChapters) { return }
+
+          this.scrollToCurrentChapter()
+        },
+        intersection: {
+          // Only when it intersects with N% above bottom
+          rootMargin: '0% 0% 0% 0%',
+        },
+        // Callback responsible for scolling to current chapter multiple times
+        once: false,
+      }
+    },
  },
  watch: {
    currentChapterIndex: function (value) {
@@ -28,6 +28,7 @@
    <div
      v-show="showChapters"
      ref="chaptersWrapper"
+      v-observe-visibility="observeVisibilityOptions"
      class="chaptersWrapper"
      :class="{ compact }"
      @keydown.arrow-up.stop.prevent="navigateChapters('up')"