javascript スクロール時に指定した要素を通過した際に処理を実行する

<style>
  .box {
    width: 500px;
    height: 500px;
    margin: 50px;
    background-color: aqua;
  }
</style>

<div id="one" class="box">one</div>
<div id="two" class="box">two</div>
<div id="three" class="box">three</div>

<script>

let flg = false;

window.addEventListener('scroll', function() {

  // 画面上部からの要素の相対位置を取得
  pos = document.getElementById('two').getBoundingClientRect().top;
  console.log(`現状の上部からの高さ${pos}`);

  // 現在のブラウザの高さ
  console.log(`現在のブラウザの高さ${window.innerHeight}`);

  if (pos <= window.innerHeight && flg !== true) {
    flg = true;
    console.log('通過');
  }

});

</script>