通過監(jiān)聽scroll事件，判斷容器的scrollTop、clientHeight和scrollHeight實現(xiàn)了下拉觸底自動加載的效果，但是這種情況必須是子元素高度的總和大于父容器的高度時，也就是說父容器要有滾動條時才會生效。
但是存在這么一種情況：頁面初始時子元素高度的總和與父容器的高度相同或者子元素高度綜合小于父容器高度時，不會出現(xiàn)滾動條，導(dǎo)致不會觸發(fā)scroll事件。請問這種情況如何處理？
以下是我的代碼：
<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)子元素高度總和與父容器高度相同或者小于時，無法觸發(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)子元素高度總和大于父容器高度時，可以觸發(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>
這種情況挺常見的，還請大佬不吝賜教！