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

has anyone managed to make it work on ipad ?

how is it possible like this situation?
when Div height over then specified height then only scrollbar should be show! ??

like in Css we set property :
{Overflow:scroll;}

Thanks
nishant

First off, this is a great plugin. Easy to use, and since I came in at a later version, you've implemented options that I would have asked for already.

I see that a few others have asked about iframe support, and you haven't yet offered a reply. I'm just wondering if this is something that is on your roadmap for the near future, or if you have any suggestions for implementing this same concept in an iframe environment.

Basically what we are doing is we have build a jquerymobile app. For people who visit our page on a desktop computer, we are rendering the app in an iframe contained within a mock-up of a mobile phone. I want to be able to use the fade-up on hover scroll option, that does not impact the width of my frame like the default iframe scrollbars do. Your solution would work perfectly, but I just cant get my iframe to accept slimScroll.

If you get a chance, please respond and let me know your plans. That way I can continue seeking other options.

Much appreciated!

Slimscroll is best for my website.
And i have an issue.
That is when i change the height of the scrollbox content on click ..Slimscroll not working. Its once initialized can't be changed.. Is there any way to reinitialize the slimscroll when changing the height dynamically without page refresh..

Thanks

I'm not sure exactly what you have in mind, but I was having a similar problem.

Try changing the css height of the div slimScroll bound to.

I wanted to change the height of the scroller depending on the browser window. I succeeded like this:

//Initialize
$('#sidebarScrollDiv').slimScroll({
height : (($(window).height())-24)+'px',
position : 'left',
railVisible : 'true'
});

$(window).resize(function() {
$('#sidebarScrollDiv').css({
height : (($(window).height())-24)+'px',
});

});

Am a beginner in javascript, and slimScrollBar doesn't work for me, I've done and understanding everything except how to wrap in document.onload function, how and where to put it.
Am thanking in advance.

First off, Great plugin!!! Absolutely love it. One question though, is there a way to pass additional (not specified as being supported parameters on your page) css options like 'min-height' to the plugin to keep the slimScroll container from minimizing past a certain point when the page is resized? I really need help on this.... Thank you greatly, and keep up the good work!

hello , I want to know that how can be use this with live function.
$('#slimtest1').slimScroll({
height: '200px'
});

Hi again. Still love this slim scroll. Thank you. I'm about to go live with it and was wondering if there will be touch events for iPad in the future or if I need to make an alternate tablet version of the site.

cheers
Wendy

Hi - this is a great plugin and works fine. However I find that in my set-up there's a conflict. My scrolling div contains other divs that have a mouseover color change. With the scroller added theres flickering when I mouse over any div content as the background color gets confused. If I add a cancel Bubble it fixes this but kills the scrolling. Any idea how to cancel the bubbling whilst still allowing the scrolling? Thx

Piotr, Thanks for the plugin. I could get most of my work done by using this plugin. Anyhow i have an issue when adding content dynamically on scroll (using endlessScroll). In this case i could see the scroll bar height getting adjusted automatically but it is skipping the content (may be 'delta' is not computed correctly) during scroll. Can i send one more function parameter which could be used to determine the 'wheelStep' and 'percentScroll' instead of relying on the div.outerHeight which keeps on changing in my case with dynamic loading. Can you throw some light as how to achieve this. Guys please share your thoughts on my issue. Thanks everyone.

hi hi, first of all great plugin. helped me a lot in former times! but i have the same problem on loading content via ajax. the scrollbar is not calculated/positioned correctly. is there a possibilty to make this work?! i implemented it dirty in inside the slimscroll class and it is working, but of course on updating the version everything is trashed.... if you like, i send you my way of repainting the bar after content change.

Hi gsa, I am working on a new version which will publish a method that can be called in your ajax callback to recalculate the length of the slimscroll.

nice! could you give me a approximately release date? i use your plugin in a project which is released in a few weeks, the question for me is to make a work around for the release or wait until your plugin is released....

hi i like this plugin but i am face the one problem whenever my contain load via ajax.
what i need whenever my contain load via ajax (contain load in each second) then i have to scroll manually to see the bellow contain .
i d't need to scroll
when i am using start:'bottom'
it is working when all the contain are inside but when my contain are load each second i have to scroll
can u solve this problem?

hi, nice plug in but it miss horizontal scrolling :(. I understand vertical scroll is important but horizontal may be too ! Some project have some spec like "the world library" in "small window" :). Impossible too escape the horizontal scroll bar in this situation.

Is there any option to make the scrollbars fade a bit quicker?
Its sort of an issue when I have slimscrollers on a page and they stick around a bit too long

Thanks! -- great plugin

btw, how many euros is a coffee over there?

ha! between 3 and 4 euros :)

Hope you enjoy your coffee :)

Is there any way to make it use max-height instead of just plain height? (So content can grow up to the value set but can shrink smaller than it?)

I try to use it with iframe. But if I use the plugin the mouse wheel is not working in firebox and IE
Can u tell me what I do wrong.

I'm having an issue with list styling while using this plugin. Here is my code...

<div class="grid_6">
<ul id="cat-nav">
<li> <a href="makeyourownpaperflowers.html" target="iframe_a"> RETRO </a> </li>
<li> <a href="paperfashionsfancy.html" target="iframe_a"> SOPHISTICATED </a> </li>
<li> <a href="paperfashionsfantasy.html" target="iframe_a"> BLACK & WHITE </a> </li>
</ul>
</div>

#cat-nav {
height: 310px;
width: 230px;
font-size: 21pt;
font-family: 'Amatic SC', sans-serif;
overflow-x: hidden;
overflow-y: hidden;
}

#cat-nav li {
display: block;
list-style-type: none;
}

#cat-nav a {
color:#7F817D;
text-align:left;
text-transform:uppercase;
text-decoration: none;
float:left;
text-align:left;
}

#cat-nav a:hover {
color: rgba(241,17,17,1);
}

<script type="text/javascript">
$(document).ready(function () {
$('#cat-nav').slimscroll({
width: '12-px',
height: '310px',
railVisible: true,
allowPageScroll: true, });
});

</script>

I've a problem
IE give me :
Error: Unable to get value of the property 'top': object is null or undefined

Hi! First of all, thanks for sharing this excelent plugin! It works out of the box for ALL browsers but I have a little "issue".
It is possible to set a longer time until the fade out effect appears? I want to have my scrollbar visible a little more time, or, if it's possible, to be visible when the user have the mouse over the specified div and after the mouse is out of that div then the scrollbar can fade out.
I guess this could be done with onmouseover & onmouseout events or something like that...
Thnaks!

I love the plugin but I have problem when using it with jQuery UI sortable.

I have three lists, each are sortable and using slimScroll. all lists are connected so I can moved item between list. however when having slimScroll for each list, when dragging item between list the item disappear when dragging out of it's container but once drop it shows again on the list.

note that this does not happen when removed slimScroll

Thank you

Thanks for your effort on this! It is clean and simple, and exactly what I was looking for.

I did however run into a problem when I wanted to use it on elements that do not have a fixed height. In my case, the scrollable div has a height of 100% of the page height. I was able to modify your code to get it to work, but it might be a use case you want to support in the future.

This is an awesome plugin but I am facing an issue. If the plugin is used on a div with "position: fixed" (instead of "position: relative") then the slim scrollbar always disappears from below in div when I keep scrolling down (i.e. using slim scrollbar not the browser scrollbar) for a long web page.

I really want to make this work for a fixed div e.g. a facebook newsfeed in left side bar.

Browsers I use are Chrome and Firefox.

Any help would be appreciated thanks!

Hi Thanks for the good plugin. Vertical scroll is working fine for me.. Is it possible to use the slimscroll plugin for horizontal scrolling?

Hi,
Im using slim scrool for a message window, i am updating the content when a message is added, but id like to make the slim scroll scroll down to show the new message. Anyone have an idea how to do this?
ive tried calling the "var scrollContent = function(y, isWheel, isJump)" function but i dont know how to access it from my javascript
any help would be great! Thanks in advance!

My div is this:

<div id="scroller" align="left" style="overflow: hidden; width: 655px; height: 220px; background-color: rgb(255, 255, 255); padding-right: 0px; background-position: initial initial; background-repeat: initial initial; ">
....
</div>

I init it like this:
$(function(){
$('#scroller').slimScroll({
width: '655px',
height: '220px',
alwaysVisible: false,
start: 'bottom',
wheelStep: 10
}).css({ background: '#fff', paddingRight: '0px' });
});

then I want to scroll it, but its not working, I tired this and it doesn't do anything:

$('#scroller').slimScroll({ scroll: '50px' });

I was looking for it, a real pro scrollbar, Thanks a lot.

Hi, has anyone tried to add it to jQuery UI Autocomplete widget? I can't find a way to do it :(

I'm not sure if my previews message has been sent or approved, but it was about adding slimScroll wich is the best solution I found for custom scrollbars.

Meanwhile, I found a soultion for adding this great plugin to jQuery-UI Autocomplete, not sure if it is the best solution but it works for me, tested only in latest browsers versions.

$('#search-field').autocomplete({
source: source,
open: function(event, ui) {
var h = $('.ui-autocomplete').innerHeight();

$('.ui-autocomplete').children()
.wrapAll('<div id="scrollable" style="height:'+h+'px;" />');

$('#scrollable').slimScroll({
height: h+'px',
railVisible: true
});
},
close: function(event, ui) {
$('#scrollable').hide();
}
});

SlimScroll would be even more awesome with keyboard support for the up/down, pg up/down and home/end keys! Maybe that's an idea for a future release...?

Thank you for slimScroll.
I tried to do the following to trigger the slimscroll event. Not working.. could you please help
$('#content_1').slimScroll({
height: '300px',
width: '185px'
}).bind('slimscroll',function(e,pos){
alert(pos);
});

the code you are using looks correct. Are you sure you are using latest version of slimscroll? Make sure you got version 0.6.

I used our slimscroll plugin and it is great. However, i got one problem. as I have a div content which is loaded by Ajax. If at the first time i scroll to the bottom, the press some button to load another content the scrollbar position keep its position, so i have to scroll by hand to the top. I wonder if is there any way to scroll to top after reload the content?

hi Phu, try using 'scroll' method and use 0px as the argument:

$(element).slimScroll({ scroll: '0px' });

This plugin reminds me of old school Adobe Flash-based websites.

Hey Piotr

So I found a small issue in your otherwise perfect working scroll script:

When I want to re-use a div in (on which the slimScrollDiv is wrapped) and also give a new height with the slimScroll({height: 'FOOpx') this height won't be used by your script.

This is because of the 'if (me.parent().hasClass('slimScrollDiv'))' part in the script.
I just changed it a litle bit after the 'if (scroll)' statement and placed this:

me.parent().css({
width: cwidth,
height: cheight
});

Maybe you can add it in a next release.

Best

Bart

doesn't work with latest jQuery

thanks Daniel, I'll fix it in the next patch

I´m using the plugin with ASP.NET and C#! When i change the color of the object, with System.Drawing.Color.ColorName if the text is changed, where the scrollbar should be visible it´s away and the standard ones is visible and this looks terrible, pls fix it.

I am using a chat box , where I need to scroll the scroll bar to the bottom each time a message come in ... what to do to scroll the scroll bar to bottom automatically ? please help me

its not running... how to i setup the enviroment.
i added like this..
<script language="javascript" type="text/javascript" src="Scripts/jquery-1.7.1.js" />
<script language="javascript" type="text/javascript" src="Scripts/jquery.ui.draggable.js" />

and then
$(function () {
$('#divScrollQuickLink').slimScroll({
height: '250px'
});
});

<div style="width: 300px">
<div id="divScrollQuickLink">
<asp:BulletedList ID="blQuickLInks" CssClass="Bullet" runat="Server" DisplayMode="HyperLink"
BulletStyle="Disc" Target="_blank">
</asp:BulletedList>
</div>
</div>

what i am wrong here ? its not even working

awesome plugin thanks for the plugins

I love this plugin, since i saw this kind of scroll on facebook and in the macs i loved it, but id like to apply it to the very body tag, is it possible? how can I do that?

Thanks

I have a problem with slimScroll and Google Chrome (up to date Version 22.0.1229.79). I applied slimScroll to a div containing input (type checkbox) and links. When i scroll in Google Chrome, sometimes after a few up and down, sometimes immediately - the mouse cursor is changing into selection and it starts selecting content from the div or from outside the div (from the rest of the page).

You can see all this happening here (the slimScroll is located into the left sidebar - that area containing brands (marci):

http://www.reducerimania.ro/telefoane-si-accesorii

Any idea how you can fix this?

You can delete my comment since i no longer use this plugin - and the link i gave you may not be using slimscroll anymore. I can't fix that Google Chrome problem and i found another bug in IE 9.0 (scroll not working)... but i found another plugin working better in any browser... Thank's anyway for your work. I hope you will fix someday all those problems so we I can use your plugin.

Hi, does this support easing? I seem to find nothing on that so far. In particular I was wondering if I could use following easing plugin: http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js

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