Not that I can think of off-hand. You could try sensing the height of the inner DIV, see if it is in fact taller than the outer div, and then use that to switch the entire scroll element off visually.
Here’s where I would sneak this into the original code:
//wrap the test around the original code
if($'innerDiv').getHeight() > $('innerDiv').up('div').getHeight()){
var s = new Control.Slider('thumb','track', {axis:'vertical'});
var f = function(value){
var inner = $('innerDiv');
//change innerDiv to whatever your inner box is called
var h = (inner.getHeight() - inner.up('div').getHeight());
inner.style.top = (Math.round(value * h) * -1) + 'px';
}
s.options.onChange = function(value){
f(value);
};
s.options.onSlide = function(value){
f(value);
};
}else{
//hiding track will also hide the thumb, since
// it's a direct child of the track
$('track').hide();
}
Naturally, you have to adjust all the names of things to match your layout, and if you’re going to apply this to more than one element on the page, you owe it to yourself to wrap this up as a single function you can call.
Hi Walter,
Thank you for the code it works well. I tried the last code to change the height of the inner Div but it did not work. I kept the same names.
Could you post an example somewhere, along with a description of what
you are expecting to have happen? I’m not clear which code you’re
referring to here, since none of it is designed to change the height
of anything, only to sense the height and use that as part of the
calculation for how much to offset the inner DIV from its parent using
a negative top: value.
Walter
On Dec 31, 2009, at 12:51 PM, Omar Lopez wrote:
Hi Walter,
Thank you for the code it works well. I tried the last code to
change the height of the inner Div but it did not work. I kept the
same names.
You would need to extend the basic script so that it could respond to
both types of control. This is why the observer pattern is so good to
use – you can hook one behavior into a lot of different control
surfaces, and no matter which one you use, the effect will happen.
Please do give this a try and let us know how it goes.
Walter
On May 25, 2010, at 8:24 PM, Brett wrote:
Is there any way to have the custom scrollbar work with mouse
gestures - i.e. scroll down and up with the center wheel on a mouse?
Thanks,
Brett
You would need to extend the basic script so that it could respond to
both types of control. This is why the observer pattern is so good to
use – you can hook one behavior into a lot of different control
surfaces, and no matter which one you use, the effect will happen.
Please do give this a try and let us know how it goes.
Walter
I did find a way to do it, but I went a different route than the one outlined above. I hope it doesn’t cause grief later on. What I did was use this tutorial - here - which uses scriptaculous along with some custom javascript to do the job. All that is required is to add the appropriate “class” marker to the div and include some css styling for the scroll bar and everything seems to work great.
I hope I am not missing something.
And the old Mighty Mouse… how much clogging up of that scroll wheel… I have 5 dead and buried white Mighty Mice.
Just out of interest, I’ve found that Apple’s instructions for clearing it work really well: turn it upside down and scrub the ball, fast, in a figure of eight patter, on a clean sheet of paper. Do it for about 15 seconds; I’ve done this every month or so, and my magic mouse is working as well as it did when new.