Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 806
  • Last Modified:

Change Scrollbar look and feel

Is there a way to change the look and feel of a scrollbar creating from "overflow:auto;"
0
rpong
Asked:
rpong
  • 4
  • 4
  • 3
1 Solution
 
hsmtpCommented:
Hi rpong,

What kind of changes do you mean?
0
 
hsmtpCommented:
As far as I understood you mean some style changes?
What kind of? (border, color, background color, etc)
0
 
rpongAuthor Commented:
I would like to change the arrow image, instead of the default arrow I would like to replace it with a different image.
Is this clear?
0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
rpongAuthor Commented:
I am able to change the color but would like to change the scrollbar appearance.
0
 
hsmtpCommented:
It is impossible to change anything except colors in scrollbar.
Here is the style-list you may use with scrollbars:

div {
           background-color:#a0a0a0;
           scrollbar-face-color:#903030;
           scrollbar-arrow-color:#FFFFFF;
           scrollbar-track-color:#C0B0B0;
           scrollbar-shadow-color:000000;
           scrollbar-highlight-color:000000;
           scrollbar-3dlight-color:#808080;
           scrollbar-darkshadow-Color:#202020;
}

But you may create your own text scrolling using your own images as buttons. It's kinda difficult.
0
 
hsmtpCommented:
Take a look at this JavaScript scrolling here:
http://www.angar17.ru/

That's what you're able to do. But I don't really like this kind of text scrolling. It depends on browsers, JS availability, etc.
0
 
DaydreamsCommented:
Hi rpong,
You may want a DHTML solution, found here:

http://www.dyn-web.com/dhtml/scroll/

examples:

http://www.dyn-web.com/dhtml/scroll/scroll-rel.html

horizontal: http://www.dyn-web.com/dhtml/scroll/scrollbar-h.html

These use graphics, and you can make your own, and make the "arrow" any graphic you like, if it fits within the scrollbar image. The code is free for personal web pages and small fee for commercial use:
http://www.dyn-web.com/bus/terms.html
0
 
DaydreamsCommented:
Note: The code I referred to above supports Internet Explorer 5+*, Netscape 6+, Mozilla, Firefox, Opera 7, and probably most other relatively up-to-date browsers.
(Quoted from dyn-web site).
0
 
rpongAuthor Commented:
DTHML is the way to go,
Exactly what I was looking for.
Thanks
0
 
rpongAuthor Commented:
I couldn't believe how complex the code is to change the scrollbar.
Unfortunately I wont be able to use this code because it is for commercial purposes.
I'll stick to just changing the color via CSS, thanks for all your help
0
 
DaydreamsCommented:
Hi rpong, thanks for the A:)

You can use the code at the site I mentioned for commercial purposes, but they do require a small fee.

If you change the colors via CSS, remember, that is only for IE 5.5+. Good luck!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

  • 4
  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now