Fix : auto scrolling on refreshing data

web/components/visualization/results-zone.js

@@ -92,8 +92,8 @@ class ResultZoneComponent {
         </div>
       </div>
     `;
+    this.scroller = Scroller.scrollInit("news-flow", document.getElementById("auto-scroll"));
     this.handleDom();
-    this.scroller = Scroller.scrollInit("news-flow");
   }
 
   resultFlowTemplate(zone) {
@@ -278,13 +278,6 @@ class ResultZoneComponent {
       await this.displayFlowSections();
       this.displaySectionsResults();
     }
-
-    if (document.getElementById("auto-scroll").checked) {
-      this.scroller.scrollDiv();
-    }
-    document.getElementById("auto-scroll").addEventListener("change", () => {
-      this.scroller.switch();
-    });
   }
 
   async displayFlowAreas() {

web/services/common/scroller.js

-export function scrollInit(divName) {
-  let scroller = new Scroller(divName);
+export function scrollInit(divName, autoScrollCheckbox) {
+  let scroller = new Scroller(divName, autoScrollCheckbox);
   return scroller;
 }
 
 class Scroller {
-  constructor(divName) {
+  constructor(divName, autoScrollCheckbox) {
     this.elmnt = document.getElementById(divName);
+    this.autoScrollCheckbox = autoScrollCheckbox;
     this.reachedMaxScroll = false;
 
     this.elmnt.scrollTop = 0;
     this.previousScrollTop = 0;
 
     this.elmnt.addEventListener("mouseover", () => {
-      if (this.autoScroll) this.pauseScroll();
+      if (autoScrollCheckbox.checked) this.pauseScroll();
     });
     this.elmnt.addEventListener("mouseout", () => {
-      if (this.autoScroll) this.resumeScroll();
+      if (autoScrollCheckbox.checked) this.resumeScroll();
+    });
+
+    this.autoScrollCheckbox.addEventListener("change", () => {
+      if (autoScrollCheckbox.checked) this.resumeScroll();
+      else this.pauseScroll();
     });
   }
 
   scrollDiv() {
-    this.autoScroll = true;
-    if (!this.reachedMaxScroll) {
-      this.elmnt.scrollBy({ top: 5, left: 0, behavior: "smooth" });
-      this.reachedMaxScroll =
-        this.elmnt.scrollTop >=
-        this.elmnt.scrollHeight - this.elmnt.offsetHeight;
-      this.scrollTimeout = setTimeout(() => {
-        this.scrollDiv();
-      }, 100);
-    } else {
-      this.reachedMaxScroll = this.elmnt.scrollTop == 0 ? false : true;
-      this.elmnt.scrollBy({ top: -5, left: 0, behavior: "smooth" });
-
+    if (this.autoScrollCheckbox.checked) {
+      if (!this.reachedMaxScroll) {
+        this.elmnt.scrollBy({ top: 5, left: 0, behavior: "smooth" });
+        this.reachedMaxScroll =
+          this.elmnt.scrollTop >=
+          this.elmnt.scrollHeight - this.elmnt.offsetHeight;
+      } else {
+        this.reachedMaxScroll = this.elmnt.scrollTop == 0 ? false : true;
+        this.elmnt.scrollBy({ top: -5, left: 0, behavior: "smooth" });
+      }
       this.scrollTimeout = setTimeout(() => {
         this.scrollDiv();
       }, 100);
@@ -46,14 +49,4 @@ class Scroller {
   resumeScroll() {
     this.scrollDiv();
   }
-
-  switch() {
-    if (this.autoScroll) {
-      this.pauseScroll();
-      this.autoScroll = false;
-    } else {
-      this.resumeScroll();
-      this.autoScroll = true;
-    }
-  }
 }