@inizioevoke/astro-core 2.1.1 → 2.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inizioevoke/astro-core",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "",
   "license": "ISC",
   "author": "",

package/src/components/ScrollContainer/ScrollContainer.ts

@@ -198,45 +198,49 @@ export class EvoScrollContainerElement extends HTMLElement implements IEvoScroll
     if (this.#thumbVert && this.#trackVert) {
       const scrollHeight = this.#content.scrollHeight - getPaddingY(this.#content);
       const containerHeight = this.clientHeight - getPaddingY(this);
-      const trackHeight = this.#trackVert.clientHeight;
-      const trackStyle = getComputedStyle(this.#trackVert);
-      const trackTop = parseInt(trackStyle.getPropertyValue('--evo-scroll-container-track-vert-top'), 10);
-      const trackBot = parseInt(trackStyle.getPropertyValue('--evo-scroll-container-track-vert-bottom'), 10);
-      const trackOffset = parseInt(trackStyle.getPropertyValue('--evo-scroll-container-height-offset'), 10);
-      const trackAdjust = (!isNaN(trackTop) ? trackTop : 0) + (!isNaN(trackBot) ? trackBot : 0) + (!isNaN(trackOffset) ? trackOffset : 0);
-
-      const visibleRatioVert = (containerHeight - trackAdjust) / scrollHeight;
-      const thumbHeight = visibleRatioVert * trackHeight;
-
-      if (this.#scrollbarSettings.thumbHeight != undefined) {
-        this.#thumbVert.style.height = `${Math.max(0, Math.min(this.#scrollbarSettings.thumbHeight, trackHeight))}px`;
-      } else {
-        this.#thumbVert.style.height = `${Math.min(thumbHeight > 20 ? thumbHeight : 20, trackHeight)}px`;
-      }
-      if (this.#scrollbarSettings.trackVisible !== undefined) {
-        this.#trackVert.style.display = this.#scrollbarSettings.trackVisible === true ? 'block' : 'none';
+      
+      if ((containerHeight / scrollHeight) < 1 || this.#scrollbarSettings.trackVisible === true) { // should scroll
+        const trackHeight = this.#trackVert.clientHeight;
+        const trackStyle = getComputedStyle(this.#trackVert);
+        const trackTop = parseInt(trackStyle.getPropertyValue('--evo-scroll-container-track-vert-top'), 10);
+        const trackBot = parseInt(trackStyle.getPropertyValue('--evo-scroll-container-track-vert-bottom'), 10);
+        const trackOffset = parseInt(trackStyle.getPropertyValue('--evo-scroll-container-height-offset'), 10);
+        const trackAdjust = (!isNaN(trackTop) ? trackTop : 0) + (!isNaN(trackBot) ? trackBot : 0) + (!isNaN(trackOffset) ? trackOffset : 0);
+
+        const shouldScroll = (containerHeight / scrollHeight) < 1;
+        const visibleRatioVert = (containerHeight - trackAdjust) / scrollHeight;
+        const thumbHeight = visibleRatioVert * trackHeight;
+
+        if (this.#scrollbarSettings.thumbHeight != undefined) {
+          this.#thumbVert.style.height = `${Math.max(0, Math.min(this.#scrollbarSettings.thumbHeight, trackHeight))}px`;
+        } else {
+          this.#thumbVert.style.height = `${Math.min(thumbHeight > 20 ? thumbHeight : 20, trackHeight)}px`;
+        }
+
+        this.#trackVert.style.display = 'block';
       } else {
-        this.#trackVert.style.display = visibleRatioVert < 1 ? 'block' : 'none';
+        this.#trackVert.style.display = 'none';
       }
     }
 
     if (this.#thumbHorz && this.#trackHorz) {
       const scrollWidth = this.#content.scrollWidth - getPaddingX(this.#content);
       const containerWidth = this.clientWidth - getPaddingX(this);
-      const trackWidth = this.#trackHorz.clientWidth;
-      const trackStyle = getComputedStyle(this.#trackHorz);
-      const trackLeft = parseInt(trackStyle.getPropertyValue('--evo-scroll-container-track-horz-left'), 10);
-      const trackRight = parseInt(trackStyle.getPropertyValue('--evo-scroll-container-track-horz-right'), 10);
-      const trackOffset = parseInt(trackStyle.getPropertyValue('--evo-scroll-container-width-offset'), 10);
-      const trackAdjust = (!isNaN(trackLeft) ? trackLeft : 0) + (!isNaN(trackRight) ? trackRight : 0) + (!isNaN(trackOffset) ? trackOffset : 0);
-
-      const visibleRatioHorz = (containerWidth - trackAdjust) / scrollWidth;
-      const thumbWidth = visibleRatioHorz * trackWidth;
-      this.#thumbHorz.style.width = `${Math.min(thumbWidth > 20 ? thumbWidth : 20, trackWidth)}px`;
-      if (this.#scrollbarSettings.trackVisible !== undefined) {
-        this.#trackHorz.style.display = this.#scrollbarSettings.trackVisible === true ? 'block' : 'none';
+
+      if ((containerWidth / scrollWidth) < 1 || this.#scrollbarSettings.trackVisible === true) {
+        const trackWidth = this.#trackHorz.clientWidth;
+        const trackStyle = getComputedStyle(this.#trackHorz);
+        const trackLeft = parseInt(trackStyle.getPropertyValue('--evo-scroll-container-track-horz-left'), 10);
+        const trackRight = parseInt(trackStyle.getPropertyValue('--evo-scroll-container-track-horz-right'), 10);
+        const trackOffset = parseInt(trackStyle.getPropertyValue('--evo-scroll-container-width-offset'), 10);
+        const trackAdjust = (!isNaN(trackLeft) ? trackLeft : 0) + (!isNaN(trackRight) ? trackRight : 0) + (!isNaN(trackOffset) ? trackOffset : 0);
+
+        const visibleRatioHorz = (containerWidth - trackAdjust) / scrollWidth;
+        const thumbWidth = visibleRatioHorz * trackWidth;
+        this.#thumbHorz.style.width = `${Math.min(thumbWidth > 20 ? thumbWidth : 20, trackWidth)}px`;
+        this.#trackHorz.style.display = 'block';
       } else {
-        this.#trackHorz.style.display = visibleRatioHorz < 1 ? 'block' : 'none';
+        this.#trackHorz.style.display = 'none';
       }
     }
   }