Preventing Text From Reaching The Right Side Of The Textarea, Reserving Space For Vertical Scroll Bar, Which Will Not Move The Text When Appears

I have a textarea which when typing some text into, after so many line you get a vertical scroll bar which moves text a bit to the left because it needs space for itself. How can I

Solution 1:

Not an exact answer, but you might want to go completely scrollbar-less - Autosize jQuery

Solution 2:

This isn't exactly an answer to your question, but you could force the scrollbar to be there always using css:

.mytextarea {
    overflow-y: scroll; 
}

This is not fully cross browser compatible as it does not work with some older browsers, but it is pretty good.

You could optionally always show both scrollbars, but I find that tacky:

.mytextarea {
    overflow: scroll;   
}

Solution 3:

Make a <textarea> inside of a div. Have the div set to overflow:auto, and make the textarea's width about 15px smaller than that of the div. Use some javascript magic to change the height of the textarea as the user types in it, so that it gets taller (plenty of sites do this so it's definitely doable.) Once the textarea is taller than the div, the scrollbar appears in the div without resizing the textarea. Scrolling should behave fine because your focus is still within the div you're scrolling.

I feel like there's a better way to word this answer but it should work.