Following up to my previous question (Add a scrollbar to a <textarea>) on how to always see the scrollbar in a <textarea>
, I am now wondering how you would set it so that there is no scrollbar in the <textarea>
, even when the text overflows. To scroll down with this, you would use the arrow keys or the mouse to navigate through the text.
How can I do this?
style="overflow: hidden"
and style="resize: none"
were the ones that did the trick.
I was able to get rid of my scroll bar on the body of text by removing my max-height attribute of my class.
Hide scroll bar for Mozilla.
overflow: -moz-hidden-unscrollable;
Hide scroll bar, but while still being able to scroll using CSS
To hide the scrollbar use -webkit- because it is supported by major browsers (Google Chrome, Safari or newer versions of Opera). There are many other options for the other browsers which are listed below:
-webkit- (Chrome, Safari, newer versions of Opera):
.element::-webkit-scrollbar { width: 0 !important }
-moz- (Firefox):
.element { overflow: -moz-scrollbars-none; }
-ms- (Internet Explorer +10):
.element { -ms-overflow-style: none; }
ref: https://www.geeksforgeeks.org/hide-scroll-bar-but-while-still-being-able-to-scroll-using-css/
Give a class for eg: scroll
to the textarea tag. And in the css add this property -
.scroll::-webkit-scrollbar {
display: none;
}
_x000D_
<textarea class='scroll'></textarea>
_x000D_
It worked for without missing the scroll part
For MS IE 10 you'll probably find you need to do the following:
-ms-overflow-style: none
See the following:
https://msdn.microsoft.com/en-us/library/hh771902(v=vs.85).aspx
Source: Stackoverflow.com