www.webdeveloper.com
Results 1 to 1 of 1

Thread: Scroll without a scrollbar

  1. #1
    Join Date
    Nov 2009
    Posts
    80

    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 textarea {width:300px; height:100px; overflow:hidden;}, 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;}
    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: 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?
    Last edited by Rain Lover; 12-06-2012 at 02:58 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles