@inizioevoke/astro-core 2.0.0 → 2.0.2

package/package.json

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

package/src/components/ISI/Right/RightISI.astro

@@ -1,6 +1,6 @@
 ---
 import type { HTMLAttributes } from 'astro/types';
-import ScrollContainer, { type Props as ScrollContainerProps } from '../ScrollContainer/ScrollContainer.astro';
+import ScrollContainer, { type Props as ScrollContainerProps } from '../../ScrollContainer/ScrollContainer.astro';
 import './RightISI.css';
 
 interface Props extends HTMLAttributes<'div'> {

package/src/components/PdfViewer/PdfViewer.astro

@@ -1,5 +1,7 @@
 ---
 import ScrollContainer from '../ScrollContainer/ScrollContainer.astro';
+import type { Layout } from './PdfViewer';
+import type { Scrolling } from '../ScrollContainer/ScrollContainer';
 import './PdfViewer.css';
 
 interface Props {
@@ -11,8 +13,9 @@ interface Props {
   zoom?: 50 | 60 | 70 | 80 | 90 | 100 | 110 | 120 | 130 | 140 | 150;
   page?: number;
   pages?: string;
-  // bookmarks?: Record<string, number>;
-  // bookmarkText?: string;
+  layout?: Layout;
+  fit?: 'width' | 'height' | `${string}%` | number;
+  quality?: number;
   toolbar?: {
     nav?: boolean;
     page?: boolean;
@@ -21,7 +24,7 @@ interface Props {
       placeholder?: string;
       items: Record<string, number>;
     }
-  }
+  } | false;
 }
 const { 
   id, 
@@ -31,6 +34,9 @@ const {
   pdf,
   zoom,
   page = 1,
+  layout = 'vertical',
+  fit = '100%',
+  quality = 2,
   toolbar,
   ...rest 
 } = Astro.props;
@@ -39,13 +45,18 @@ const attrs: Record<string, string> = {...rest};
 if (height) {
   attrs.style = `${attrs.style ? `${attrs.style}${attrs.style.endsWith(';') ? '' : ';'}` : ''}--evo-pdf-viewer-height:${typeof height == 'number' ? `${height}px` : height};`;
 }
+
+const scrollContainerScrolling: Scrolling = toolbar === undefined || (toolbar && toolbar?.zoom !== false) ? 'both' : layout as Scrolling;
 ---
 <evo-pdf-viewer 
   id={id} 
-  class:list={['evo-pdf-viewer', cssClass, theme ? `evo-pdf-viewer-theme-${theme}` : null]} 
+  class:list={['evo-pdf-viewer', `evo-pdf-viewer-layout-${layout}`, cssClass, theme ? `evo-pdf-viewer-theme-${theme}` : null, toolbar === false ? 'evo-pdf-viewer-toolbar-hidden' : null]} 
   data-pdf={pdf} 
   data-page={page}
   data-zoom={zoom}
+  data-layout={layout}
+  data-fit={fit}
+  data-quality={quality}
   {...attrs} 
 >
   <div class="evo-pdf-viewer-toolbar">
@@ -53,7 +64,7 @@ if (height) {
       <slot name="toolbar-start" />
     </div>
     <div class="evo-pdf-viewer-toolbar-controls">
-      <div class:list={["evo-pdf-viewer-toolbar-arrows", toolbar?.nav === false ? 'evo-hidden' : null]}>
+      <div class:list={["evo-pdf-viewer-toolbar-arrows", toolbar && toolbar.nav === false ? 'evo-hidden' : null]}>
         <button class="evo-pdf-viewer-toolbar-prev" title="Previous">
           <slot name="toolbar-prev">
             <svg class="evo-pdf-viewer-toolbar-icon" width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -69,10 +80,10 @@ if (height) {
           </slot>
         </button>
       </div>
-      <div class:list={['evo-pdf-viewer-nav-page', toolbar?.page === false ? 'evo-hidden' : null]}>
+      <div class:list={['evo-pdf-viewer-nav-page', toolbar && toolbar.page === false ? 'evo-hidden' : null]}>
         <select><option value="1">1</option></select> of <span class="evo-pdf-viewer-nav-page-count">1</span>
       </div>
-      <div class:list={['evo-pdf-viewer-toolbar-zoom', toolbar?.zoom === false ? 'evo-hidden' : null]}>
+      <div class:list={['evo-pdf-viewer-toolbar-zoom', toolbar && toolbar.zoom === false ? 'evo-hidden' : null]}>
         <button class="evo-pdf-viewer-toolbar-zoom-out" title="Zoom out">
           <slot name="toolbar-zoom-out">
             <svg class="evo-pdf-viewer-toolbar-icon" width="16px" height="16px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -94,7 +105,7 @@ if (height) {
           </slot>
         </button>
       </div>
-      {toolbar?.bookmarks && Object.keys(toolbar.bookmarks.items).length > 0 && 
+      {toolbar && toolbar.bookmarks && Object.keys(toolbar.bookmarks.items).length > 0 && 
       <div class="evo-pdf-viewer-toolbar-bookmarks">
         <select>
           <option value="" disabled selected hidden>{toolbar.bookmarks.placeholder ?? ''}</option>
@@ -109,7 +120,7 @@ if (height) {
     </div>
   </div>
   <div class="evo-pdf-viewer-container">
-    <ScrollContainer>
+    <ScrollContainer scrolling={scrollContainerScrolling}>
       <!-- <div class="evo-pdf-viewer-page">
         
       </div>

package/src/components/PdfViewer/PdfViewer.css

@@ -3,10 +3,15 @@ evo-pdf-viewer {
   --evo-pdf-viewer-toolbar-height: 44px;
   --evo-pdf-viewer-toolbar-align: center;
   --evo-pdf-viewer-scale: 1;
+  --evo-pdf-viewer-padding-top: 0px;
+  --evo-pdf-viewer-padding-right: 8px;
+  --evo-pdf-viewer-padding-bottom: 8px;
+  --evo-pdf-viewer-padding-left: calc(8px + var(--evo-scroll-container-track-width) + var(--evo-scroll-container-width-offset));
 
   position: relative;
   display: block;
   height: var(--evo-pdf-viewer-height);
+  padding: var(--evo-pdf-viewer-padding-top) var(--evo-pdf-viewer-padding-right) var(--evo-pdf-viewer-padding-bottom) var(--evo-pdf-viewer-padding-left);
   background-color: #f0f0f0;
   box-sizing: border-box;
 
@@ -105,57 +110,27 @@ evo-pdf-viewer {
       }
     }
   }
-  /*.evo-pdf-viewer-nav {
-    position: absolute;
-    left: calc(50% - 80px);
-    top: var(--evo-pdf-viewer-toolbar-height);
-    display: flex;
-    justify-content: space-between;
-    width: 160px;
-    padding: 6px 12px;
-    border-radius: 0 0 12px 12px;
-    background-color: rgba(51, 51, 51, 0.9);
-    backdrop-filter: blur(2px);
-    z-index: 1;
-    box-sizing: border-box;
-
-    button {
-      all: unset;
-      display: block;
-      cursor: pointer;
-      &.evo-pdf-viewer-nav-arrow {
-        width: 24px;
-        height: 24px;
-      }
-      &.evo-pdf-viewer-nav-page {
-        color: white;
-        font-family: sans-serif;
-        font-size: 18px;
-        line-height: 18px;
-      }
-    }
-  }*/
   .evo-pdf-viewer-container {
-    height: calc(var(--evo-pdf-viewer-height) - var(--evo-pdf-viewer-toolbar-height));
-    padding: 0 9px 9px var(--evo-scroll-container-content-padding-right);
+    --evo-pdf-viewer-container-height: calc(var(--evo-pdf-viewer-height) - var(--evo-pdf-viewer-padding-top) - var(--evo-pdf-viewer-toolbar-height) -  var(--evo-pdf-viewer-padding-bottom));
+    height: var(--evo-pdf-viewer-container-height);
     box-sizing: border-box;
 
     evo-scroll-container {
       --evo-scroll-container-track-color: #cccccc;
-      height: calc(var(--evo-pdf-viewer-height) - var(--evo-pdf-viewer-toolbar-height));
+      /* height: 100%; */
+      height: var(--evo-pdf-viewer-container-height);
       .evo-scroll-content {
-        overflow-x: hidden;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 16px;
+        
         .evo-pdf-viewer-page-wrapper {
           display: block;
-          margin: 18px auto;
+          flex-shrink: 0;
+          margin-left: auto;
+          margin-right: auto;
           background-color: white;
-
-          &:first-child {
-            margin-top: 0;
-          }
-          &:last-child {
-            margin-bottom: 0;
-          }
         }
         
         canvas {
@@ -166,7 +141,7 @@ evo-pdf-viewer {
         
         .evo-pdf-viewer-link-overlay {
           pointer-events: auto;
-          z-index: 1;
+          z-index: 0;
           -webkit-tap-highlight-color: transparent;
           user-select: none;
           touch-action: manipulation;
@@ -179,18 +154,50 @@ evo-pdf-viewer {
     }
   }
 
-  /* &.evo-pdf-viewer-theme-modern {
+  &.evo-pdf-viewer-toolbar-hidden {
     .evo-pdf-viewer-toolbar {
-      button {
-        background-color: transparent;
-        border: none;
-        border-radius: 0;
-        &:hover {
-          background-color: rgba(0,0,0,0.05);
+      display: none;
+    }
+    .evo-pdf-viewer-container {
+      --evo-pdf-viewer-container-height: calc(var(--evo-pdf-viewer-height) - var(--evo-pdf-viewer-padding-top) - var(--evo-pdf-viewer-padding-bottom));
+    }
+
+    &.evo-pdf-viewer-layout-horizontal {
+      --evo-pdf-viewer-padding-left: var(--evo-pdf-viewer-padding-right);
+    }
+    &.evo-pdf-viewer-layout-vertical {
+      --evo-pdf-viewer-padding-top: 8px
+    }
+  }
+
+  &.evo-pdf-viewer-layout-horizontal {
+    .evo-pdf-viewer-toolbar {
+      .evo-pdf-viewer-toolbar-arrows {
+        .evo-pdf-viewer-toolbar-prev {
+          transform: rotate(-90deg);
+        }
+        .evo-pdf-viewer-toolbar-next {
+          transform: rotate(-90deg);
+        }
+      }
+    }
+    .evo-pdf-viewer-container {
+      evo-scroll-container {
+        .evo-scroll-content {
+          display: flex;
+          flex-direction: row;
+          align-items: flex-start;
+
+          .evo-pdf-viewer-page-wrapper {
+            display: block;
+            margin-top: auto;
+            margin-bottom: auto;
+            flex-shrink: 0;
+          }
         }
       }
     }
-  } */
+  }
   &.evo-pdf-viewer-theme-dark {
     background-color: #555555;
     .evo-pdf-viewer-toolbar {

package/src/components/PdfViewer/PdfViewer.ts

@@ -1,10 +1,14 @@
 /// <reference types="vite/client" />
 import * as pdfjs from './pdf.min.mjs';
 import workerSrc from './pdf.worker.min.mjs?url';
-import type { PDFDocumentProxy } from 'pdfjs-dist';
-import { EvoScrollContainerElement } from '../ScrollContainer/ScrollContainer';
+import type { PDFDocumentProxy, RenderTask } from 'pdfjs-dist';
+import { EvoScrollContainerElement, type Scrolling } from '../ScrollContainer/ScrollContainer';
 
 const TAG_NAME = 'evo-pdf-viewer';
+const MIN_ZOOM = 1;   // 10% — stored as tenths
+const MAX_ZOOM = 80;  // 800%
+const RERENDER_DEBOUNCE_MS = 300;
+const MAX_CANVAS_DIMENSION = 16384;
 
 export interface EvoPdfViewerEventDetail {
   type: string;
@@ -18,9 +22,11 @@ declare global {
   }
 }
 
+export type Layout = Omit<Scrolling, 'both'>
+
 export interface IEvoPdfViewerElement {
   scrollToPage: (page: number | string) => void;
-  zoom: (z: number) => void;
+  zoom: (z: -1 | 0 | 1) => void;
 }
 export class EvoPdfViewerElement extends HTMLElement implements IEvoPdfViewerElement {
   #toolbar!: HTMLElement;
@@ -30,6 +36,19 @@ export class EvoPdfViewerElement extends HTMLElement implements IEvoPdfViewerEle
   #toolbarHeight = 0;
   #defaultZoom = 100;
   #pageCount = 0;
+  #layout: Layout = 'vertical';
+  #fit: 'width' | 'height' | `${string}%` | number = 'width';
+
+  #pdf!: PDFDocumentProxy;
+  #outputScale = 1;
+  #renderQuality = 2;
+  #targetQuality = 2;
+  #pageLayouts = new Map<number, { viewportScale: number; cssWidth: string; cssHeight: string }>();
+  #renderedPages = new Map<number, { effectiveQuality: number; task?: RenderTask }>();
+  #visiblePages = new Set<number>();
+  #lazyObserver!: IntersectionObserver;
+  #boundUpdateCurrentPage = () => this.#updateCurrentPage();
+  #rerenderTimer: number | null = null;
 
   constructor() {
     super();
@@ -43,6 +62,18 @@ export class EvoPdfViewerElement extends HTMLElement implements IEvoPdfViewerEle
 
     this.#toolbarHeight = parseFloat(getComputedStyle(this.#toolbar).height);
     this.#defaultZoom = parseInt(this.getAttribute('data-zoom') ?? '100', 10);
+    this.#layout = this.dataset.layout as Layout;
+    
+    const fit = this.dataset.fit;
+    if (fit) {
+      if (/^\d+%$/.test(fit)){
+        this.#fit = fit as `${string}%`;
+      } else if (/^\d+$/.test(fit)) {
+        this.#fit = parseInt(fit, 10);
+      } else if (fit === 'height' || fit === 'width') {
+        this.#fit = fit;
+      }
+    }
 
     // *** nav
     this.querySelector<HTMLButtonElement>('button.evo-pdf-viewer-toolbar-prev')?.addEventListener('click', () => {
@@ -87,11 +118,12 @@ export class EvoPdfViewerElement extends HTMLElement implements IEvoPdfViewerEle
       });
     }
 
-    this.#scrollContainer.addEventListener('scroll', this.#updateCurrentPage, { passive: true });
+    this.#scrollContainer.addEventListener('scroll', this.#boundUpdateCurrentPage, { passive: true });
 
     this.#renderPDF()
       .then(() => {
         this.zoom(0);
+        this.#scrollContainer.refresh();
         this.#updateCurrentPage();
       })
       .catch((err) => {
@@ -104,42 +136,108 @@ export class EvoPdfViewerElement extends HTMLElement implements IEvoPdfViewerEle
     if (typeof page == 'string') {
       page = parseInt(page, 10);
     }
-    // requestAnimationFrame(() => {
-    const canvas = this.#scrollContainer.querySelector<HTMLElement>(`canvas[data-page="${page}"]`);
-    if (canvas) { 
-      this.#scrollContainer.scroll({ 
-        top: canvas.getBoundingClientRect().top + this.#scrollContainer.scrollTop - this.#toolbarHeight 
-      }); // , behavior: 'smooth' });
+    const wrapper = this.#scrollContainer.querySelector<HTMLElement>(`.evo-pdf-viewer-page-wrapper[data-page="${page}"]`);
+    if (wrapper) {
+      if (this.#layout === 'horizontal') {
+        this.#scrollContainer.scroll({
+          left: wrapper.getBoundingClientRect().left + this.#scrollContainer.scrollLeft - this.#scrollContainer.getBoundingClientRect().left,
+          behavior: 'smooth'
+        });
+      } else {
+        this.#scrollContainer.scroll({
+          top: wrapper.getBoundingClientRect().top + this.#scrollContainer.scrollTop - this.#toolbarHeight,
+          behavior: 'smooth'
+        });
+      }
       this.#pageSelect.selectedIndex = page - 1;
     }
-    // }
   }
 
-  zoom(z: number) {
+  zoom(z: -1 | 0 | 1) {
     const style = getComputedStyle(this);
     const current = Math.floor(parseFloat(style.getPropertyValue('--evo-pdf-viewer-scale')) * 10);
-    const scale = z === 0 ? this.#defaultZoom / 10 : current + z;
-    if (scale >= 1) {
-      const scroll = { 
-        left: this.#scrollContainer.scrollLeft, 
-        top: this.#scrollContainer.scrollTop 
-      };
-      this.style.setProperty('--evo-pdf-viewer-scale', (scale/10).toString());
-      this.#scrollContainer.scroll({ 
-        left: scroll.left * scale / current, 
-        top: scroll.top * scale / current 
-      });
-      this.#scrollContainer.refresh();
+    const zoomIn = z === 1;
+    if (z !== 0) {
+
+      if (current >= 12) {
+        zoomIn ? z += 1 : z -= 1; 
+        if (current >= 20) {
+          zoomIn ? z += 1 : z -= 1; 
+          if (current >= 40) {
+            zoomIn ? z += 1 : z -= 1; 
+          }
+        }
+      }
+    }
+    const target = z === 0 ? this.#defaultZoom / 10 : current + z;
+    const scale = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, target));
+    if (scale === current) return;
+
+    const scroll = {
+      left: this.#scrollContainer.scrollLeft,
+      top: this.#scrollContainer.scrollTop
+    };
+    this.style.setProperty('--evo-pdf-viewer-scale', (scale / 10).toString());
+    this.#scrollContainer.scroll({
+      left: scroll.left * scale / current,
+      top: scroll.top * scale / current,
+      behavior: 'instant'
+    });
+    this.#scrollContainer.refresh();
+
+    // Update the target quality immediately so any page entering view via the
+    // lazy observer renders at the new scale; only the visible pages are
+    // re-rendered eagerly (debounced) — others get sharpened lazily on scroll.
+    this.#targetQuality = Math.max(this.#renderQuality, this.#renderQuality * (scale / 10));
+    this.#scheduleVisibleRerender();
+  }
+
+  #scheduleVisibleRerender() {
+    if (this.#rerenderTimer !== null) {
+      clearTimeout(this.#rerenderTimer);
     }
+    this.#rerenderTimer = window.setTimeout(() => {
+      this.#rerenderTimer = null;
+      for (const pageNum of this.#visiblePages) {
+        const wrapper = this.#scrollContainer.content.querySelector<HTMLElement>(
+          `.evo-pdf-viewer-page-wrapper[data-page="${pageNum}"]`
+        );
+        if (wrapper) this.#considerRender(pageNum, wrapper);
+      }
+    }, RERENDER_DEBOUNCE_MS);
+  }
+
+  // Decide whether to (re-)render a page at the current target quality.
+  // Used by both the lazy observer and the post-zoom sweep so the gating
+  // logic lives in one place.
+  #considerRender(pageNum: number, wrapper: HTMLElement) {
+    const info = this.#renderedPages.get(pageNum);
+    if (!info) {
+      this.#renderPage(pageNum, wrapper, this.#targetQuality);
+      return;
+    }
+    // Skip when an in-flight render at the same target is already running.
+    if (info.task && info.effectiveQuality >= this.#targetQuality * 0.95) return;
+
+    const ratio = info.effectiveQuality / this.#targetQuality;
+    // Zoom-in: re-render when canvas is noticeably below target sharpness.
+    // Zoom-out: re-render only on big drops (>25%) to reclaim memory without
+    // constant churn on tiny steps.
+    if (ratio >= 0.95 && ratio <= 1.25) return;
+
+    info.task?.cancel();
+    this.#renderPage(pageNum, wrapper, this.#targetQuality);
   }
 
   async #renderPDF() {
-    const outputScale = window.devicePixelRatio || 1;
-    const pdf: PDFDocumentProxy = await pdfjs.getDocument(this.getAttribute('data-pdf') as string).promise;
-    
-    const pages = new Array(pdf.numPages).fill(1).map((v, i) => { return i + 1; });
+    this.#outputScale = window.devicePixelRatio || 1;
+    this.#renderQuality = parseFloat(this.getAttribute('data-quality') ?? '2');
+    this.#targetQuality = this.#renderQuality;
+    this.#pdf = await pdfjs.getDocument(this.getAttribute('data-pdf') as string).promise;
+
+    const pages = new Array(this.#pdf.numPages).fill(1).map((_, i) => i + 1);
     this.#pageCount = pages.length;
-    
+
     this.querySelector<HTMLElement>('.evo-pdf-viewer-nav-page-count')!.innerText = pages.length.toString();
 
     this.#pageSelect.options.remove(0);
@@ -150,77 +248,195 @@ export class EvoPdfViewerElement extends HTMLElement implements IEvoPdfViewerEle
       this.#pageSelect.options.add(option);
     }
 
+    const containerStyle = getComputedStyle(this.#scrollContainer.content);
+    const trackWidth = parseInt(containerStyle.getPropertyValue('--evo-scroll-container-track-width'));
+    const containerWidth = parseFloat(containerStyle.width);
+    const containerHeight = parseFloat(containerStyle.height);
+    const gap = 16;
+
+    // Pass 1: create sized placeholder wrappers for all pages so the scroll
+    // container knows its total dimensions before any canvas is rendered.
     for (const pageNum of pages) {
+      const pdfPage = await this.#pdf.getPage(pageNum);
+      const baseVp = pdfPage.getViewport({ scale: 1 });
+
+      let viewportScale: number;
+      let cssProp: 'width' | 'height';
+      let cssRenderedSize: number;
+
+      if (this.#layout === 'horizontal') {
+        if (this.#fit === 'height') {
+          viewportScale = (containerHeight - trackWidth * 2) / baseVp.height;
+          cssRenderedSize = Math.floor(baseVp.height * viewportScale) - (trackWidth * 2);
+          cssProp = 'height';
+        } else if (this.#fit === 'width') {
+          viewportScale = containerWidth / baseVp.width;
+          cssRenderedSize = Math.floor(baseVp.width * viewportScale);
+          cssProp = 'width';
+        } else if (/^\d+%$/.test(this.#fit.toString())) { // replacing 'actual' with a percentage
+          viewportScale = parseInt(this.#fit.toString(), 10) / 100;
+          cssRenderedSize = Math.floor(baseVp.height * viewportScale) - (trackWidth * 2);
+          cssProp = 'height';
+        } else {
+          const n = this.#fit as number;
+          viewportScale = (containerWidth - (n - 1) * gap) / (n * baseVp.width);
+          cssRenderedSize = Math.floor(baseVp.width * viewportScale);
+          cssProp = 'width';
+        }
+      } else {
+        if (this.#fit === 'width') {
+          viewportScale = containerWidth / baseVp.width;
+          cssRenderedSize = Math.floor(baseVp.width * viewportScale) - (trackWidth * 2);
+          cssProp = 'width';
+        } else if (this.#fit === 'height') {
+          viewportScale = containerHeight / baseVp.height;
+          cssRenderedSize = Math.floor(baseVp.height * viewportScale);
+          cssProp = 'height';
+        } else if (/^\d+%$/.test(this.#fit.toString())) { // replacing 'actual' with a percentage
+          viewportScale = parseInt(this.#fit.toString(), 10) / 100;
+          cssRenderedSize = Math.floor(baseVp.width * viewportScale) - (trackWidth * 2);
+          cssProp = 'width';
+        } else {
+          const n = this.#fit as number;
+          viewportScale = (containerHeight - (n - 1) * gap) / (n * baseVp.height);
+          cssRenderedSize = Math.floor(baseVp.height * viewportScale);
+          cssProp = 'height';
+        }
+      }
+
+      const layoutVp = pdfPage.getViewport({ scale: viewportScale });
+      const cssOtherSize = Math.round(cssProp === 'width'
+        ? cssRenderedSize * layoutVp.height / layoutVp.width
+        : cssRenderedSize * layoutVp.width / layoutVp.height);
+      const cssWidth  = `calc(${cssProp === 'width'  ? cssRenderedSize : cssOtherSize}px * var(--evo-pdf-viewer-scale))`;
+      const cssHeight = `calc(${cssProp === 'height' ? cssRenderedSize : cssOtherSize}px * var(--evo-pdf-viewer-scale))`;
+
+      this.#pageLayouts.set(pageNum, { viewportScale, cssWidth, cssHeight });
 
-      const pdfPage = await pdf.getPage(pageNum);
-      const pdfPageWidth = pdfPage.getViewport({ scale: 1}).width;
-      const containerStyle = getComputedStyle(this.#scrollContainer.content);
-      const trackWidth = parseInt(containerStyle.getPropertyValue('--evo-scroll-container-track-width'));
-      const viewport = pdfPage.getViewport({ scale: parseFloat(containerStyle.width) / pdfPageWidth });
-
-      const canvas = document.createElement('canvas');
-      canvas.setAttribute('data-page', pageNum.toString());
-      const width = Math.floor(viewport.width * outputScale);
-      const height = Math.floor(viewport.height * outputScale);
-      canvas.width = width;
-      canvas.height = height;
-      canvas.style.aspectRatio = `${width}/${height}`;
-      canvas.style.width = `calc(${Math.floor(viewport.width) - (trackWidth * 2)}px * var(--evo-pdf-viewer-scale))`;
-      // canvas.style.height = `${Math.floor(viewport.height)}px`;
-      
-      // Create wrapper for canvas and overlay
       const pageWrapper = document.createElement('div');
       pageWrapper.className = 'evo-pdf-viewer-page-wrapper';
+      pageWrapper.setAttribute('data-page', pageNum.toString());
       pageWrapper.style.position = 'relative';
-      pageWrapper.style.width = canvas.style.width;
-      pageWrapper.style.aspectRatio = canvas.style.aspectRatio;
-      pageWrapper.appendChild(canvas);
-      
+      pageWrapper.style.width = cssWidth;
+      pageWrapper.style.height = cssHeight;
       this.#scrollContainer.content.append(pageWrapper);
+      this.#scrollContainer.refresh();
+    }
 
-      pdfPage.render({
-        canvas,
-        // canvasContext: canvas.getContext('2d') as CanvasRenderingContext2D,
-        transform: outputScale !== 1 ? [outputScale, 0, 0, outputScale, 0, 0] : undefined,
-        viewport
-      });
-      
-      // Extract and render links
-      const links = await getPageLinks(pdfPage);
-      if (links.length > 0) {
-        const linkOverlay = createLinkOverlay(canvas, links, viewport, pageNum, this, this.scrollToPage.bind(this), pdf);
-        pageWrapper.appendChild(linkOverlay);
+    // Pass 2: observe wrappers. The observer is the single gate for both
+    // initial render and post-zoom re-render — pages outside its rootMargin
+    // keep their stale-quality canvas until they scroll back into view.
+    this.#lazyObserver = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          const wrapper = entry.target as HTMLElement;
+          const pageNum = parseInt(wrapper.getAttribute('data-page')!, 10);
+          if (entry.isIntersecting) {
+            this.#visiblePages.add(pageNum);
+            this.#considerRender(pageNum, wrapper);
+          } else {
+            this.#visiblePages.delete(pageNum);
+          }
+        }
+      },
+      {
+        root: this.#scrollContainer.content,
+        // Render one full container-length ahead in the scroll direction.
+        rootMargin: this.#layout === 'horizontal'
+          ? `0px ${containerWidth}px 0px ${containerWidth}px`
+          : `${containerHeight}px 0px ${containerHeight}px 0px`,
+        threshold: 0
       }
-      
-      this.#scrollContainer.refresh();
+    );
+
+    for (const wrapper of this.#scrollContainer.content.querySelectorAll<HTMLElement>('.evo-pdf-viewer-page-wrapper')) {
+      this.#lazyObserver.observe(wrapper);
+    }
+  }
+
+  async #renderPage(pageNum: number, wrapper: HTMLElement, quality = this.#renderQuality) {
+    const layout = this.#pageLayouts.get(pageNum)!;
+    const pdfPage = await this.#pdf.getPage(pageNum);
+
+    // Cap effective quality so the canvas never exceeds the browser's max texture
+    // dimension on any axis.
+    const baseVp = pdfPage.getViewport({ scale: layout.viewportScale });
+    const maxByWidth = MAX_CANVAS_DIMENSION / (baseVp.width * this.#outputScale);
+    const maxByHeight = MAX_CANVAS_DIMENSION / (baseVp.height * this.#outputScale);
+    const effectiveQuality = Math.min(quality, maxByWidth, maxByHeight);
+
+    const viewport = pdfPage.getViewport({ scale: layout.viewportScale * effectiveQuality });
+    const layoutVp = baseVp;
+
+    const canvas = document.createElement('canvas');
+    canvas.setAttribute('data-page', pageNum.toString());
+    canvas.width = Math.floor(viewport.width * this.#outputScale);
+    canvas.height = Math.floor(viewport.height * this.#outputScale);
+    canvas.style.width = layout.cssWidth;
+    canvas.style.height = layout.cssHeight;
+
+    const task = pdfPage.render({
+      canvas,
+      transform: this.#outputScale !== 1 ? [this.#outputScale, 0, 0, this.#outputScale, 0, 0] : undefined,
+      viewport
+    });
+    this.#renderedPages.set(pageNum, { effectiveQuality, task });
+
+    try {
+      await task.promise;
+    } catch (err: any) {
+      if (err?.name === 'RenderingCancelledException') return;
+      throw err;
+    }
+
+    // Swap the new canvas in only after a successful render so we never flash
+    // an empty canvas during a re-render.
+    const oldCanvas = wrapper.querySelector('canvas');
+    const oldOverlay = wrapper.querySelector('.evo-pdf-viewer-link-overlay');
+    if (oldCanvas) oldCanvas.remove();
+    if (oldOverlay) oldOverlay.remove();
+    wrapper.appendChild(canvas);
+    this.#renderedPages.set(pageNum, { effectiveQuality });
+
+    const links = await getPageLinks(pdfPage);
+    if (links.length > 0) {
+      const linkOverlay = createLinkOverlay(canvas, links, layoutVp, pageNum, this, this.scrollToPage.bind(this), this.#pdf);
+      wrapper.appendChild(linkOverlay);
     }
   }
 
   #updateCurrentPage() {
-    const canvases = this.#scrollContainer.content.querySelectorAll<HTMLCanvasElement>('canvas');
-    let visiblePage: HTMLCanvasElement | undefined;
+    const wrappers = this.#scrollContainer.content.querySelectorAll<HTMLElement>('.evo-pdf-viewer-page-wrapper');
+    let visibleWrapper: HTMLElement | undefined;
     let maxVisibility = 0;
 
-    canvases.forEach((canvas) => {
-      const rect = canvas.getBoundingClientRect();
+    wrappers.forEach((wrapper) => {
+      const rect = wrapper.getBoundingClientRect();
       const containerRect = this.#scrollContainer.getBoundingClientRect();
-      
-      // Calculate intersection height
-      const intersectTop = Math.max(rect.top, containerRect.top);
-      const intersectBottom = Math.min(rect.bottom, containerRect.bottom);
-      const intersectionHeight = Math.max(0, intersectBottom - intersectTop);
-      
-      // Calculate visibility ratio
-      const visibility = intersectionHeight / (rect.height || 1);
-      
+
+      let intersection: number;
+      let dimension: number;
+      if (this.#layout === 'horizontal') {
+        const intersectLeft = Math.max(rect.left, containerRect.left);
+        const intersectRight = Math.min(rect.right, containerRect.right);
+        intersection = Math.max(0, intersectRight - intersectLeft);
+        dimension = rect.width || 1;
+      } else {
+        const intersectTop = Math.max(rect.top, containerRect.top);
+        const intersectBottom = Math.min(rect.bottom, containerRect.bottom);
+        intersection = Math.max(0, intersectBottom - intersectTop);
+        dimension = rect.height || 1;
+      }
+
+      const visibility = intersection / dimension;
       if (visibility > maxVisibility) {
         maxVisibility = visibility;
-        visiblePage = canvas;
+        visibleWrapper = wrapper;
       }
     });
 
-    if (visiblePage && maxVisibility >= 0.1) {
-      const pageNum = visiblePage.getAttribute('data-page');
+    if (visibleWrapper && maxVisibility >= 0.1) {
+      const pageNum = visibleWrapper.getAttribute('data-page');
       if (pageNum) {
         this.#pageSelect.selectedIndex = parseInt(pageNum, 10) - 1;
       }
@@ -307,24 +523,16 @@ function createLinkOverlay(
   gotoPage: (page: number | string) => void,
   pdf: PDFDocumentProxy
 ): SVGSVGElement {
-  const trackWidth = parseInt(
-    getComputedStyle(canvas.parentElement!).getPropertyValue('--evo-scroll-container-track-width')
-  );
-  
-  const canvasWidth = Math.floor(viewport.width) - trackWidth * 2;
-  const canvasHeight = Math.floor(viewport.height);
-  
-  // Create SVG overlay
   const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
   svg.setAttribute('class', 'evo-pdf-viewer-link-overlay');
   svg.setAttribute('data-page', pageNum.toString());
   svg.setAttribute('viewBox', `0 0 ${viewport.width} ${viewport.height}`);
-  svg.setAttribute('width', `calc(${canvasWidth}px * var(--evo-pdf-viewer-scale))`);
-  svg.setAttribute('height', `calc(${canvasHeight}px * var(--evo-pdf-viewer-scale))`);
+  svg.setAttribute('width', canvas.style.width);
+  svg.setAttribute('height', canvas.style.height);
   svg.style.position = 'absolute';
   svg.style.top = '0';
   svg.style.left = '0';
-  svg.style.cursor = 'pointer';
+  // svg.style.cursor = 'pointer';
   
   // Add link rectangles
   for (const link of links) {

package/src/components/ScrollContainer/ScrollContainer.astro

@@ -1,51 +1,55 @@
 ---
 import type { HTMLAttributes } from 'astro/types';
+import type { Scrolling } from './ScrollContainer';
 import './ScrollContainer.css';
 
 export interface Props extends HTMLAttributes<'div'> { 
-  outerWidth?: string | number;
-  innerWidth?: string | number;
+  width?: string | number;
   height?: string | number;
-  vertical?: boolean;
-  horizontal?: boolean;
+  scrolling?: Scrolling;
 }
 
 const {
-  outerWidth,
-  innerWidth,
+  width,
   height,
-  vertical = true,
-  horizontal = false,
+  scrolling = 'vertical',
   ...rest
 } = Astro.props;
 
-const containerAttrs = {...rest};
-const cssClass = containerAttrs['class'] ?? '';
-['class'].forEach((a) => {
-  delete containerAttrs[a as keyof typeof containerAttrs];
-});
+const containerAttrs = {...rest, 'data-scrolling': scrolling};
+const cssClassList = ['evo-scroll-container', containerAttrs['class']];
+delete containerAttrs['class'];
+
+switch (scrolling) {
+  case 'horizontal':
+    cssClassList.push('evo-scroll-horz');
+    break;
+  case 'vertical':
+    cssClassList.push('evo-scroll-vert')
+    break;
+  default:
+    cssClassList.push('evo-scroll-both')
+    break;
+}
 
 containerAttrs.style = typeof containerAttrs.style == 'string' ? `${containerAttrs.style}${containerAttrs.style.endsWith(';') ? '' : ';'}` : '';
-if (outerWidth) {
-  containerAttrs.style = `${containerAttrs.style}width:${typeof outerWidth == 'number' || /^\d+$/.test(outerWidth) ? `${outerWidth}px` : outerWidth};`;
+if (width) {
+  containerAttrs.style = `${containerAttrs.style}width:${typeof width == 'number' || /^\d+$/.test(width) ? `${width}px` : width};`;
 }
 if (height) {
   containerAttrs.style = `${containerAttrs.style}height:${typeof height == 'number' || /^\d+$/.test(height) ? `${height}px` : height};`;
 }
-
-const contentAttrs: Record<string, string> = {};
-if (innerWidth) {
-  contentAttrs.style = `width:${typeof innerWidth == 'number' || /^\d+$/.test(innerWidth) ? `${innerWidth}px` : innerWidth};`
-}
 ---
-<evo-scroll-container class:list={['evo-scroll-container', cssClass]} {...containerAttrs}>
-  <div class="evo-scroll-content" {...contentAttrs}>
+<evo-scroll-container class:list={cssClassList} {...containerAttrs}>
+  <div class="evo-scroll-content">
     <slot />
   </div>
-  {vertical && <div class="evo-scroll-track evo-scroll-track-y">
+  {scrolling !== 'horizontal' && 
+  <div class="evo-scroll-track evo-scroll-track-vert">
     <div class="evo-scroll-thumb"></div>
   </div>}
-  {horizontal && <div class="evo-scroll-track evo-scroll-track-x">
+  {scrolling !== 'vertical' && 
+  <div class="evo-scroll-track evo-scroll-track-horz">
     <div class="evo-scroll-thumb"></div>
   </div>}
 </evo-scroll-container>

package/src/components/ScrollContainer/ScrollContainer.css

@@ -1,68 +1,113 @@
 @layer inizioevoke-astro-components {
   :root {
-    --evo-scroll-container-border-radius: 4px;
     --evo-scroll-container-track-width: 8px;
-    --evo-scroll-container-track-top: 0px;
-    --evo-scroll-container-track-bottom: 0px;
-    --evo-scroll-container-track-right: 0px;
+    --evo-scroll-container-width-offset: var(--evo-scroll-container-track-width);
+    --evo-scroll-container-height-offset: var(--evo-scroll-container-track-width);
+    --evo-scroll-container-border-radius: calc(var(--evo-scroll-container-track-width) / 2);
+    --evo-scroll-container-track-vert-top: 0px;
+    --evo-scroll-container-track-vert-bottom: 0px;
+    --evo-scroll-container-track-vert-right: 0px;
+    --evo-scroll-container-track-horz-bottom: 0px;
+    --evo-scroll-container-track-horz-left: 0px;
+    --evo-scroll-container-track-horz-right: 0px;
+    /* --evo-scroll-container-track-padding: calc(1rem + var(--evo-scroll-container-track-width)); */
     --evo-scroll-container-track-color: #dddddd;
     --evo-scroll-container-thumb-color: #666666;
     --evo-scroll-container-thumb-border-width: 0px;
     --evo-scroll-container-thumb-border-color: var(--evo-scroll-container-track-color);
-    --evo-scroll-container-content-padding-right: calc(1rem + var(--evo-scroll-container-track-width));
   }
 
   evo-scroll-container,
   .evo-scroll-container {
+    --evo-scroll-container-scrollbar-offset: 0px;
     position: relative;
     display: block;
     width: 100%;
     height: 100%;
     overflow: hidden;
     box-sizing: border-box;
+
+    &.evo-scroll-both {
+      --evo-scroll-container-scrollbar-offset: var(--evo-scroll-container-track-width);
+    }
     
     * { 
       box-sizing: border-box;
     }
 
     .evo-scroll-content {
-      height: 100%;
-      overflow-y: scroll;
-      padding-right: var(--evo-scroll-container-content-padding-right);
       -ms-overflow-style: none;
       scrollbar-width: none;
+      overflow: hidden;
+      width: 90%;
       &::-webkit-scrollbar {
         display: none;
       }
-
-      *:first-child {
-        margin-top: 0 !important;
-      }
-      *:last-child {
-        margin-bottom: 0 !important;
-      }
     }
 
     .evo-scroll-track {
       position: absolute;
-      top: var(--evo-scroll-container-track-top);
-      right: var(--evo-scroll-container-track-right);
-      width: var(--evo-scroll-container-track-width);
-      height: calc(100% - var(--evo-scroll-container-track-top) - var(--evo-scroll-container-track-bottom));
       background: var(--evo-scroll-container-track-color);
       border-radius: var(--evo-scroll-container-border-radius);
 
       .evo-scroll-thumb {
         box-sizing: border-box;
         position: absolute;
-        width: 100%;
         background-color: var(--evo-scroll-container-thumb-color);
         border: var(--evo-scroll-container-thumb-border-width) solid var(--evo-scroll-container-thumb-border-color);
         border-radius: var(--evo-scroll-container-border-radius);
-        height: 50px;
         cursor: grab;
         font-size: 0;
       }
+
+      &.evo-scroll-track-vert {
+        top: var(--evo-scroll-container-track-vert-top);
+        right: var(--evo-scroll-container-track-vert-right);
+        width: var(--evo-scroll-container-track-width);
+        height: calc(100% - var(--evo-scroll-container-track-vert-top) - var(--evo-scroll-container-track-vert-bottom) - var(--evo-scroll-container-scrollbar-offset));
+
+        .evo-scroll-thumb {
+          width: 100%;
+          height: 50px;
+        }
+      }
+      &.evo-scroll-track-horz {
+        left: var(--evo-scroll-container-track-horz-left);
+        bottom: var(--evo-scroll-container-track-horz-bottom);
+        width: calc(100% - var(--evo-scroll-container-track-horz-left) - var(--evo-scroll-container-track-horz-right) - var(--evo-scroll-container-scrollbar-offset));
+        height: var(--evo-scroll-container-track-width);
+
+        .evo-scroll-thumb {
+          width: 50px;
+          height: 100%;
+        }
+      }
+    }
+
+    &.evo-scroll-horz,
+    &.evo-scroll-both {
+      .evo-scroll-content {
+        height: calc(100% - var(--evo-scroll-container-track-width) - var(--evo-scroll-container-track-horz-bottom) - var(--evo-scroll-container-height-offset));
+        overflow-x: scroll;
+      }
+    }
+    &.evo-scroll-horz {
+      .evo-scroll-content {
+        width: 100%;
+      }
+    }
+
+    &.evo-scroll-vert,
+    &.evo-scroll-both {
+      .evo-scroll-content {
+        width: calc(100% - var(--evo-scroll-container-track-width) - var(--evo-scroll-container-track-vert-right) - var(--evo-scroll-container-width-offset));
+        overflow-y: scroll;
+      }
+    }
+    &.evo-scroll-vert {
+      .evo-scroll-content {
+        height: 100%;
+      }
     }
   }
 }

package/src/components/ScrollContainer/ScrollContainer.ts

@@ -24,6 +24,8 @@ const mutationObserver = new MutationObserver((mutations) => {
   });
 });
 
+export type Scrolling = 'horizontal' | 'vertical' | 'both';
+
 export interface IEvoScrollContainerElement {
   content: HTMLElement;
   scrollLeft: number;
@@ -48,15 +50,23 @@ export class EvoScrollContainerElement extends HTMLElement implements IEvoScroll
   }
 
   #content!: HTMLElement;
-  #track!: HTMLElement;
-  #thumb!: HTMLElement;
-  #isDragging: boolean = false;
+  #trackHorz: HTMLElement | null = null;
+  #thumbHorz: HTMLElement | null = null;
+  #trackVert: HTMLElement | null = null;
+  #thumbVert: HTMLElement | null = null;
+  #isDraggingVert: boolean = false;
   #startY: number = 0;
   #startScrollTop: number = 0;
-  
+  #isDraggingHorz: boolean = false;
+  #startX: number = 0;
+  #startScrollLeft: number = 0;
+  #scrolling: Scrolling = 'vertical';
+
   #scrollbarSettings: ScrollbarSettings = {};
-  #mouseupHandler: any = undefined;
-  #mousemoveHandler: any = undefined;
+  #mouseupHandlerVert: any = undefined;
+  #mousemoveHandlerVert: any = undefined;
+  #mouseupHandlerHorz: any = undefined;
+  #mousemoveHandlerHorz: any = undefined;
   #boundResizeHandler: () => void;
 
   constructor() {
@@ -66,24 +76,32 @@ export class EvoScrollContainerElement extends HTMLElement implements IEvoScroll
 
   connectedCallback() {
     this.#content = this.querySelector('.evo-scroll-content') as HTMLElement;
-    this.#track = this.querySelector('.evo-scroll-track') as HTMLElement;
-    this.#thumb = this.querySelector('.evo-scroll-thumb') as HTMLElement;
-    this.#isDragging = false;
+    this.#trackHorz = this.querySelector<HTMLElement>('.evo-scroll-track-horz');
+    this.#thumbHorz = this.querySelector<HTMLElement>('.evo-scroll-track-horz .evo-scroll-thumb');
+    this.#trackVert = this.querySelector<HTMLElement>('.evo-scroll-track-vert');
+    this.#thumbVert = this.querySelector<HTMLElement>('.evo-scroll-track-vert .evo-scroll-thumb');
+    this.#isDraggingVert = false;
     this.#startY = 0;
     this.#startScrollTop = 0;
 
-    this.#thumb.addEventListener('mousedown', this.#thumbMouseDown.bind(this), { passive: true });
+    this.#thumbVert?.addEventListener('mousedown', this.#thumbMouseDownVert.bind(this));
+    this.#thumbHorz?.addEventListener('mousedown', this.#thumbMouseDownHorz.bind(this));
     this.#content.addEventListener('scroll', this.#scrollContent.bind(this), { passive: true });
+    this.#scrolling = (this.dataset.scrolling as Scrolling) ?? 'vertical';
 
     intersectionObserver.observe(this);
     mutationObserver.observe(this, { attributes: true, childList: true, subtree: true });
 
     window.addEventListener('resize', this.#boundResizeHandler, { passive: true });
+    if (this.#scrolling === 'horizontal') {
+      this.addEventListener('wheel', this.#wheelHorz, { passive: true });
+    }
   }
 
   disconnectedCallback() {
     intersectionObserver.unobserve(this);
-    window.removeEventListener('resize', this.#boundResizeHandler);
+    window.removeEventListener('resize', this.#boundResizeHandler); 
+    this.removeEventListener('wheel', this.#wheelHorz);
   }
 
   get content() {
@@ -153,79 +171,138 @@ export class EvoScrollContainerElement extends HTMLElement implements IEvoScroll
   }
 
   #updateThumbSize() {
-    const scrollHeight = this.#content.scrollHeight - getPaddingY(this.#content);
-    const containerHeight = this.clientHeight - getPaddingY(this);
-    
-    if (scrollHeight <= 0) {
-      this.#thumb.style.height = '20px';
-      // this.#track.style.display = 'none';
-      return;
-    }
-    
-    const visibleRatio = containerHeight / scrollHeight;
-    const thumbHeight = visibleRatio * containerHeight;
-    if (this.#scrollbarSettings.thumbHeight != undefined) {
-      this.#thumb.style.height = `${this.#scrollbarSettings.thumbHeight < 0 ? 0 : this.#scrollbarSettings.thumbHeight > containerHeight ? containerHeight : this.#scrollbarSettings.thumbHeight}px`;
-    } else {
-      this.#thumb.style.height = `${thumbHeight > 20 ? thumbHeight : 20}px`;
+    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 visibleRatioVert = containerHeight / 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';
+      } else {
+        this.#trackVert.style.display = visibleRatioVert < 1 ? 'block' : 'none';
+      }
     }
-    if (this.#scrollbarSettings.trackVisible !== undefined) {
-      this.#track.style.display = this.#scrollbarSettings.trackVisible === true ? 'block' : 'none';
-    } else {
-      this.#track.style.display = visibleRatio < 1 ? 'block' : '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 visibleRatioHorz = containerWidth / 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';
+      } else {
+        this.#trackHorz.style.display = visibleRatioHorz < 1 ? 'block' : 'none';
+      }
     }
-    
   }
 
-  #thumbMouseDown(e: MouseEvent) {
-    this.#mouseupHandler = this.#mouseDetach.bind(this);
-    this.#mousemoveHandler = this.#thumbMouseMove.bind(this);
-    document.addEventListener('mouseup', this.#mouseupHandler, { passive: true });
-    document.addEventListener('dragend', this.#mouseupHandler, { passive: true });
-    document.addEventListener('mousemove', this.#mousemoveHandler, { passive: true });
-    this.#isDragging = true;
+  #thumbMouseDownVert(e: MouseEvent) {
+    e.preventDefault();
+    this.#mouseupHandlerVert = this.#mouseDetachVert.bind(this);
+    this.#mousemoveHandlerVert = this.#thumbMouseMoveVert.bind(this);
+    document.addEventListener('mouseup', this.#mouseupHandlerVert, { passive: true });
+    document.addEventListener('dragend', this.#mouseupHandlerVert, { passive: true });
+    document.addEventListener('mousemove', this.#mousemoveHandlerVert, { passive: true });
+    this.#isDraggingVert = true;
     this.#startY = e.clientY;
     this.#startScrollTop = this.#content.scrollTop;
-    this.#thumb.style.cursor = 'grabbing';
+    this.#thumbVert!.style.cursor = 'grabbing';
   }
 
-  #thumbMouseMove(e: MouseEvent) {
-    if (this.#isDragging) {
+  #thumbMouseMoveVert(e: MouseEvent) {
+    if (this.#isDraggingVert) {
       const deltaY = e.clientY - this.#startY;
-      const thumbTrackHeight = this.clientHeight - this.#thumb.clientHeight;
-      
-      if (thumbTrackHeight <= 0) {
-        return;
-      }
-      
-      const scrollRatio =
-        (this.#content.scrollHeight - this.clientHeight) / thumbTrackHeight;
-      
+      const thumbTrackHeight = this.clientHeight - this.#thumbVert!.clientHeight;
+      if (thumbTrackHeight <= 0) return;
+      const scrollRatio = (this.#content.scrollHeight - this.clientHeight) / thumbTrackHeight;
       this.#content.scrollTop = this.#startScrollTop + deltaY * scrollRatio;
     } else {
-      this.#mouseDetach();
+      this.#mouseDetachVert();
     }
   }
 
-  #mouseDetach() {
-    this.#isDragging = false;
-    this.#thumb.style.cursor = 'grab';
-    document.removeEventListener('mouseup', this.#mouseupHandler);
-    document.removeEventListener('dragend', this.#mouseupHandler);
-    document.removeEventListener('mousemove', this.#mousemoveHandler);
+  #mouseDetachVert() {
+    this.#isDraggingVert = false;
+    this.#thumbVert!.style.cursor = 'grab';
+    document.removeEventListener('mouseup', this.#mouseupHandlerVert);
+    document.removeEventListener('dragend', this.#mouseupHandlerVert);
+    document.removeEventListener('mousemove', this.#mousemoveHandlerVert);
   }
 
-  #scrollContent() {
-    const scrollHeight = this.#content.scrollHeight - getPaddingY(this.#content);
-    const containerHeight = this.clientHeight - getPaddingY(this);
-    const scrollableHeight = scrollHeight - containerHeight;
+  #thumbMouseDownHorz(e: MouseEvent) {
+    e.preventDefault();
+    this.#mouseupHandlerHorz = this.#mouseDetachHorz.bind(this);
+    this.#mousemoveHandlerHorz = this.#thumbMouseMoveHorz.bind(this);
+    document.addEventListener('mouseup', this.#mouseupHandlerHorz, { passive: true });
+    document.addEventListener('dragend', this.#mouseupHandlerHorz, { passive: true });
+    document.addEventListener('mousemove', this.#mousemoveHandlerHorz, { passive: true });
+    this.#isDraggingHorz = true;
+    this.#startX = e.clientX;
+    this.#startScrollLeft = this.#content.scrollLeft;
+    this.#thumbHorz!.style.cursor = 'grabbing';
+  }
 
-    if (scrollableHeight <= 0) {
-      this.#thumb.style.top = '0px';
+  #thumbMouseMoveHorz(e: MouseEvent) {
+    if (this.#isDraggingHorz) {
+      const deltaX = e.clientX - this.#startX;
+      const thumbTrackWidth = this.clientWidth - this.#thumbHorz!.clientWidth;
+      if (thumbTrackWidth <= 0) return;
+      const scrollRatio = (this.#content.scrollWidth - this.clientWidth) / thumbTrackWidth;
+      this.#content.scrollLeft = this.#startScrollLeft + deltaX * scrollRatio;
     } else {
-      const scrollRatio = this.#content.scrollTop / scrollableHeight;
-      const top = scrollRatio * (this.#track.clientHeight - this.#thumb.clientHeight);
-      this.#thumb.style.top = `${top}px`;
+      this.#mouseDetachHorz();
+    }
+  }
+
+  #mouseDetachHorz() {
+    this.#isDraggingHorz = false;
+    this.#thumbHorz!.style.cursor = 'grab';
+    document.removeEventListener('mouseup', this.#mouseupHandlerHorz);
+    document.removeEventListener('dragend', this.#mouseupHandlerHorz);
+    document.removeEventListener('mousemove', this.#mousemoveHandlerHorz);
+  }
+
+  #wheelHorz(e: WheelEvent) {
+    this.scrollLeft += e.deltaY;
+  }
+
+  #scrollContent() {
+    if (this.#thumbVert && this.#trackVert) {
+      const scrollHeight = this.#content.scrollHeight - getPaddingY(this.#content);
+      const containerHeight = this.clientHeight - getPaddingY(this);
+      const scrollableHeight = scrollHeight - containerHeight;
+      if (scrollableHeight <= 0) {
+        this.#thumbVert.style.top = '0px';
+      } else {
+        const scrollRatio = this.#content.scrollTop / scrollableHeight;
+        const maxTop = this.#trackVert.clientHeight - this.#thumbVert.clientHeight;
+        const top = Math.max(0, Math.min(scrollRatio * maxTop, maxTop));
+        this.#thumbVert.style.top = `${top}px`;
+      }
+    }
+
+    if (this.#thumbHorz && this.#trackHorz) {
+      const scrollWidth = this.#content.scrollWidth - getPaddingX(this.#content);
+      const containerWidth = this.clientWidth - getPaddingX(this);
+      const scrollableWidth = scrollWidth - containerWidth;
+      if (scrollableWidth <= 0) {
+        this.#thumbHorz.style.left = '0px';
+      } else {
+        const scrollRatio = this.#content.scrollLeft / scrollableWidth;
+        const maxLeft = this.#trackHorz.clientWidth - this.#thumbHorz.clientWidth;
+        const left = Math.max(0, Math.min(scrollRatio * maxLeft, maxLeft));
+        this.#thumbHorz.style.left = `${left}px`;
+      }
     }
   }
 }
@@ -291,3 +368,8 @@ function getPaddingY(content: HTMLElement): number {
   const style = getComputedStyle(content);
   return parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);
 }
+
+function getPaddingX(content: HTMLElement): number {
+  const style = getComputedStyle(content);
+  return parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
+}