Scroll without a scrollbar

**Rain Lover** · Dec 6, 2012 14:56

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?

**markbrown4** · Dec 6, 2012 15:15

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

**Stevie D** · Dec 6, 2012 15:36

Originally Posted by Rain Lover

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.

**Rain Lover** · Dec 7, 2012 02:49

Originally Posted by markbrown4

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!

**Rain Lover** · Dec 7, 2012 03:16

Originally Posted by Stevie D

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.

**markbrown4** · Dec 7, 2012 15:57

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.

**PicnicTutorials** · Dec 7, 2012 17:30

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

**ralph.m** · Dec 7, 2012 20:08

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.

User Tag List

Thread: Scroll without a scrollbar

Thread Tools

Display

Scroll without a scrollbar

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions