Below I have a small js based simulator for different command tools. The user enters a command, and if it's correct, it displays it at the top. For future uses, I need to make sure it can handle as many commands as needed before completing the simulation. This means inevitably I'll have content overflowing.
My solution now was setting the Y overflow to auto, adding the scrollbar, and a little jquery to keep the client scrolled to the bottom of the output div at all times, because the content is being appended below the previous content each time a user enters the correct command.
Right now this works fine, except I would like to remove the scroll bar. I'd like the content to behave in the same way overflow auto would and does, except without a visible scrollbar.
I know I can do some css tricks to put some sort of black over the scrollbar with a z-index, but I'd like to avoid that if possible.
All you need is to add
overflow: hidden to your container and scroll it once content is loaded:
div.scrollTop = div.scrollHeight;