Typescript active element focus

Question

I have a section with a class name 'concert-landing-synopsis' and on a scroll, I want to check if the section is on focus and add a class name to a different element. I have looked through some of the solutions here the focused variable is always false

let activateElement = document.getElementsByClassName("concert-landing-synopsis");

if (activateElement.length > 0) {
  window.onscroll = _ => {
    let isFocused = (document.activeElement === activateElement[0]);

    if (isFocused) {
      console.log("On focus");
    }
  };
}

The view is something like this

<section class="concert-landing-details">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

Answer 1

You need to loop through all the elements returned by document.getElementsByClassName('concert-landing-synopsis') , as in

document.getElementsByClassName('concert-landing-synopsis').forEach((el) => {
   const isFocused = (document.activeElement === el);
});