template/frontend/protos/scroll.js

  const scrollThrottleCallback = (callback, timeout) => {
    let wait = false;
    return () => {
      if (wait) return;
      callback.call();
      wait = true;
      setTimeout(() => { wait = false; }, timeout);
    };
  };

  
  function getAbsolutePosition(element) {
    const rect = element.getBoundingClientRect();
    
    return {
        top: rect.top + window.scrollY,    // Add vertical scroll
        left: rect.left + window.scrollX,  // Add horizontal scroll
        bottom: rect.bottom + window.scrollY,
        right: rect.right + window.scrollX
    };
  }
  function getPositionRelativeToParent(element) {
    const parent = element.parentElement;
    const parentRect = parent.getBoundingClientRect();
    const elementRect = element.getBoundingClientRect();
    
    return {
        top: elementRect.top - parentRect.top,
        left: elementRect.left - parentRect.left,
        bottom: elementRect.bottom - parentRect.top,
        right: elementRect.right - parentRect.left
    };
  }

  function smoothScrollToElement(element, offset = 0) {
    const elementPosition = getAbsolutePosition(element);
    const targetScroll = elementPosition.top - offset;
    
    // Smooth scroll with animation
    window.scrollTo({
        top: targetScroll,
        behavior: 'smooth'
    });
  }

  // Enhanced version with progress callback
  function scrollToElementWithProgress(element, offset = 0, onProgress) {
    const start = window.scrollY;
    const elementPosition = getAbsolutePosition(element);
    const target = elementPosition.top - offset;
    const distance = target - start;
    const duration = 1000; // ms
    const startTime = performance.now();
    
    function animate(currentTime) {
        const elapsed = currentTime - startTime;
        const progress = Math.min(elapsed / duration, 1);
        
        // Easing function for smooth animation
        const easeProgress = 1 - Math.pow(1 - progress, 3);
        
        const currentPosition = start + (distance * easeProgress);
        window.scrollTo(0, currentPosition);
        
        if (onProgress) {
            onProgress(progress);
        }
        
        if (progress < 1) {
            requestAnimationFrame(animate);
        }
    }
    
    requestAnimationFrame(animate);
  }

  function scrollToElement(elementSelector) {
    const element = document.querySelector(elementSelector);
    if (element) {
      const methode=1;
      switch (methode) {
        case 1 :
          element.scrollIntoView();
          break;
        case 2 :
          smoothScrollToElement(element);
          break;
        case 3 :
          scrollToElementWithProgress(element, 0, (progress) => {
            logMsg('htmlElement',`Scroll progress: ${Math.round(progress * 100)}%`);
          });
          break;
      }
    }
    logMsg('htmlElement','scrollTo '+elementSelector);
  }

  function getAbsolutePosition(element) {
    const rect = element.getBoundingClientRect();
    
    return {
        top: rect.top + window.scrollY,    // Add vertical scroll
        left: rect.left + window.scrollX,  // Add horizontal scroll
        bottom: rect.bottom + window.scrollY,
        right: rect.right + window.scrollX
    };
  }
  function getPositionRelativeToParent(element) {
    const parent = element.parentElement;
    const parentRect = parent.getBoundingClientRect();
    const elementRect = element.getBoundingClientRect();
    
    return {
        top: elementRect.top - parentRect.top,
        left: elementRect.left - parentRect.left,
        bottom: elementRect.bottom - parentRect.top,
        right: elementRect.right - parentRect.left
    };
  }

  function smoothScrollToElement(element, offset = 0) {
    const elementPosition = getAbsolutePosition(element);
    const targetScroll = elementPosition.top - offset;
    
    // Smooth scroll with animation
    window.scrollTo({
        top: targetScroll,
        behavior: 'smooth'
    });
  }

  // Enhanced version with progress callback
  function scrollToElementWithProgress(element, offset = 0, onProgress) {
    const start = window.scrollY;
    const elementPosition = getAbsolutePosition(element);
    const target = elementPosition.top - offset;
    const distance = target - start;
    const duration = 1000; // ms
    const startTime = performance.now();
    
    function animate(currentTime) {
        const elapsed = currentTime - startTime;
        const progress = Math.min(elapsed / duration, 1);
        
        // Easing function for smooth animation
        const easeProgress = 1 - Math.pow(1 - progress, 3);
        
        const currentPosition = start + (distance * easeProgress);
        window.scrollTo(0, currentPosition);
        
        if (onProgress) {
            onProgress(progress);
        }
        
        if (progress < 1) {
            requestAnimationFrame(animate);
        }
    }
    
    requestAnimationFrame(animate);
  }

  function scrollToElement(elementSelector) {
    const element = document.querySelector(elementSelector);
    if (element) {
      const methode=1;
      switch (methode) {
        case 1 :
          element.scrollIntoView();
          break;
        case 2 :
          smoothScrollToElement(element);
          break;
        case 3 :
          scrollToElementWithProgress(element, 0, (progress) => {
            logMsg('htmlElement',`Scroll progress: ${Math.round(progress * 100)}%`);
          });
          break;
      }
    }
    logMsg('htmlElement','scrollTo '+elementSelector);
  }