title: How to keep a div scrolled to the bottom as HTML content is appended to it via jquery, but hide the scroll bar?
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p><img src="https://i.stack.imgur.com/pgpr2.png" alt="enter image description here"></p>
  
  <p>Is there a way I could do this with jquery or javascript?</p>
  
  <p>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.</p>