title: Scroll without a scrollbar
body: <p>Sample form:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;style type="text/css"&gt;
  * {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;}
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;form action="#"&gt;
  &lt;div&gt;&lt;label for="entry_0"&gt;Name&lt;/label&gt;&lt;input type="text" id="entry_0"&gt;&lt;/div&gt;
  &lt;div&gt;&lt;label for="entry_1"&gt;Email&lt;/label&gt;&lt;input type="text" id="entry_1"&gt;&lt;/div&gt;
  &lt;div&gt;&lt;label for="entry_2"&gt;URL&lt;/label&gt;&lt;input type="text" id="entry_2"&gt;&lt;/div&gt;
  &lt;div id="parent"&gt;&lt;textarea id="entry_3"&gt;&lt;/textarea&gt;&lt;/div&gt;
  &lt;div&gt;&lt;input type="submit" value="Submit"&gt;&lt;/div&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>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 <code>textarea {width:300px; height:100px; overflow:hidden;}</code>, but it completely stops Firefox scrolling through mouse and keyboard.
  I also tried the following workaround:</p>
  
  <pre><code>#parent {width:284px; height:102px; overflow:hidden;}
  textarea {width:300px; height:100px; overflow-x:hidden; overflow-y:scroll;}
  </code></pre>
  
  <p>It should work accurately if I add some script to calculate the parent division width:</p>
  
  <pre><code>var textareaWidth = document.getElementById('entry_3').scrollWidth;
  document.getElementById('parent').style.width = textareaWidth + 'px';
  </code></pre>
  
  <p>But anyhow the above approach doesn't seem to work in Chrome/Safari.<br>
  Demo: <a href="http://jsfiddle.net/RainLover/snTaP/" rel="nofollow">http://jsfiddle.net/RainLover/snTaP/</a></p>
  
  <p>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 <code>Page Up</code> and <code>Page Down</code>.</p>
  
  <p>Any corrections or other solutions?</p>