@inizioevoke/astro-core 2.0.2 → 2.0.4

package/package.json

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

package/src/components/Modal/Modal.ts

@@ -212,12 +212,13 @@ function getAnimationDuration(element: HTMLElement = document.body) {
 document.addEventListener('DOMContentLoaded', (e) => {
   bindTriggers();
 
-  if (!getOverlay()) {
-    const overlay = document.createElement('div');
+  let overlay = getOverlay();
+  if (!overlay) {
+    overlay = document.createElement('div');
     overlay.classList.add(CSS_OVERLAY);
-    overlay.addEventListener('click', () => {
-      hideModals();
-    }, { passive: true });
     document.body.append(overlay);
   }
+  overlay.addEventListener('click', () => {
+    hideModals();
+  }, { passive: true });
 }, { passive: true });

package/src/components/ScrollContainer/ScrollContainer.ts

@@ -175,9 +175,15 @@ export class EvoScrollContainerElement extends HTMLElement implements IEvoScroll
       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 / scrollHeight;
+      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 {
@@ -194,8 +200,13 @@ export class EvoScrollContainerElement extends HTMLElement implements IEvoScroll
       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 / scrollWidth;
+      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) {