问题
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 reserve that area on the right side of textarea where the scroll bar will appear so that nothing will be written there?
I have tried applying padding-right to textarea but it moves the scroll bar itself to the left.
回答1:
Not an exact answer, but you might want to go completely scrollbar-less - Autosize jQuery
回答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;
}
回答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.
来源：https://stackoverflow.com/questions/8067169/preventing-text-from-reaching-the-right-side-of-the-textarea-reserving-space-fo