Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

overflow:'scroll' (2 parts)

Status
Not open for further replies.
tryangle

tryangle

Technical User
Mar 19, 2001
49
US
I asked this question in the Javascript forum, but didn't get any responses... but I've been still digging around trying to figure it out... I think maybe it's a CSS question instead?

I'm interested to know if the color for this scrollbar can be changed separate from the fullwindow scrollbar- I can change the color, but the change affects them both. I tried using [0] & [1] to differentiate between the two, as in a radio box array, but I got nothing. And... one more thing, how could I set the focus to the scrollable box scrollbar? I guess it would really help if I knew the DOM names. %-)
OK, Who stopped payment on my reality check?
 
Sort by date Sort by votes
Yes, you can change just the scrolling element.

Lets say it is a DIV, class of scroller -

div.scroller {
width: 100px;
height: 100px;
overflow: scroll;
scrollbar-face-color: #000000;
scrollbar-shadow-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-arrow-color: #FFFFFF;
}

and for your body, you can have different rules -

body {
scrollbar-face-color: #ffffff;
scrollbar-shadow-color: #000000;
scrollbar-highlight-color: #000000;
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #000000;
scrollbar-arrow-color: #000000;
}

In this example, scroller is black-on-white, and body is white-on-black.

Hope that helps. Dean Owen
 
Upvote 0 Downvote
Thank you Dean, I'll check this out to see how it works, I really appreciate it! Do you, by any chance know how to put focus on the div.scroller? Would it be <body onload=&quot;javascript:div.scroller.focus()&quot;> %-) OK, Who stopped payment on my reality check?
 
Upvote 0 Downvote
Might work. Try it.

try making the div and ID instead of a class of you are going to try that. ie -

div#scroller {
blah
}

or giving it the name of scroller. Dean Owen
 
Upvote 0 Downvote
Thanks again Dean!
Your advice on making the scroller color different from the main window worked great AND onload=&quot;scroller.focus()&quot; works too! I like it! %-) OK, Who stopped payment on my reality check?
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Carlvic
  • Locked
  • Question
How can i make layout 2 columns 2
Replies
3
Views
142
Carlvic
Carlvic
c0deM0nK424
  • Locked
  • Question
Horrible Vile 'horizontal overflow' appearing on bootstrap smooth scrolling website ?
Replies
2
Views
99
vacunita
vacunita
makamo66
  • Locked
  • Question
Horizontal Scroll Bar Not Hidden for Media Query
Replies
3
Views
112
makamo66
makamo66
southbeach
  • Locked
  • Question
Responsive Design - Get 3 col down to 2 col and down to 1 col
Replies
3
Views
119
southbeach
southbeach
Katerine
  • Locked
  • Question
CSS question: Displaying 2-level unordered lists in a table layout? 1
Replies
7
Views
200
Katerine
Katerine

Part and Inventory Search

Sponsor

Back
Top