How to setup auto-scroll

This is my first article here on dev.to, and hopefully, my first of many to come. The inspiration for this came from a Udemy Node course I was taking. Just so we are on the same footing, I would like to put it out there that I'm not in any way an expert programmer, and there might be a more efficient approach, but this is how I tackled the problem. The logic behind this process can be used in other situations, frameworks, languages, and stacks. This post, however, assumes you have some basic knowledge of HTML, CSS, and Javascript. You can take a look at my code here.

What exactly is auto-scroll?

If you've used messaging web apps on your PC (or even on your phone), do you notice how when messages come in, the screen automatically moves you towards the newer messages so you can read on? Well, that's basically auto scroll.
However, it gets annoying really quickly when you're trying to read earlier messages, but every time a new message gets received, it pushes you all the way down and you have to manually scroll back up to find the message you were reading. Yeah...that's messy. In this article, it's also accounted for.
Basically, we want something that scrolls for us when we are ready, or at the very least, something that scrolls, but still leaves the content we are viewing on the screen. The latter is more readily implementable.

Here's a demo incase you want a better idea of what I'm saying. Play around with both options, and notice the scrolling activity in each.

Prerequisite properties

You'll need to know the meaning of a couple of properties that will be used in the code. You can always come back to this if you forget their meanings when you see them.

1. offsetHeight: This is an HTML DOM property, which is used by Javascript. It returns the height of an element in pixels. It includes the height of visible content, border, padding, and scrollbar (if present). From the definition, we can tell that it does not include margins. Source

2. scrollHeight: This is a property that returns the height of an element including padding, but excluding borders, scrollbars, or margins. It returns the entire height of an element including content that isn't currently in view. Source

3. scrollTop: This is a property that gets or sets the number of pixels that an element's content in scrolled vertically. It's value is a measurement of the distance from the element's top to its topmost visible content. Source

Steps

• About the first thing we need to do is to create a function in our JS file. We can call it autoScroll. After creating that function, we call it in the event Listener for whatever button is supposed to trigger the population of data or messages on the display.

• The default behavior of the display is to not autoScroll, so when a new message comes in, it'll be pushed to the bottom by default. We need to get access to it and its dimensions so we can make necessary tweaks. We will use the lastElementChild property on its parent to get a reference to it, and then we will store it in a variable, let's say lastChild.

• We will then use the global method getComputedStyle() taking the lastChild variable as its only argument. This will give us all its properties. From here, it becomes easy to get the height dimensions by adding the values returned from the offsetHeight, marginBottom, and marginTop properties on the lastChild variable. The reason for the marginBotton and marginTop is because from the definition of offsetHeight earlier, it doesn't account for margins.

• We can parse this summation with parseInt() by passing it as an expression, and store in a variable. In my repo, I used overallHeightOfLastMessage. This covers everything about the size of the newest message.

• The next thing to note is the overall height of the display area. For this, we will use the scrollHeight property on the display area, and store the output in a variable. We can use something like contentAreaTotalHeight for ease of memory.

• Relax, we are almost done. What we need to do next is to find out how far down we are. By this, I mean how much in total that we have scrolled, relative to the height of the entire display area. For this, we use the scrollTop property on the display area, and add it to the said display area's offsetHeight. We should store this in a variable of our choosing. I used scrolledHeightPlusDisplayHeight, again, for ease of memory.

• And finally, we do a little math. Since we only want to scroll when what is currently in view is close to the end of the display area, it means that unless we are there, scrolling shouldn't happen. We can represent this in a conditional statement. If the condition is met, then we set the scrolling ourselves. Remember again from the definition of scrollTop, just what it can do.
  

if (contentAreaTotalHeight - overallHeightOfLastMessage <= (scrolledHeightPlusDisplayHeight)) {
        contentContainer.scrollTop = contentAreaTotalHeight
    }

Conclusion

It does a good job at it. Feel free to modify the code here and tweak it as you please in your own projects. With this article and the code comments, it'll be more straightforward. Remember to give it time, and think about how the algorithm works. Above all, having a deeper understanding of it will help you the most.
PS: In the code, the dollar sign symbol ("$") was used as part of a naming convention for variables that represented html elements.