Position on Scroll

position-on-scroll.vue

<template>
  <div>
    <div class="spacer">Scroll Down</div>
    <div data-testid="test-item" class="target-item">
      Target Element
    </div>
    <div class="spacer">Keep Scrolling</div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue';

let targetElement = null;

const updatePosition = () => {
  if (targetElement) {
    const rect = targetElement.getBoundingClientRect();
    const positionFromTop = rect.top + window.scrollY; // Position from the top of the page
    console.log('Position from top:', positionFromTop);
  }
};

const handleScroll = () => {
  updatePosition();
};

onMounted(() => {
  // Select the element using data-testid attribute
  targetElement = document.querySelector('[data-testid="test-item"]');

  if (targetElement) {
    updatePosition(); // Initial position calculation
    window.addEventListener('scroll', handleScroll); // Listen to scroll events
  } else {
    console.error('Element with data-testid="test-item" not found');
  }
});

onUnmounted(() => {
  // Clean up the event listener
  window.removeEventListener('scroll', handleScroll);
});
</script>

<style>
.spacer {
  height: 800px;
  background-color: #f0f0f0;
}

.target-item {
  background-color: lightblue;
  padding: 20px;
  text-align: center;
  margin: 20px 0;
}
</style>