PDA

View Full Version : Rounded scrollbar trouble



failure13
January 26th, 2013, 06:58 PM
Hi guys!
I need help with rounded scrollbar, it seem that it's nearly impossible to make it truly "right" way, as cool as Mac or something, for Windows.

It's best i could do so far:
60708


Here's it's usual look:
60712

Here's it's slided look:
60711

What i don't like is that when you slide it up or down you got this artefacts on the edges (of course, that's due LowerTrackVertical just shrinks when slider is near edge...):
60713

Maybe someone would sugest some cool way to avoid this?
Is is possible to probably shift LowerTrackVertical a bit down, and UpperTrackVertical a bit up (so they would be sort of background for scroller), and then make scroller's background trasparent, so that it would just lay on those tracks.
Damn it wound be cool to have MiddleTrackVertical and Scroller with transparent background above it!

nofx1994
January 26th, 2013, 07:17 PM
I have been trying myself to get a true 3d scroll bar for quite sometime and this here is the closest i have gotten. what i did was not have a track but yet just the color of the window background and did a drop shadow on the scroll bar itself and it gave the illusion of standing off the page.

failure13
January 26th, 2013, 07:35 PM
Well, it's pretty elegant solution for your theme man!
But in my design's case as you see i want scroller to look sorta "embeded" in tracks, this way it just have to be with a little edges...
There must be some kind of trick, i'm sure! :D

Interesting how it's getting done on mac...It seems they've use totally different type of scrollbar's markup.
I mean, everything would be much more extra easy if we could just hack windows's markup a little bit, and shift those damn tracks up or down below scroller..

Other possible solution as i see, is to try to make tracks not 2 pixel bigger than scroller (as i have it now), but same size, so that scroller would just lie above edjes of tracks, maybe this way it could probably eat those pixels..

nofx1994
January 26th, 2013, 07:39 PM
one thing you can try is the embeded part you will need to add part of it to the thumb button and see if that can work out better for you that way because i am saying that because when you scroll up and down it will give the illusion of being in a track

Mr GRiM
January 26th, 2013, 07:59 PM
Yep what you need to do is add the top and bottom of your track in the arrow button images and then it should look perfect, if you have a look at my Annihilator and By design themes you will find thats how I did them.

failure13
January 26th, 2013, 08:27 PM
Yep, i was trying to do that, without a real luck, if i understood what you meant correctly...

Mr Grim

/30505-Annihilator-Light-7tsp-Complete-Theme-Pack
you meant this theme, right?

Well, if i understood you right, you can't really scroll it up to the limit, it will be just static image which will be unavailible for scroller?

Call me idealist, but it's not totally perfect from the pov of functional ui :)

60716
Here's ideally how rounded corner which is scrolled up to the top should look...(in my opinion)

So it seems that if you guys couldn't find a way to do it so for all this years, than it's nearly impossible to make it perfect, other than ways we have discussed already? :(