Scroll without a scrollbar

Sample form:

<!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 textarea {width:300px; height:100px; overflow:hidden;}, but it completely stops Firefox scrolling through mouse and keyboard. I also tried the following workaround:

#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:

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: 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 Page Up and Page Down.

Any corrections or other solutions?

Hacky but seems to work...

Using ::after pseudoelement

#parent {width:302px; overflow:hidden; position: relative;}
textarea {width:300px; height:100px; overflow-x:hidden; overflow-y:scroll;}
textarea:focus {
    outline-offset: 0;
    outline-style: none;
}

#parent::after {
    position: absolute;
    width: 17px;
    top: 0;
    right: 0px;
    height: 102px;
    border-left:1px solid red;
    background-color: black;
    content: "";
    display: block;   
}

http://jsfiddle.net/tarabyte/snTaP/3/

OR using additional div

HTML:

<div id="parent">
  <textarea id="entry_3"></textarea>
  <div id="hidescroll"></div>
</div>

CSS:

#parent {width:302px; overflow:hidden; position: relative;}
textarea {width:300px; height:100px; overflow-x:hidden; overflow-y:scroll;}
textarea:focus {
    outline-offset: 0;
    outline-style: none;
}
#hidescroll {
    position: absolute;
    width: 17px;
    top: 0;
    right: 0;
    z-index: 1000;
    height: 102px;
    border-left:1px solid red;
    background-color: black;
}

http://jsfiddle.net/tarabyte/snTaP/2/

来源：https://stackoverflow.com/questions/13752641/scroll-without-a-scrollbar

标签

javascript

css

textarea

scrollbar

overflow