Distinguishing between human and programmatic scrolling

so I want to show you something cool today uh I was working on my little uh simulated chat here and um last week I did some animation with it this week I was working on getting it to automatically scroll when new text came in and I found an event that I didn't know about that was really helpful so I wanted to show you that in this video uh let's come over here and just basically code this from scratch and I'll kind of share with you where I got caught up so if I wanted to autoc scroll this

uh my strategy is going to be to use a resize Observer and I actually have a use on resize hook right here this I can share the code for but it basically sets up an observer for a resize Observer and so the strategy is going to be you know just basically keep an eye on this content this kind of inner content here and uh whenever it changes size that's when we know whether to scroll or

not so uh this guy is height 80 and this inner P tag you can see right here is updating so uh that's when we know we need to scroll when that changes and a resize Observer is perfect for that so the way this hook Works um is we pass in a ref and we get a call back whenever that happens so let's go ahead and pass in a ref we want this ref to be on our changing element this P

tag so we'll make something called um a Content ref since this is going to be the content we'll slap this on the P tag actually I think we can just put it on this outside div and now if I pass in the content ref we should get a call back every time this resizes so let's go ahead and default this to

null so typescript knows we're doing the right thing here let's pop open the console and now you can see I get resize every time this changes so pretty cool pretty easy and um now that we know uh when the inner content is changing we can actually scroll this scrollable div right here so if we find this the one with overflow scroll on it the way we can actually change this

is with the scroll top property so right now it's 92 when I'm scrolled up here it's zero and when it's at the bottom it's 120 and the way we can calculate that is using the scroll height which is 440 and if I find this element we're going to see um this the inner child is 440 so that's where it's coming from it's basically the height of the children um but the scroll height is

not 440 it's 120 where does that come from well we need to subtract off the height of the actual scrollable container which is client height so we can see how far down to scroll it if we say scroll height minus client height and now uh that's 120 so if we set scroll top to zero that's the top if we set it to 120 that's the bottom so let's just basically do exactly this this is going to be the max scroll height

and instead of uh this we want our scrollable container right here so we need another ref for this so let's make a scrollable ref and we'll call that scrollable ref now we can get the scrollable element with the scrollable ref. Curren and if we don't have that let's just go ahead and return and we'll replace this right here