Question

Is there a way to mimic the way the scroll works on a text input with readonly=”readonly”. The way it works is that if the text is longer than the box, you can highlight and scroll to see all of it without there being a scroll bar.

I would like to have this same effect but within a paragraph or heading inside of a div. Is there anyway to do this, or should I just use a text input with readonly=”readonly” and style it to look like my heading?

Thanks!

Answer 1

It is possible, with an extra container and very little Javascript.

Add a container div around the element you want to scroll without scrollbars. And with Javascript, calculate the scrollHeight (height without scrollbars) of your element, and set it to your container’s height.

Working example : http://jsfiddle.net/keune/Cb4jw/1/

But as you mentioned, i think styling a readonly input to look like a heading would be a cleaner solution and work without javascript. Your choice.