Skip to content

⬅️ Back to Table of Contents

📄 scroll-into

📊 Analysis Summary

Metric Count
🔧 Functions 1

📚 Table of Contents

🛠️ File Location:

📂 packages/website/src/components/lib/scroll-into.ts

Functions

scrollIntoViewIfNeeded(target: Element): void

Scroll the target element into view if it is not already visible.

Raw JSDoc 
/**
 * Scroll the target element into view if it is not already visible.
 */

Calls:

  • target.getBoundingClientRect
  • target.scrollIntoView

Internal Comments: 

// Target is outside the viewport from the bottom
// Target is outside the view from the top

Code 
export function scrollIntoViewIfNeeded(target: Element): void {
  const rect = target.getBoundingClientRect();
  const isBelow = rect.top < 0;
  const isAbove = rect.bottom > window.innerHeight;
  if ((isAbove && isBelow) || rect.height > window.innerHeight) {
    target.scrollIntoView({
      behavior: 'smooth',
      block: 'start',
      inline: 'start',
    });
    return;
  }
  // Target is outside the viewport from the bottom
  if (isAbove) {
    target.scrollIntoView({
      behavior: 'smooth',
      block: 'center',
      inline: 'center',
    });
    return;
  }
  // Target is outside the view from the top
  if (isBelow) {
    target.scrollIntoView({
      behavior: 'smooth',
      block: 'center',
      inline: 'center',
    });
    return;
  }
}

Generated by Syntax Scribe