View Full Version : Ease Scroll Bar.

11-21-2011, 04:11 PM
1) CODE TITLE: Ease Scroll Bar.

Ease Scroll Bar. (21-November-2011)
by Vic Phillips - http://www.vicsjavascripts.org.uk/

The script adds a custom scroll bar to a DIV element where the DIV content overflows the DIV size.
With both vertical and horizontal modes of execution.
The scroll bar slide may be dragged passed the scroll bar ends where it will be eased back to the scroll bar end.
The DIV content may be scrolled to a specific element by mouseup of inline elements identified by class name.

The functional code size is 4.51K.

4) URL TO CODE: http://www.vicsjavascripts.org.uk/EaseScrollBar/EaseScrollBar.htm

or, ATTACHED BELOW (see #3 in guidelines below):

11-21-2011, 05:09 PM
Looks pretty neat! However, the demo page is off center in narrower windows. Like at 1024 x 768 (not too uncommon, especially with folks these days using smaller windows even on larger screens), there's a large blank area on the left and about a 3rd of the horizontal demo is off screen to the right. It can be scrolled into view using the window's horizontal scrollbar, but I think you hadn't intended that.

In Opera, using the custom scrollbars sometimes selects text on the page. With the vertical one it's the text inside the scrollable element. With the horizontal one it's the text on the GoTo buttons. I imagine that for other browsers you're using something onselectstart return false to prevent that. IE has that, I forget the equivalent in Firefox, perhaps just onmousedown. I'm not sure if either of those work in Opera or if there's anything for that (the Opera developers may feel that should remain under the user's control), you may just have to live with it.

11-21-2011, 11:04 PM
I'm viewing in Firefox 8 (on a Mac). It works fine, but the horizontal example has a fixed-width red bar (eg, about one inch) that slides across, and on either side the space is yellow around it. (That is correct, I think.) But the vertical one never has any yellow space below the bar. The bar simply changes size as you drag the bar down so that more yellow appears above and the bar gets shorter. Is that intentional?

11-23-2011, 04:10 PM
Thank you for your feedback

I have tested the code with IE, FF Chrome, Opera and Safari on a PC

and cannot replicate the text selection problem.

As I do not have access to a Mac I cannot imagine what the scroll bar size problem is as it is set at start up and not changed after.

however I have a version where I do not use percentage when sizing

If you could try


on a Mac I would be obliged.

11-24-2011, 04:49 AM
Here's a screenshot (small so it would fit within the attachment limits) of what I see. Both scrollers are about 1/3 of the way scrolled. As you can see the horizontal one is fine, but the vertical one has extra red at the bottom. When it's all the way at the top (not scrolled down at all) the entire scrollbar column is red without any yellow.

However, the other link you just sent worked fine without any issues like that. I'm not sure why.

11-24-2011, 09:10 AM
Thank you for djr33

I have no idea why using percentage when sizing is a problem but I will change the script to avoid the issue.

I am also considering adding options to position and size the scroll bar and slide
rather than it being automatic.

11-24-2011, 11:48 AM
I have updated the script so it should be OK with a Mac.

I have also included new options to position and size the scroll bar and slide
in addition to being automatic.

11-24-2011, 03:31 PM
With this new layout, there's no problem on narrower screens and Opera here is no longer selecting text while using the custom scrollbars. I can't speak to Mac

11-24-2011, 06:02 PM
That fixed it for me too.

Now that the script is working fully, I see only one problem: the scrollbar itself can "over-scroll", but the text doesn't. I don't think the text should significantly over-scroll, but maybe 10% would be a nice feature to give the "interactive" feeling that the scrollbars have. So basically just add a slight background-colored border to the side if you're trying to scroll past the text, but don't let it slide very far (as I said, about 10% is probably enough).

11-25-2011, 09:05 AM
I have implemented your recommendations with the exception of

a slight background-colored border to the side if you're trying to scroll past the text

Thank you both for the feedback

11-25-2011, 10:01 AM
Looks great. Sorry if I wasn't clear, but that's exactly what I meant-- some "blank space" next to the text when you scroll "past" it. But it's not so much that it looks silly... just enough to make it feel interactive. :)

One last idea: would it be possible to combine the two scrollbars, so that you could scroll both horizontally and vertically? It doesn't seem too useful, but it might be interesting for an image or something like that.

11-25-2011, 01:48 PM

I only did this because I was surprised that the DD Slick Scroll Bar took 9+K plus JQuery

but I will give it a go

11-25-2011, 07:19 PM
Well, what I didn't like about that DD Slick Bar was that so much dead space was seen when you over scrolled. The amount of code doesn't bother me, if you use the Google AJAX API jQuery, chances are that it's cached on the user's machine. And, if it were an image, 9 K would be peanuts. And many people use jQuery for everything on their site. In that case it's probably a savings in bytes over using many different scripts that duplicate the basic and not so basic routines.

One thing in favor of skipping jQuery and other libraries though - they don't support IE less than 6. Depending upon the target audience and upon how well the script degrades, that can be important. Not using a library is no guarantee that older IE will be supported. It all depends upon the code.

Anyways, getting back to what happens at the end/beginning of the content. I like yours Vic, just the way it is. I don't think there should be extra space. But if a designer using your code wanted it, couldn't they just add one or more non-breaking spaces and/or br tags? That should work for the vertical one, perhaps an empty div or one with just a non-breaking space in it for the horizontal. Or perhaps just adding margins to the innermost container? That might work for either direction. What do you think?

11-25-2011, 08:29 PM
John, the blank space I mentioned is already there. It's hidden unless you intentionally drag past the end of the scrollbar then it flashes for just a second. It makes it feel interactive, but it doesn't waste any space or show up unless you're "looking for it", then it immediately disappears when you release the scrollbar. I like it.
In other words, I'm not suggesting any new changes related to that. I think it's fine.

The only question remaining (in my opinion) is whether it would be possible to combine horizontal and vertical scrollbars at the same time. You can't nest them because then the scrollbars themselves would slide around, but maybe there's a creative way to do it so that wouldn't be a problem.

11-27-2011, 01:21 PM
I have updated the script for vertical and horizontal scroll bars

The functional code size has increased to 5.62K.

Anyways, getting back to what happens at the end/beginning of the content. I like yours Vic, just the way it is. I don't think there should be extra space

As the ease of the scroll content is consistent with the slider ease so I am going to keep it

11-29-2011, 10:39 AM
I decided that I did not like that mainly because of the number of options it created

So I have updated the script for just horizontal or vertical scroll although they can be combined.

I have however added persistence.