Replacing the default scrollbar in a div

Dev Shed Forums Sponsor:

February 14th, 2006, 07:04 PM

ralphch

Contributing User

Join Date: Jul 2001

Location: Buenos Aires, Argentina

Posts: 154

Time spent in forums: 10 h 48 m 49 sec
Reputation Power: 12

Replacing the default scrollbar in a div

Hi,

I'm using the "overflow:auto" CSS property so that I can vertically scroll inside a DIV. However, I was wondering if there is any script or JavaScript function that I can use to replace the default scrollbar for something nicer, like custom up and down arrows.

Any ideas will be appreciated.

Thanks,
Ralph

February 14th, 2006, 08:07 PM

darinpeterson

Pure Octane with Sirius 20

Join Date: Jan 2006

Location: Boise, ID

Posts: 198

Time spent in forums: 2 Days 7 h 4 m 34 sec
Reputation Power: 10

Changing Scroll Bars.

Check here to use CSS to change the color.

February 14th, 2006, 08:11 PM

ralphch

Contributing User

Join Date: Jul 2001

Location: Buenos Aires, Argentina

Posts: 154

Time spent in forums: 10 h 48 m 49 sec
Reputation Power: 12

Thanks for the reply. However I was hoping to change the whole scrollbar itself for something else that will look nicer. Is there a way to do this? I'm guessing probably with Javascript. Thanks again.

February 14th, 2006, 08:37 PM

Markisdee

Contributing User

Join Date: Dec 2003

Posts: 2,346

Time spent in forums: 1 Month 3 Days 10 h 59 m 31 sec
Reputation Power: 577

Quote:

Originally Posted by darinpeterson

Check here to use CSS to change the color.

Keep in mind that this solution is IE only.

@ralph: Yes, this is possible. (However, the only way I can think of is with scrollTo and an Iframe.) It is very frowned upon however, because users with JS disabled will not be able to view some of your content if you set it up like that. And I'm sure many users are happy with their scrollbars. When "something nicer" compromises compatability, often you need to give that something up.

__________________

February 15th, 2006, 11:04 AM

ralphch

Contributing User

Join Date: Jul 2001

Location: Buenos Aires, Argentina

Posts: 154

Time spent in forums: 10 h 48 m 49 sec
Reputation Power: 12

Hi, thanks again for the replies. However, I'm going to be using this on an Ajax-based application so the user will need Javascript enabled. Would there be a way of doing this? Thanks!

February 15th, 2006, 01:03 PM

Kravvitz

CSS & JS/DOM Adept

Dev Shed God 30th Plane (19500 - 19999 posts)

Join Date: Jul 2004

Location: USA

Posts: 19,835

Time spent in forums: 6 Months 1 Day 22 h 40 sec
Reputation Power: 4192

Look into overflow:hidden and the scrollTop and scrollLeft properties.

__________________
Spreading knowledge, one newbie at a time. I'm available for hire at Dynamic Site Solutions.

Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

Remember people spend most of their time on other people's sites (so don't violate web design conventions).

Replacing the default scrollbar in a div

Developer Shed Advertisers and Affiliates