监听滚动条 | scroll事件

实现聊天功能需要设置滚动条置底

滚动条置顶 | 滚动条置底

1. 滚动到底部： 元素滚动条距顶部距离(scrollTop)== 元素滚动条总高度(scrollHeight)

2. 滚动到顶部： 元素滚动条距顶部距离(scrollTop) == 0

监听滚动

var div = document.getElementById('msg_content') as Element;
div.scrollTop = div.scrollHeight
div.addEventListener("scroll",function(e){
      let scrollTop = e?.target?.scrollTop;
      let clientHeight = e?.target?.clientHeight;
      let scrollHeight = e?.target?.scrollHeight;

      // 打印数值
      console.table([
            {
                  label: "距顶部",
                  value: scrollTop,
            },
            {
                  label: "可视区高度",
                  value: clientHeight,
            },
            {
                  label: "滚动条总高度",
                  value: scrollHeight,
            },
            {
                  label: "距顶部 + 可视区高度",
                  value: scrollTop + clientHeight,
            },
      ]);
})