Fixed #8513 - Sticky progress bar doesn't hide (at least safari/chrom…

…e mac os)
surveyjs · Jul 12, 2024 · 8ee612b · 8ee612b
1 parent b25059b
commit 8ee612b
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 2 deletions.
diff --git a/src/survey.ts b/src/survey.ts
@@ -7729,10 +7729,20 @@ export class SurveyModel extends SurveyElementCore
   disposeCallback: () => void;
 
   private onScrollCallback: () => void;
+  // private _lastScrollTop = 0;
+  public _isElementShouldBeSticky(selector: string): boolean {
+    if (!selector) return false;
+    const topStickyContainer = this.rootElement.querySelector(selector);
+    if (!!topStickyContainer) {
+      // const scrollDirection = this.rootElement.scrollTop > this._lastScrollTop ? "down" : "up";
+      // this._lastScrollTop = this.rootElement.scrollTop;
+      return this.rootElement.scrollTop > 0 && topStickyContainer.getBoundingClientRect().y <= this.rootElement.getBoundingClientRect().y;
+    }
+    return false;
+  }
   public onScroll(): void {
     if (!!this.rootElement) {
-      const topStickyContainer = this.rootElement.querySelector(".sv-components-container-center");
-      if (!!topStickyContainer && topStickyContainer.getBoundingClientRect().y <= this.rootElement.getBoundingClientRect().y) {
+      if (this._isElementShouldBeSticky(".sv-components-container-center")) {
         this.rootElement.classList && this.rootElement.classList.add("sv-root--sticky-top");
       } else {
         this.rootElement.classList && this.rootElement.classList.remove("sv-root--sticky-top");

diff --git a/tests/surveytests.ts b/tests/surveytests.ts
@@ -20048,3 +20048,25 @@ QUnit.test("Delete panel with questions", (assert) => {
   assert.notOk(survey.getPanelByName("panel1"), "#5");
   assert.notOk(survey.getQuestionByName("question1"), "#6");
 });
+QUnit.test("_isElementShouldBeSticky", (assert) => {
+  const survey = new SurveyModel({});
+  const topStickyContainer: any = {
+    getBoundingClientRect: () => ({ y: 64 })
+  };
+  const rootElement: any = {
+    getBoundingClientRect: () => ({ y: 64 }),
+    querySelector: () => topStickyContainer,
+    scrollTop: 0
+  };
+  survey.rootElement = rootElement;
+
+  assert.notOk(survey._isElementShouldBeSticky(".test"), "no scrolling");
+
+  rootElement.scrollTop = 50;
+  assert.ok(survey._isElementShouldBeSticky(".test"), "content is scrolled");
+
+  assert.notOk(survey._isElementShouldBeSticky(""), "empty selector - always false (with scroll)");
+
+  rootElement.scrollTop = 0;
+  assert.notOk(survey._isElementShouldBeSticky(""), "empty selector - always false (no scroll)");
+});