sfp_front_vue_alugap_owner/src/composables/useScroll.js

import { unref } from "vue";

export const useScroll = () => {
  /**
   * Scrolls to a specific component within a scroll container
   * @param {Ref<Component>} targetRef - Reference to the component to scroll to
   * @param {Ref<Component>} containerRef - Reference to the Quasar ScrollArea component
   * @param {Object} options - Scroll options
   * @param {number} options.offset - Offset from the top in pixels (default: 50)
   * @param {number} options.duration - Animation duration in milliseconds (default: 150)
   * @returns {boolean} - Whether the scroll was successful
   */
  const scrollToComponent = (targetRef, containerRef, options = {}) => {
    const { offset = 50, duration = 150 } = options;

    const target = unref(targetRef);
    const container = unref(containerRef);

    const targetElement = target?.$el;

    const containerElement = container?.$el;

    if (!targetElement || !containerElement) {
      console.warn("useScroll: Target or container element not found");

      return false;
    }

    try {
      let currentElement = targetElement;

      let offsetTop = 0;

      // Calculate total offset up to the scroll container
      while (currentElement && currentElement !== containerElement) {
        offsetTop += currentElement.offsetTop;

        currentElement = currentElement.offsetParent;
      }

      if (!currentElement) {
        console.warn("useScroll: Target is not a child of the container");

        return false;
      }

      const targetPosition = Math.max(0, offsetTop - offset);

      container.setScrollPosition("vertical", targetPosition, duration);

      return true;
    } catch (error) {
      console.error("useScroll: Error while scrolling", error);
      return false;
    }
  };

  return {
    scrollToComponent,
  };
};