JS監(jiān)聽scroll實(shí)現(xiàn)下拉加載的幾個(gè)疑問

通過監(jiān)聽scroll事件，判斷容器的scrollTop、clientHeight和scrollHeight實(shí)現(xiàn)了下拉觸底自動(dòng)加載的效果，但是這種情況必須是子元素高度的總和大于父容器的高度時(shí)，也就是說父容器要有滾動(dòng)條時(shí)才會(huì)生效。
但是存在這么一種情況：頁面初始時(shí)子元素高度的總和與父容器的高度相同或者子元素高度綜合小于父容器高度時(shí)，不會(huì)出現(xiàn)滾動(dòng)條，導(dǎo)致不會(huì)觸發(fā)scroll事件。請(qǐng)問這種情況如何處理？
以下是我的代碼：
<style>
  #container {
    height: 200px;
    overflow-x: hidden;
  }
  .ele {
    height: 50px;
    width: 100%;
  }
</style>

<script>
  let container = document.getElementById("container");
  container.onscroll = () => {
    if (container.scrollTop + container.clientHeight >= container.scrollHeight) {
            console.log('reached!');
        }
  }
</script>

<!-- 當(dāng)子元素高度總和與父容器高度相同或者小于時(shí)，無法觸發(fā)scroll -->
<div id="container">
  <div class="ele">item1</div>
  <div class="ele">item2</div>
  <div class="ele">item3</div>
  <div class="ele">item4</div>
</div>
<!-- 當(dāng)子元素高度總和大于父容器高度時(shí)，可以觸發(fā)scroll -->
<div id="container">
  <div class="ele">item1</div>
  <div class="ele">item2</div>
  <div class="ele">item3</div>
  <div class="ele">item4</div>
  <div class="ele">item5</div>
</div>
這種情況挺常見的，還請(qǐng)大佬不吝賜教！