getBoundingClientRect scroll issue

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <h1>getBoundingClientRect scroll issue</h1>
    
    <div id="viewport">
      <p id="test">1</p>
      <p>2</p>
      <p>3</p>
      <p>4</p>
      <p>5</p>
      <p>6</p>
      <p>7</p>
      <p>8</p>
      <p>9</p>
      <p>10</p>
    </div>
    
    <script src="script.js"></script>
  </body>

</html>

// Code goes here

const viewport = document.getElementById('viewport');
const test = document.getElementById('test');

const scrollHandler = () => {
  setTimeout(() => {
    const params = test.getBoundingClientRect();
    const top = params.top;
    console.log(top);
    console.log('...');
  });
};

viewport.addEventListener('scroll', scrollHandler);

/* Styles go here */


#viewport {
  overflow-y: scroll;
  height: 200px;
}

#viewport p {
  margin: 0;
  padding: 0;
  height: 50px;
}