Chrome demonstrates strange scrolling behavior after adding div to page

I have a web page that loads comments from a MySQL table by adding "comment" marks one at a time in the collective parent div "comments". However, this caused some scrolling issues in Google Chrome. I tested this behavior in Firefox and it works fine.

If I refresh the page somewhere above where the bottom of the page is without any comment separators, the refresh is fine and the scrollbar is where it should be.

However, if I refresh the page after scrolling past the first added comment div, the page sets the vertical scroll position to where it would be if no comments were added at all. I cannot scroll the mouse wheel as if Chrome thought the divs were never added even though they are clearly there and the scrollbar shows they are there.

If I scroll one tick on my scroll wheel from there, the page scrolls up to where the scroll bar scrolls one tick from the actual bottom of the page, with all added comments added. It is, like a scrollbar, in two places at the same time, the "bottom of the page" if no comments have been added, but the actual bottom of the page with comments added. Very confusing.

Scrolling by clicking and dragging on the scrollbar works just fine. Likewise, scrolling "up" and then scrolling up or down from there also works. I just can't scroll down without scrolling up first or starting refreshing the page at a point other than one at the bottom of the bottom of the page without adding comments.

I'm not really sure what's going on or how to fix this, and the only mention of it I've seen on the internet has no explanation or solution. Will anyone know what is happening, why this is happening, and how to prevent it?