How hard would it be to support absolutely positioned elements?

[ndbroadbent]

The native webkit scrollIntoViewIfNeeded supports this, and I need this for my app. If it's too hard to implement here, are there any alternatives?

[ndbroadbent]

dom-scroll-into-view handles absolute positions correctly, so I switched to that library

[stipsan]

Glad you found a package that works for you 👍

I'm reopening this though as I think this is something this package should support as well 🙂

[aroc]

This library doesn't handle it well, but you can do your own check reasonably easy here before calling the function. Ex:

function findScrollableParent(element: HTMLElement) {
  while (element) {
    if (element === document.body) {
      // Reached the body element, no scrollable parent found
      return null;
    }

    const overflowY = window.getComputedStyle(element).overflowY;
    const isScrollable = overflowY === "auto" || overflowY === "scroll";
    const canScroll =
      isScrollable && element.scrollHeight > element.clientHeight;

    if (canScroll) {
      return element;
    }

    element = element.parentElement as HTMLElement;
  }
  return null;
}

function isElementVisible(elementSelector: string) {
  const element = document.querySelector(elementSelector);
  if (!element) {
    return false; // Not found
  }
  const scrollableParent = findScrollableParent(element as HTMLElement);

  if (!scrollableParent) {
    return false; // No scrollable parent found
  }

  const elRect = element.getBoundingClientRect();
  const parentRect = scrollableParent.getBoundingClientRect();

  // Check if the element is within the visible area of the parent
  const isVisible =
    elRect.top >= parentRect.top &&
    elRect.left >= parentRect.left &&
    elRect.bottom <= parentRect.bottom &&
    elRect.right <= parentRect.right;

  return isVisible;
}

// Usage
const el = document.getElementById(id);

  // Usage example
  const isVisible = isElementVisible(`#${id}`);
  if (!isVisible) {
    scrollIntoView(el, {
      behavior: "smooth",
      block: "center",
      inline: "center",
      scrollMode: "if-needed",
    });
  }