title: Angular, detect which element the current screen is sliding on
body: <p>Angular <code>@HostListener</code> can detect mouse movement.But I want to be able to identify the interval of the element where I ’m sliding.</p>
  
  <p>For example:</p>
  
  <p>Component:</p>
  
  <pre><code> @HostListener('window:scroll', ['$event']) 
        onScroll(event) {
        console.log(event);
        //When the mouse is scrolled, identify which element is currently displayed on the browser window, A or B or C
        //element A,B,C height is not fixed
        }
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>#a,#b,#c {
   width: 100%;
  }
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="a" (scroll)="onScroll($event)"&gt;
      Block A
        .
        .
        (more element)
      &lt;/div&gt;
      &lt;div id="b" (scroll)="onScroll($event)"&gt;
      Block B
        .
        .
        (more element)
      &lt;/div&gt;
      &lt;div id="c" (scroll)="onScroll($event)"&gt;
      Block C
        .
        .
        (more element)
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I tried to look at the <code>event</code> parameter, but it is a fairly large object and I cannot find the difference between the different elements:</p>
  
  <p><a href="https://i.stack.imgur.com/6SzMh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6SzMh.png" alt="enter image description here"></a></p>