/    Sign up×
Community /Pin to ProfileBookmark

Scroll without a scrollbar

Sample form:

<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;}
<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>

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], but it completely stops Firefox scrolling through mouse and keyboard.
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;}[/CODE]

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’;[/CODE]

But anyhow the above approach doesn’t seem to work in Chrome/Safari:
Demo: [url]http://jsfiddle.net/RainLover/snTaP/[/url]

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] and [I]Page Down[/I].

Any corrections or other solutions?

to post a comment

0Be the first to comment 😎



Help @Rain_Lover spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 11.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ

legal: ({
terms: of use,
privacy: policy
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
recent_tips: (
tipper: @bahaedd,
tipped: article
amount: 1000 SATS,

tipper: @Balmasexy,
tipped: article
amount: 1000 SATS,

tipper: @mbsaad,
tipped: article
amount: 1000 SATS,