jQuery slimScroll

What is slimScroll?

slimScroll is a small (4.6KB) jQuery plugin that transforms any div into a scrollable area with a nice scrollbar - similar to the one Facebook and Google started using in their products recently. slimScroll doesn't occupy any visual space as it only appears on a user initiated mouse-over. User can drag the scrollbar or use mouse-wheel to change the scroll value.

Download

You can download latest stable version in zip (v1.3.0) from here: slimScroll download.

Alternatively, you can also check out latest build at my GitHub repo.

Any feedback is more than welcome, I'd love to see how plugin behaves on different websites.

Set up

You need need to add jQuery to your website. If you are not it already, you can reference itstraight from super-fast Google CDN:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

And then, reference to the slimScroll itself:

<script type="text/javascript" src="libs/jquery.slimscroll.min.js"></script>

After adding a reference to the jQuery, you can use following code to enable slimScroll on your element or elements. Remember to wrap it in document.onload function, so code is called when DOM is ready.

Example, required html structure:


Code to attach slimScroll:

$(function(){
	$('#inner-content-div').slimScroll({
		height: '250px'
	});
});

Examples

Below are few examples of the possible configuration. Mouse-over the div to make scrollbar appear.

			  $('#slimtest1').slimScroll({
				  height: '200px'
			  });
	$('#slimtest2').slimScroll({
		position: 'left',
		height: '150px',
		railVisible: true,
		alwaysVisible: true
	});
			  $('#slimtest3').slimScroll({
				  color: '#00f',
				  size: '10px',
				  height: '180px',
				  alwaysVisible: true
			  });

Documentation

Basic configuration

 $(selector).slimScroll();

Example of additional settings

$(selector).slimScroll({
    width: '300px',
    height: '500px',
    size: '10px',
    position: 'left',
    color: '#ffcc00',
    alwaysVisible: true,
    distance: '20px',
    start: $('#child_image_element'),
    railVisible: true,
    railColor: '#222',
    railOpacity: 0.3,
    wheelStep: 10,
    allowPageScroll: false,
    disableFadeOut: false
});

width - Width in pixels of the visible scroll area. Stretch-to-parent if not set. Default: none

height - Height in pixels of the visible scroll area. Also supports auto to set the height to same as parent container. Default: 250px

size - Width in pixels of the scrollbar. Default: 7px

position - left or right. Sets the position of the scrollbar. Default: right

color - Color in hex of the scrollbar. Default: #000000

alwaysVisible - Disables scrollbar hide. Default: false

distance - Distance in pixels from the edge of the parent element where scrollbar should appear. It is used together with position property. Default:1px

start - top or bottom or $(selector) - defines initial position of the scrollbar. When set to bottom it automatically scrolls to the bottom of the scrollable container. When HTML element is passed, slimScroll defaults to offsetTop of this element. Default: top.

wheelStep - Integer value for mouse wheel delta. Default: 20

railVisible - Enables scrollbar rail. Default: false

railColor - Sets scrollbar rail color, Default: #333333

railOpacity - Sets scrollbar rail opacity. Default: 0.2

allowPageScroll - Checks if mouse wheel should scroll page when bar reaches top or bottom of the container. When set to true is scrolls the page.Default: false

scrollTo - Jumps to the specified scroll value. Can be called on any element with slimScroll already enabled. Example: $(element).slimScroll({ scrollTo: '50px' });

scrollBy - Increases/decreases current scroll value by specified amount (positive or negative). Can be called on any element with slimScroll already enabled. Example: $(element).slimScroll({ scrollBy: '60px' });

disableFadeOut - Disables scrollbar auto fade. When set to true scrollbar doesn't disappear after some time when mouse is over the slimscroll div.Default: false

touchScrollStep - Allows to set different sensitivity for touch scroll events. Negative number inverts scroll direction.Default: 200

Events

slimScroll publishes slimscroll event when scrollbar reaches top or bottom of the parent container. You can use jQuery bind method to subscribe to this event:

 $(selector).slimScroll().bind('slimscroll', function(e, pos){
     console.log("Reached " + pos");
 });
Please note: Since version 1.0.0 scroll() option has been deprecated and replaced by more functional scrollTo and scrollBy. Additionally, plugin file name has been changed from slimScroll.js to jquery.slimscroll.js. Take care when upgrading!
Love slimScroll?
Buy me a coffee!


Comments

Hi,
Can I hide the scollbar when my mouse move out of the div where I am placing the scroll. And shows again when I get focus on that div again.

Hi,

www.muso-syndicate.com/redesign

[ISOLATED ACCORDION TEST AREA]: www.muso-syndicate.com/accordion/slimScroll2.htm

We'd love SlimScroll to work harmoniously with the jQuery UI Accordion.

Current issues / bugs :-

1) The 2nd time a tab is opened after a previous open>close sequence, you'll notice the accordion jumps down incrementally by around 10px on each successive close>open. I am wondering whether this is something to do with some top offset solution for the 'start: ' parameter in SlimScroll not being refreshed from the previous occasion? I thought this might have been rectified with the 'detect for previous bind' solution, but seemingly not ...

2) How can we make the scrollbar slider resize automatically when the accordion opens - maybe by binding it to the 'accordionchange' trigger, because at the moment you'll notice it only resizes when you begin to scroll which looks messy?

At the moment, only working in SF.

Any thoughts gratefully appreciated!

Dom

If i modify the position of the scroll bar with .scrollTo slimscroll doesnt register the change and is still at the previous position

Hey Andrew i also needed the same thing as you and adding this to the script sloved the problem. I added it just after the attachWheel() function in line 274:

me.on('scroll',function(){
var delta = me.scrollTop();
var offsetTop = delta / me[0].scrollHeight * me.outerHeight();
bar.css({ top: offsetTop + 'px' });
})

Hope this helps you and everyone who needs this. It would be the best if the script is updated with this functionality. Hope the author updates it ;)

Hey while testing the above code i saw a bug, so here is the Fixed code:

me.on('scroll',function(){
if(!isDragg){
var delta = me.scrollTop();
var offsetTop = delta / me[0].scrollHeight * me.outerHeight();
bar.css({ top: offsetTop + 'px' });
}
})

Hi,

So seemed to have fixed the 'jumping down' issue, but now SlimScroll won't scroll to the top of the content on opening any of the tabs of the UI accordion! Any idea why?

http://www.muso-syndicate.com/accordion/slimScroll2.htm

Dom

Hi,

Try calling $(element).slimScroll({ scroll: '0' }); This should move the scrollbar to the top. Also note you need to get latest 0.5.0 release to access this feature.

Hi Piotr,

Thanks so much for your reply, extremely kind to get back to me so quickly!

So I've implemented your idea in the new test file here :-
http://www.muso-syndicate.com/accordion/slimScroll5.htm

But it still doesn't work :( The test is to click CLASSICAL and then click JAZZ, you'll see that it doesn't even scroll back up anywhere, not even the very top :(

You'll notice I've even put "start: ui.newHeader" as a default in the actual http://www.muso-syndicate.com/accordion/slimScroll.js file but this doesn't work either :( Maybe I cannot use the object ui.newHeader as an object directly after the 'start: ' parameter? Maybe I need to kind of 'find' the ID or location from that object first? But I've no idea how!

I think the important thing I am told with the UI Accordion is that the very top of the div is like the 1st accordion tab, ie CLASSICAL and that if you want to focus on the open tab in question, it is the ui,newHeader object variable.

All I want to happen is that when I click on the tab that it always scrolls to that tab's header! It should be so simple!

Thanks as ever for your thoughts,

Dom

Is it possible to add 'easing' or like a smooth scroll to the 'start: ' position parameter so it scrolls there smoothly on opening a tab in the UI Accordion?

Thanks,

Dom

I havet tired this scroll bar in my page and it works well but i want a similar scrollbar for horizontal area also. So how can i do that?

Hi, am pulling my hair out with this! Why is this not scrolling to the active header of each accordion on click?

Full code and example here (click CLASSICAL and then JAZZ, it doesn't work)

But the relevant bit of code here :-

[NB I have done a javascript alert of 'Hreff' variable and it displays as per the anchor around the header, ie $'#link1' for example, which I gather is in the right format for the start: parameter?

change: function(event, ui)

{
if($(".my_accordion").parent("h3").hasClass("ui-state-active"))
{
var hreff = "$('#"+ui.newHeader.find("a").attr("id")+"')";

$(function(){
$('#accordion').slimScroll({
railVisible: true,
alwaysVisible: true,
railColor: '#737373',
opacity: 1,
color: '#000000',
height: '300px',
width: '397px',
start: hreff

www.muso-syndicate.com/accordion/slimScroll7.htm
www.muso-syndicate.com/accordion/slimScroll.js

need help, it didn't work for me. sorry I'm just a noob. see my example here, http://coffeepaste.net/test1

Is there any plan to extend this so that it accepts a different provider than jquery UI for the 'draggble' functionality? I'm sure that this would increase the possible audience immensely, as many people, like me, would not seriously consider using jquery UI in production scenarios. Code quality issues aside, draggable and it's dependencies add 30KB of minified code...

Hey Markus, I agree that it would be better to keep it even more independent by removing references to jQuery UI. I will consider adding custom draggable code that gets executed in case jQuery UI is not running on the page. For time being, unfortunately, you have to add it.

Hi,

I have implemented it and is working exceot the dragging feature. I have adde dthe jQuery-ui also but it is not working. Please check at http://bit.ly/xlxutn

hi there..can u help me with this problem?..i'm adding div style="position:absolute;" >img (my_image)......></div>...it seems the scroll not working with the images that have absolute div...pleaseeeeeeeee help me...

Great tool, but
1. is it possible to set the margin-left in px? The scroll-bar now always hovers over the text. I want the text on a certain distance from the scroll bar
2. is it possible to set the scroll bar (tracker) size (length) independent of the text-box size? I prefer a small sizes tracker

Great Job!, i got it working easily, thank you!.

Just a cuestion:
How can I have working the UP and DOWN keys to move the frame and the scroll bar? This is the natural behavior in a iframe. Do you think this can be done?.

Thank you again.

I'm using the full screen plugin seen here: http://tutorialzine.com/2012/02/enhance-your-website-fullscreen-api/ in conjunction with slimScroll v0.5.0. I'm using a class selector to affect multiple DIVs, all but one being hidden at a time. Whenever I enter full screen mode, the visible DIV's scroll bar loses the ability to drag. When exiting FS mode, it stays broken. I've tried some jQuery isolation methods like .sub() to no effect. How can this be remedied? Thanks.

I like slim scroll, but am now stuck by not being able to visibly drag items (using jquery ui draggable feature) from within the scroll area to outside the scroll area. The overflow=hidden that gets added by the js is making items not show up when they are dragged beyond the scroll area.

Is this a known issue?
with a known fix?

Thanks

Hi Piotr,

Many thanks for the plugin! I’m using it on http://owndj.com for long lists of artists and music tracks.

Some feedback:
The wrapper being exact the same height as the original div was an issue on ownDJ. I’m adding 30px-extra to it with another optional parameter:
var wrapper = $(divS)
.addClass( o.wrapperClass )
.css({ ...
height: myheight
});

You might also want to fix this on your site:
Forbidden
You don't have permission to access /javascript/ on this server.

Thanks again :)

Hi,

This is a great plugin and a love that many properties can be changed! I tested it in Firefox and works great. However, it doesn't work in IE9 for me. I downloaded the latest version (0.5.0). Can you tell me what seems to be the problem?

Hi, I tested it on IE9 and it works fine.
Can you set up a test page to demonstrate the issue you are having?
thanks

hi,i've tested on most major browsers but it seems like it doesnt scroll in IE when any html elements is placed as relative position inside the scroll div.(ie. in IE version 7 and 8). i hvnt test'd in IE9 but hv a feeling that it shud work fine. Can u please help me with it.. thanks

Hi I am using this slimScroll to a chat application, when the messages gets longer then everytime a user enter their message, the scrollbar button will update to bottom to see the latest chat message, how would i do this? thanks :)

Hi! Great work, excellent plugin.
Just wanted to point out a small issue.
I have a div (outer) which contains another div (inner) which in turn contains a table (I had to add the inner div because calling slimScroll directly on the table didn't seem to work.
The issue arises when I try to initalize the slimScroll with option alwaysVisible: true. The bar is not initially visibile, although I can see with firebug that it has display: block. But no height. It becomes visible as soon as I hover on the outer div. So i tried manually firing a "mouseover" event on the outer div via the jQuery trigger() function, but no luck with that either. Is this a known issue, anyone stumbled upon it?

I had a similar problem Andrea. I have a modal window which contains some jQuery tabs for the user to click upon. Whenever a tab is clicked, it "fades-in" fresh content. I wanted to have the nice SlimScroll for all of those tabs, but in only worked for the first tab, and on subsequent tabs, the scroll track would appear but NOT the lozenge. Only when I put the mouse over the content or over the lozenge area would the lozenge then "magically" appear.

So, I assigned a class called ".one" to the first paragraph block for each of those tabs. Then, before the closing body tag I added the following script (it mouseovers the SlimScroll every half second with little overhead):

<script>
setInterval(function() {

if($(".one").is(":visible")){

jQuery(".slimScrollRail").mouseleave();
jQuery(".slimScrollRail").mouseenter();
}
}, 500);
</script>

Hi, thanks for your great work :)

I could increase the speed of loading page by using minified jquery ui file but i dont think we really need all that. Is is possible to have a smaller size file ?! thanks in advance :)

Hi, I'd like to be able to tell the scrollbar to scroll to bottom programmatically. Is there a way that I can call the scrollContent() function from the js in my page? My first attempt was to just try to re-initialize the slimScroll like this:
$('#myList').slimScroll({
height: '400px',
start: 'bottom',
alwaysVisible: true,
distance: '60px'
});
but that did not have any visible effect. It did not scroll to the bottom. Am I doing something wrong?
Thanks,
Brian

Hi,

This works beautifully for me and will be in my new site design. Thank you so much for creating this. I'm wondering what actually happens (or doesn't) on the iPad. I don't currently have an iPad to see what is visible or functional (or not).

I read in a few previous posts that you were considering adding touch events. Is that coming? If so, and approximate time frame?

Thank you again. Love it.
Wendy

I like your plugin, i ma trying to plug it into my shadowbox winch display some content, i want this slimScroller to replace the normal scroll Bar that appears when the content is more larger than the fixed dimensions i put in the css, well !! all my attempts went in vain !

your advise is very appreciated

Hi Piotr, thanks for such a neat and easy-to-use scroll bar!

Is there a way to re-apply (or to remove) slimScroll applied to a DIV? I have a situation: in a page I have a DIV in which contents will be reloaded dynamically (w/o page refresh) and I need to re-apply scrollbar with differing heights. Currently re-applying slimScroll to DIV with a different height doesn't work.

is there problem with this slimscrollbar in dialogbox as m facing problem in it...

Hi, great work on the slimScroll plugin. However, it isn't working on my blog :/
I asked this question on StackOverflow as well, they said I'm using an incompatible version of jQuery on my website, and hence slimScroll doesn't work. However, my website *is* loading jQuery1.6.4.min.js, same as slimScroll. Here's my website: http://thinkrasta.com. I'm trying to use slimScroll on the 'Recent Tweets' widget on the right...
StackOverflow post for reference: http://stackoverflow.com/questions/10053596/integrating-js-scrollbar-with-css-overflow-property-inside-a-div

Thanks for any help!

Hi there,

First, I love the slim scroll. I found it yesterday, downloaded it, installed it on my site (www.timijan.com) and it works beautifully. Thank you very much for sharing such great script.

However, I have one small issue, me not being much more then an occasional/amateur coder :

To show the "terms and conditions" (in my language - Privatnost i Uslovi koriscenja) which you can find in the footer section on my site, you'll notice that I'm using another script called simplemodal. When you click on the link, modal window opens and it loads the content - site's terms and conditions.

I created a div for slim scroll to use and it loads just fine but only on the first instance. Close the modal and open it again, slimscroll no longer shows itself.

Refresh the page, and open the modal, it's there again but, again, for only one instance.

I'm wondering if you'd be able to help. Hate to bug ya but I simply don't have enough knowledge on my one to resolve this issue.

Again, it's wonderful script, thank you for sharing it.

All the best,
Dragan
(draganscave@gmx.com)

Hi Dragan, I previewed your website and I can't see the issue - it looks like slimscroll works every time I open that window. Which browser are you seeing the issue on?

Hi Piotr,

Appreciate the reply. It's all good now.. I took it out of the "problem" page and went with webkit-scrollbar CSS... I thought it may be a long shot to get the script to work inside anther script. No big deal, again, thanks for your help - all good now.

If for some reason I make another attempt, I'll give you a shout ;-)

Dragan

is it ok that i will be using this script to a commercial project? anyways don't worry I will not remove the copyright marks

Hi mahan, yes you can use slimScroll in commercial project and you can modify it in any way as long as original copyright note is present in the code.

Out of curiosity - what's the project?

Is there way one can detect if user has reached the end of scrolling?

how to use the horizontal scroll ?

Hi Lê Văn Chiến,

Unfortunatelly, horizontal scrolling is not supported by slimScroll. There are no plans to put it in in the nearest future.

can SlimScroll show on hosrizontal scroll?
i'm trying some script and didn't working.

Hi Suparjo Zheng,

I decided not to include this future because I believe horizontal scrollbar is an awful thing in the design and I couldn't justify why or where would anyone really need it. However, you're more then welcome to modify my plugin to suite your needs!

Your slimscroll is the best so far and i am using it almost 6 times in my site..will be up in about a month..
give me please a paypal account to send you some money..is ok to send you 40E??
thnx a lot

Hi panos pavlakis,

You're very generous! I have added "Donate" button at the bottom of the slimScroll page.

Thank you so much!
Piotr

Hi Piotr,

Thanks for this create this awesome plugin..

i just wanna ask how about put slimscroll in div that load by ajax..?

many thx..

how do you scroll horizontally?

Hi, I really like this plugin, but I`m having a issue here http://tinyurl.com/7umlggm,

Is there someway to show up the scrollbar only when needed when resizing the window? I see that most script need a fixed value to work, or am I losting something?

Thanks for any help

Pages

Comment

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.

Check out my latest game!

Android app on Google Play

Recent comments