Menu
Community /Pin to ProfileBookmark
Scroll without a scrollbar
Sample form:
[CODE]<!DOCTYPE html>
<html>
<head>
<title></title>
<style type=”text/css”>
* {font:13px arial; color:white;}
body {background:black;}
label {display:inline-block; width:50px;}
input, textarea {margin:0; border:1px solid red; padding:0; background:green;}
textarea {width:300px; height:100px;}
</style>
</head>
<body>
<form action=”#”>
<div><label for=”entry_0″>Name</label><input type=”text” id=”entry_0″></div>
<div><label for=”entry_1″>Email</label><input type=”text” id=”entry_1″></div>
<div><label for=”entry_2″>URL</label><input type=”text” id=”entry_2″></div>
<div id=”parent”><textarea id=”entry_3″></textarea></div>
<div><input type=”submit” value=”Submit”></div>
</form>
</body>
</html>
I’d like to remove/hide the textarea scrollbar as it doesn’t match my form style. I know I can use jQuery plugins to style the scrollbar, but they don’t work reliably across different browsers/systems.
To hide the scrollbar I can use [I]textarea {width:300px; height:100px; overflow:hidden;}
I also tried the following workaround:
[CODE]#parent {width:284px; height:102px; overflow:hidden;}
textarea {width:300px; height:100px; overflow-x:hidden; overflow-y:scroll;}
It should work accurately if I add some script to calculate the parent division width:
[CODE]var textareaWidth = document.getElementById(‘entry_3’).scrollWidth;
document.getElementById(‘parent’).style.width = textareaWidth + ‘px’;
But anyhow the above approach doesn’t seem to work in Chrome/Safari:
Demo: [url]http://jsfiddle.net/RainLover/snTaP/
Open the above demo in Chrome/Safari >> insert some text into the textarea >> highlight/select a line and drag your mouse to the right and you’ll see the scrollbar. Or use the keyboard keys [I]Page Up[I]Page Down
Any corrections or other solutions?
Sign in
to post a comment