JS实现一个类似小程序的onReachBottom触底事件

JS如何实现一个类似小程序的onReachBottom触底事件？

Function.prototype.expandMethod = function(name,handle){
	!this.prototype[name] && (this.prototype[name] = handle)
    return this;
}

/**
* 如果是整体页面的滚动，containerEl请指定为html,
 * 其它情况下，为滚动容器本身
 * 
*/
HTMLElement.expandMethod('onReachBottom', function(callback, options = { percent: 1 }) {
   let containerEl = this;
   // 是否是html标签
   const isHtmlTag = (el) => Object.prototype.toString.call(el) === '[object HTMLHtmlElement]'
   const throttle = (handle, wait = 500) => {
       let timer ;
       return function(...args){
           //第一个计时器入栈后，只有等到其被执行完成后，才能执行其他计时器
           if(timer){return}
           timer = setTimeout(()=>{
               handle.call(this,args);
               timer = null;
           }, wait);
       }
   }
   //onReachBottom的副作用，就是load事件会产生的一个影响 
   window.addEventListener('load', () => {
       const reachbottom = new CustomEvent("reachbottom", {
           detail:{
               ...options
           }
       });
       containerEl.addEventListener("reachbottom", (e) => {
           let target = e.target;
           const percent = e.detail.percent;
           if(target === window) {
               target = document.documentElement;
           }
           // 触底条件
           if((target.clientHeight + target.scrollTop) * percent >= target.scrollHeight) {
               typeof callback === 'function' && callback.call(e.target, e);
           }
       });
       (isHtmlTag(containerEl) ? window : containerEl).addEventListener('scroll', throttle((e) => containerEl.dispatchEvent(reachbottom)));
   })
})
// 使用方法：
document.querySelector('#list').onReachBottom((e) => {
	console.log(e)
})