simplify infinate scroller

webpage/infiniteScroller.ts

@@ -8,7 +8,6 @@ class InfiniteScroller{
 	private readonly maxDist=6000;
 	HTMLElements:[HTMLElement,string][]=[];
 	div:HTMLDivElement|null;
-	scroll:HTMLDivElement|null;
 	constructor(getIDFromOffset:InfiniteScroller["getIDFromOffset"],getHTMLFromID:InfiniteScroller["getHTMLFromID"],destroyFromID:InfiniteScroller["destroyFromID"],reachesBottom:InfiniteScroller["reachesBottom"]=()=>{}){
 		this.getIDFromOffset=getIDFromOffset;
 		this.getHTMLFromID=getHTMLFromID;
@@ -17,23 +16,14 @@ class InfiniteScroller{
 	}
 	timeout:NodeJS.Timeout|null;
 	async getDiv(initialId:string,bottom=true):Promise<HTMLDivElement>{
-		const div=document.createElement("div");
-		div.classList.add("messagecontainer");
 		//div.classList.add("flexttb")
 		const scroll=document.createElement("div");
 		scroll.classList.add("flexttb","scroller");
-		div.appendChild(scroll);
-		this.div=div;
 		this.beenloaded=false;
 		//this.interval=setInterval(this.updatestuff.bind(this,true),100);
 
-		this.scroll=scroll;
+		this.div=scroll;
 		this.div.addEventListener("scroll",_=>{
-			this.checkscroll();
-			if(this.scroll)this.scrollTop=this.scroll.scrollTop;
-			this.watchForChange();
-		});
-		this.scroll.addEventListener("scroll",_=>{
 			this.checkscroll();
 			if(this.timeout===null){
 				this.timeout=setTimeout(this.updatestuff.bind(this),300);
@@ -47,14 +37,14 @@ class InfiniteScroller{
 				this.checkscroll();
 				const func=this.snapBottom();
 				this.updatestuff();
-				const change=oldheight-div.offsetHeight;
-				if(change>0&&this.scroll){
-					this.scroll.scrollTop+=change;
+				const change=oldheight-scroll.offsetHeight;
+				if(change>0&&this.div){
+					this.div.scrollTop+=change;
 				}
-				oldheight=div.offsetHeight;
+				oldheight=scroll.offsetHeight;
 				this.watchForChange();
 				func();
-			}).observe(div);
+			}).observe(scroll);
 		}
 		new ResizeObserver(this.watchForChange.bind(this)).observe(scroll);
 
@@ -64,7 +54,7 @@ class InfiniteScroller{
 			this.updatestuff();
 			this.beenloaded=true;
 		});
-		return div;
+		return scroll;
 	}
 	beenloaded=false;
 	scrollBottom:number;
@@ -72,20 +62,19 @@ class InfiniteScroller{
 	needsupdate=true;
 	averageheight:number=60;
 	checkscroll(){
-		if(this.beenloaded&&this.scroll&&!document.body.contains(this.scroll)){
-			this.scroll=null;
+		if(this.beenloaded&&this.div&&!document.body.contains(this.div)){
 			this.div=null;
 		}
 	}
 	async updatestuff(){
 		this.timeout=null;
-		if(!this.scroll)return;
-		this.scrollBottom = this.scroll.scrollHeight - this.scroll.scrollTop - this.scroll.clientHeight;
-		this.averageheight=this.scroll.scrollHeight/this.HTMLElements.length;
+		if(!this.div)return;
+		this.scrollBottom = this.div.scrollHeight - this.div.scrollTop - this.div.clientHeight;
+		this.averageheight=this.div.scrollHeight/this.HTMLElements.length;
 		if(this.averageheight<10){
 			this.averageheight=60;
 		}
-		this.scrollTop=this.scroll.scrollTop;
+		this.scrollTop=this.div.scrollTop;
 		if(!this.scrollBottom && !await this.watchForChange()){
 			this.reachesBottom();
 		}
@@ -96,9 +85,9 @@ class InfiniteScroller{
 		//this.watchForChange();
 	}
 	async firstElement(id:string){
-		if(!this.scroll)return;
+		if(!this.div)return;
 		const html=await this.getHTMLFromID(id);
-		this.scroll.appendChild(html);
+		this.div.appendChild(html);
 		this.HTMLElements.push([html,id]);
 	}
 	currrunning:boolean=false;
@@ -111,13 +100,13 @@ class InfiniteScroller{
 	snapBottom(){
 		const scrollBottom=this.scrollBottom;
 		return()=>{
-			if(this.scroll&&scrollBottom<10){
-				this.scroll.scrollTop=this.scroll.scrollHeight+20;
+			if(this.div&&scrollBottom<10){
+				this.div.scrollTop=this.div.scrollHeight+20;
 			}
 		};
 	}
 	private async watchForTop(already=false,fragement=new DocumentFragment()):Promise<boolean>{
-		if(!this.scroll)return false;
+		if(!this.div)return false;
 		try{
 			let again=false;
 			if(this.scrollTop<(already?this.fillDist:this.minDist)){
@@ -157,16 +146,16 @@ class InfiniteScroller{
 			return again;
 		}finally{
 			if(!already){
-				if(this.scroll.scrollTop===0){
+				if(this.div.scrollTop===0){
 					this.scrollTop=1;
-					this.scroll.scrollTop=10;
+					this.div.scrollTop=10;
 				}
-				this.scroll.prepend(fragement,fragement);
+				this.div.prepend(fragement,fragement);
 			}
 		}
 	}
 	async watchForBottom(already=false,fragement=new DocumentFragment()):Promise<boolean>{
-		if(!this.scroll)return false;
+		if(!this.div)return false;
 		try{
 			let again=false;
 			const scrollBottom = this.scrollBottom;
@@ -200,9 +189,9 @@ class InfiniteScroller{
 			return again;
 		}finally{
 			if(!already){
-				this.scroll.append(fragement);
+				this.div.append(fragement);
 				if(this.scrollBottom<30){
-					this.scroll.scrollTop=this.scroll.scrollHeight;
+					this.div.scrollTop=this.div.scrollHeight;
 				}
 			}
 		}
@@ -300,7 +289,6 @@ class InfiniteScroller{
 		if(this.div){
 			this.div.remove();
 		}
-		this.scroll=null;
 		this.div=null;
 	}
 }

webpage/message.ts

@@ -291,8 +291,8 @@ class Message extends SnowFlake{
 							next.generateMessage();
 							next=this.channel.messages.get(this.channel.idToNext.get(next.id) as string);
 						}
-						if(this.channel.infinite.scroll&&scroll){
-							this.channel.infinite.scroll.scrollTop=scroll;
+						if(this.channel.infinite.div&&scroll){
+							this.channel.infinite.div.scrollTop=scroll;
 						}
 					};
 				}
@@ -323,9 +323,9 @@ class Message extends SnowFlake{
 							next=this.channel.messages.get(this.channel.idToNext.get(next.id) as string);
 							console.log("loopy");
 						}
-						if(this.channel.infinite.scroll&&scroll){
+						if(this.channel.infinite.div&&scroll){
 							func();
-							this.channel.infinite.scroll.scrollTop=scroll;
+							this.channel.infinite.div.scrollTop=scroll;
 						}
 					};
 					div.appendChild(build);

webpage/style.css

@@ -1523,7 +1523,6 @@ span {
 }
 .scroller{
 	padding-bottom: .2in;
-	flex-shrink: 0;
 	flex-grow: 0;
 }
 .suberror{