判断是否滚动到底部的方法当整个window都在滚动时当div内在滚动时聊天记录式向上滚动页面加载完后拉至底部当滚动到顶部

当整个window都在滚动时

window.addEventListener("scroll", function() { 
    if ((window.innerHeight + $(window).scrollTop()) == document.documentElement.offsetHeight) {
     alert('bottom')
   } 
})

当div内在滚动时

document.querySelector("#element").addEventListener("scroll",()=>{
  var elem = $("#element");

  if( (elem[0].scrollHeight - elem.scrollTop()) <= elem.outerHeight() ){
      alert('bottom)
  }
  
})

聊天记录式向上滚动

页面加载完后拉至底部

document.querySelector("#container").scrollTo(0,$('#container')[0].scrollHeight - $('#container').outerHeight());

当滚动到顶部时，触发js，加载之后的页面

document.querySelector("#container").addEventListener("scroll",()=>{
    var elem = $("#container");
    if( elem.scrollTop() == 0 ){
        //xxxxxxxxxxxx
    }
})

解决滚动条会跑到顶部的问题

<div id="container" style="width: 7.5rem; height: 100%;background: #FAF3D9;opacity:0;">
    <ol id="message-container" style="display: flex;flex-direction: column;width: 7.5rem;align-items: center;justify-content: flex-end;padding-bottom: 1.8rem;padding-top: 0.2rem;">

    </ol>
</div>

     $($("#message-container").children()[0]).addClass("sign");
     var top1 = document.querySelector(".sign").getClientRects()[0].top;
     $("#message-container").prepend($(dom));
     var top2 = document.querySelector(".sign").getClientRects()[0].top;
     var diffTop = top2 - top1;
     $("#container").scrollTop(diffTop);
     //.unreadItem =>message-container 内子元素的class
     $(".unreadItem").removeClass('sign');