Find div closest to top of viewport

Question

Ok so I have few elements in my app, in this case I just made 3 divs, for the purpose of example. I have array with 3 divs, and my goal is to use forEach method on them and find div that is closest to the top screen of viewport. I used getBoundingClientRect() for this. It returns the value for each div. My question is just, how do I return the closest one to top, which means the one with number closest to 0. In my app of course it's more complicated but it's the same case.

const myDivs = document.getElementsByClassName('test')
const myDivsArr = Array.prototype.slice.call(myDivs);

myDivsArr.forEach(div => (
  console.log(div.getBoundingClientRect().top)
))

<div class="test">
1
</div>
<div class="test">
2
</div>
<div class="test">
3
</div>

Answer 1

See comments inline.

// Don't use `.getElementsByClassName() as it's a 25+ year old
// API that impacts performance.
const myDivs = document.querySelectorAll('.test')

let topMostPosition = 1000000;
let topMostElement = null;
let topPos = null;

myDivs.forEach(function(div){
  // Get the top of the current element
  topPos = div.getBoundingClientRect().top;
  
  // See if the element's top is less than the last top position
  if(topPos < topMostPosition){
    // Set this element's top as the top most position
    topMostPosition =  topPos;
    
    // Set this element as the top most element
    topMostElement = div;
  }
});

console.log("The top most element has text of: " + topMostElement.textContent);

<div class="test">1</div>
<div class="test">2</div>
<div class="test">3</div>