[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 799
  • 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 does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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