feat: scrolls to top of page when highlighted word is brought into view

ReadAlongs · Mar 28, 2024 · cdd079a · cdd079a
1 parent 493a624
commit cdd079a
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git a/packages/web-component/src/components/read-along-component/read-along.tsx b/packages/web-component/src/components/read-along-component/read-along.tsx
@@ -1019,7 +1019,7 @@ export class ReadAlongComponent {
             // scroll vertically (through paragraph) if needed
             if (this.inPageContentOverflow(query_el)) {
               if (this.autoScroll) {
-                query_el.scrollIntoView(false);
+                query_el.scrollIntoView({ block: "start", inline: "nearest" });
                 if (!this.isScrolling) this.scrollByHeight(query_el);
               }
             } // scroll horizontal (through paragraph) if needed

diff --git a/packages/web-component/src/index.html b/packages/web-component/src/index.html
@@ -16,8 +16,8 @@
     <!-- put in your assets -->
     <read-along
       mode="EDIT"
-      href="http://localhost:5000/KSS-01A-MUS/KSS-01A-MUS.readalong"
-      audio="http://localhost:5000/KSS-01A-MUS/KSS-01A-MUS.mp3"
+      href="http://localhost:5000/ej-fra/ej-fra.readalong"
+      audio="http://localhost:5000/ej-fra/ej-fra.m4a"
       language="en"
     >
       <span contentEditable="true" slot="read-along-header">Title</span>