Comments on: Mootools CSS Styled Scrollbar

By: Daniela

Daniela — Tue, 21 Oct 2008 12:37:28 +0000

Spent hours, but it doesnt work at all with version 1.11.

/* */

Has somebody an idea … I’m so frustrated width it.

Daniela

By: jp loh

jp loh — Mon, 01 Sep 2008 19:54:49 +0000

anybody encountered problems with this on safari (mac)?

By: Tetsuo

Tetsuo — Wed, 06 Aug 2008 12:57:13 +0000

Can’t get my head around the v1.11 work around :(

By: Mark Noormann

Mark Noormann — Sun, 29 Jun 2008 10:00:03 +0000

I change the script a little bit more … now if there is nothing to scroll, the scollbar will fade out:

function makeScrollbar(content,scrollbar,handle,horizontal,ignoreMouse){
if ( content.getScrollSize().y-content.getSize().y > 0){
var slider = new Slider(scrollbar, handle, {
steps: 100,
mode: (horizontal?’horizontal’:'vertical’),
onChange: function(step){
// Scrolls the content element in x or y direction.
var x = (horizontal?(((content.getScrollSize().x-content.getSize().x)/100)*step):0);
var y = (horizontal?0:(((content.getScrollSize().y-content.getSize().y)/100)*step));
content.scrollTo(x,y);

}
}).set(0);
if( !(ignoreMouse) ){
// Scroll the content element when the mousewheel is used within the
// content or the scrollbar element.
$$(content, scrollbar).addEvent(’mousewheel’, function(e){
e = new Event(e).stop();
var step = slider.step – e.wheel * 2;
slider.set(step);
});
}
// Stops the handle dragging process when the mouse leaves the document body.
$(document.body).addEvent(’mouseleave’,function(){slider.drag.stop()});
}else
scrollbar.fade(0);

}

By: benn

benn — Sun, 29 Jun 2008 03:01:13 +0000

there is a small bug , when there is not enough chars to scroll scipt end in error

Error: slider.drag has no properties

By: benn

benn — Sat, 28 Jun 2008 19:38:53 +0000

the code is great but I am confused with 1.11 and 1.2b , you only made a demo for 1.2b and gave small instructions for 1.11 . any way to explain in detail how to get it to work with 1.11 . Reason why I am asking is the 1.11 is so spread by now that not everyone will start using 1.2b since there is versions issue as you know

Thnx
Best regards

By: Anders

Anders — Fri, 27 Jun 2008 15:02:21 +0000

hmm… looks like there is something going on with the form here… cant handle code properly so apostrophes change

By: Anders

Anders — Fri, 27 Jun 2008 15:00:50 +0000

sorry… like this:

steps: 100, mode: (horizontal?’horizontal’:'vertical’),

By: Anders

Anders — Fri, 27 Jun 2008 14:59:33 +0000

I think I found an error. The letter after the second horizontal is a quotation mark:

steps: 100,
mode: (horizontal?’horizontal’:’vertical’),

Shouldn’t it be an apostrophe like this:

steps: 100,
mode: (horizontal?’horizontal’:'vertical’),

By: Mark Noormann

Mark Noormann — Thu, 19 Jun 2008 09:10:03 +0000

Works nice. but if the contentsize will change (fontsizer),it dosn´t scoll to the end so i change a little bit of the script:

function makeScrollbar(content,scrollbar,handle,horizontal,ignoreMouse){

var slider = new Slider(scrollbar, handle, {
steps: 100,
mode: (horizontal?’horizontal’:'vertical’),
onChange: function(step){
// Scrolls the content element in x or y direction.
var x = (horizontal?(((content.getScrollSize().x-content.getSize().x)/100)*step):0);
var y = (horizontal?0:(((content.getScrollSize().y-content.getSize().y)/100)*step));
content.scrollTo(x,y);

}
}).set(0);
if( !(ignoreMouse) ){
// Scroll the content element when the mousewheel is used within the
// content or the scrollbar element.
$$(content, scrollbar).addEvent(’mousewheel’, function(e){
e = new Event(e).stop();
var step = slider.step – e.wheel * 10;
slider.set(step);
});
}
// Stops the handle dragging process when the mouse leaves the document body.
$(document.body).addEvent(’mouseleave’,function(){slider.drag.stop()});
}

now you cann scoll to the really end. :-)