SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    Dec 2010
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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?

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Scroll bars are created by the os, don't mess with them.

    However, One thing I have been doing with most textareas is resizing them as people type in them. This avoids scroll bars and allows people to see all of their content.

    http://www.jacklmoore.com/autosize

  3. #3
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Rain Lover View Post
    I'd like to remove/hide the textarea scrollbar as it doesn't match my form style.
    Dangerous attitude. When you start putting visual appearance ahead of basic functionality and usability, your site is going down the pan. If people can't use it easily, they won't use it. If it annoys them, they will tell other people not to use it. What good is a site that no-one wants to use? As Mark says, you can get rid of the need for scrollbars on many textarea inputs by expanding the box, but when that reaches a critical limit (or for people who don't have Javascript running), don't break the simple system of having a scrollbar when the text takes up more space than you have available.

    You think it doesn't look very nice? So what! More than 99% of your visitors will not notice that the scrollbar doesn't gel with the design – it's the native OS design for a scrollbar and that is exactly what they will expect to see – and they certainly won't think any less of your site for using standard design conventions over trying to be hip and cool but not actually working properly.

  4. #4
    SitePoint Addict
    Join Date
    Dec 2010
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    Scroll bars are created by the os, don't mess with them.

    However, One thing I have been doing with most textareas is resizing them as people type in them. This avoids scroll bars and allows people to see all of their content.

    http://www.jacklmoore.com/autosize
    Resizing the textarea ruins my form. Thanks for the suggestion anyway!

  5. #5
    SitePoint Addict
    Join Date
    Dec 2010
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    When you start putting visual appearance ahead of basic functionality and usability, your site is going down the pan.
    Thanks for the answer and sharing your ideas! But IMHO style is as important as usability.

    If people can't use it easily, they won't use it.
    The user doesn't need to figure out anything -- as they type their input, the blinking cursor automatically goes down and the top line disappears.
    Try the following in a major browser (except for Firefox) and let me know what stops you using the textarea:
    http://jsfiddle.net/RainLover/snTaP/7/

    Moreover, using the arrow keys or Page Up/Down keys is very common, especially for those who don't use a mouse.

    More than 99% of your visitors will not notice that the scrollbar doesn't gel with the design it's the native OS design
    I don't think so and I don't believe that we should accept native OS design for our page elements. Just for instance, almost all browsers display links in blue, but almost all designers customize links style based on what the design needs. Why not scrollbar appearnce? The ability to style a scrollbar in HTML5 by Webkit is a natural answer to this need.

  6. #6
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Default styles are different to things that are created by the os like windows, scroll bars etc.
    Buy a mac. The scroll bars are beautiful.

  7. #7
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    That's a cool textarea plugin. This should change the scrollbars to your liking cross browser. Did when I used it 3 years ago. http://www.hesido.com/web.php?page=customscrollbar

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Some browsers now provide a hook at the bottom right so that you can drag the textarea window wider/taller, so chances are your aesthetics will be ruined anyhow. I'm sure most users just want to be able to fill in the form, rather than admire our designs. Having to arrow up to get back to the top of the text isn't very nice, and I'm sure quite a few users wouldn't know they could do that.

    I'd also argue that leaving the default scroll bar is better for users, as it's more recognizable to them.


Tags for this Thread

Bookmarks

Posting Permissions

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