jQuery slimScroll

Submitted by Piotr Rochala on Sun, 10/16/2011 - 15:59

What is slimScroll?

slimScroll is a small (2.8KB) 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 (v0.5.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

For plugin to work, you need add reference to jQuery and jQuery UI (Draggable) to your website. If you are not running these libraries already, you can reference them straight from super-fast Google CDN:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>

After adding a reference to the jQuery and jQuery Dragabble, 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:



Lorem ipsum dolor sit amet, consectetur .... snip

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.

Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar rhoncus quam, vel semper tellus viverra id. Nulla rutrum porttitor odio, a rutrum purus gravida non. Etiam ac purus augue, eget vestibulum purus. Aenean venenatis ullamcorper augue, non consequat elit tempor sed. Donec velit sapien, volutpat sed ultricies egestas, semper a ante. Fusce dapibus, quam eget auctor suscipit, nibh leo posuere ante, at auctor nisi lacus in sem. Morbi interdum consectetur euismod. Cras accumsan est lacus. Nulla eleifend, eros vel consequat commodo, arcu nunc malesuada nunc, quis sagittis felis sem ac turpis.

Nulla rhoncus elementum convallis. Mauris condimentum aliquet egestas. Ut iaculis nisi eget tellus accumsan venenatis. Maecenas imperdiet aliquam porta. Aenean ultrices dolor sed quam laoreet varius. Curabitur condimentum blandit erat, quis accumsan eros interdum vitae. Curabitur ligula arcu, sollicitudin vitae iaculis sed, blandit sit amet enim. Morbi ullamcorper, metus vel mollis tristique, arcu turpis malesuada nisi, at dignissim lorem odio a orci. Proin ultrices, ipsum ut vestibulum interdum, libero felis auctor mi, vitae convallis nisl justo ac tellus. Integer nec lacinia turpis. Etiam massa nisl, rhoncus quis rutrum in, pretium eu leo. Proin a velit ut nulla laoreet vestibulum. Curabitur eu elit vitae felis auctor tincidunt. Curabitur tincidunt, metus sed sollicitudin cursus, quam elit commodo erat, ut tempor erat sapien vitae velit. Morbi nec viverra erat.

Nullam scelerisque facilisis pretium. Vivamus lectus leo, commodo ac sagittis ac, dictum a mi. Donec quis massa ut libero malesuada commodo in et risus. Fusce nunc dolor, aliquet vel rutrum in, molestie sit amet massa. Aliquam suscipit, justo a commodo condimentum, enim sapien fringilla ante, sed lobortis orci lectus in ante. Donec vel interdum est. Donec placerat cursus lacus, eu ultricies nisl tincidunt a. Fusce libero risus, sagittis eleifend iaculis aliquet, condimentum vitae diam. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin leo purus, sodales a venenatis luctus, faucibus ac enim. Sed id metus ac sem lobortis pretium. Mauris faucibus tempor scelerisque. Nunc vulputate interdum tortor, non tincidunt dui condimentum eget. Aenean in porttitor velit. Nam accumsan rhoncus risus id consectetur.

			  $('#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
});

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. 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 false is scrolls the page.Default: true

scroll - Allows for programmatic update of scroll value. Can be called on any element with slimScroll already enabled. Example: $(element).slimScroll({ scroll: '50px' });

Love slimScroll?
Buy me a coffee!

Tags:

JavaScript

jQuery

Comments

IE9 scroll with mouse scroll is not working

Hi Piotr,

Thanks for this great plugin. It is very simple, and useful.
I have just 1 comment what is pointed in the subject.

I have tried to solve the problem, but until now without any results.

--
István

Submitted by István Gyurán (not verified) on Mon, 10/17/2011 - 15:51

thanks

thanks István, I will investigate this issue ASAP.

Submitted by Piotr Rochala on Mon, 10/17/2011 - 17:55

fixed

hey István, I updated my plugin. I tested it on IE8 and it works fine now so hopefully IE9 should work as well.

Submitted by Piotr Rochala on Tue, 10/18/2011 - 00:10

thanks

Hi Piotr,

Thanks for the quick response.
I will try it after work.

Submitted by István Gyurán (not verified) on Tue, 10/18/2011 - 10:45

Thanks

It works. Thanks.

Submitted by István Gyurján (not verified) on Wed, 10/19/2011 - 08:13

It actually works in IE9.

The problem comes from this page and how the plugin javascript file is referenced.
It is referenced from GitHub, but GitHub serves the .js file as "text/plain" and not "text/javascript" MIME type.
IE9 considers this as a security problem and does not load the script file.

Submitted by Didier G. (not verified) on Fri, 01/13/2012 - 13:36

thanks

thanks Didier! I missed that. I tested it in IE9 but never when linked from github. I'll fix it soon.

Submitted by Piotr Rochala on Sat, 01/14/2012 - 09:11

updated

Hey, I updated my article page to load it from my own server and not from github. It should be behaving ok on IE now.

Submitted by Piotr Rochala on Sun, 01/15/2012 - 08:42

Multiscrollbar

hi,

i had a problem when the user was resizing the window ( the slimscroll was applied to a div that depends of viewport size ) . So i invented a way to update scrollbars during a resize event without creating a new one.

Mys solution to this problem :
var resizeHandler = function(element, scroll_id) {
var me = $(element);
me.css("height",$(window).height()+'px');
$(".slimScrollDiv"+scroll_id+"").css("height",$(window).height()+'px');
var height = Math.max((me.outerHeight() / me[0].scrollHeight)
* me.outerHeight(), 30);
$(".slimScrollBar"+scroll_id+"").css({ height: height + 'px' });
}
element is the variable used when you do $(element).slimScrol([...]);

Also i had a problem with multiscrollbars ( when ressinzing the window ) so i created a way to resize each of these scrollbar independently. My solution was to create a counter for each slimscroll applied.

Submitted by Benjamin B. (not verified) on Tue, 10/18/2011 - 22:07

Little error in the given

Little error in the given script :
var resizeHandler = function(element) {
var me = $(element);
me.css("height",$(window).height()+'px');
$(".slimScrollDiv").css("height",$(window).height()+'px');
var height = Math.max((me.outerHeight() / me[0].scrollHeight)
* me.outerHeight(), 30);
$(".slimScrollBar").css({ height: height + 'px' });
}

Submitted by Benjamin B. (not verified) on Tue, 10/18/2011 - 22:10

great idea

Thanks Benjamin, this is a really good idea. Scrollbar adjusting to the changing size of the container makes perfect sense. I will add this feature in the upcoming patch.

Submitted by Piotr Rochala on Tue, 10/18/2011 - 23:15

Implemented?

Has this been implemented? Essentially the way the script can take the parent width if applied to the height would achieve this functionality. Is that correct?

Submitted by Mike (not verified) on Sat, 02/18/2012 - 19:48

great idea, but there is a glitch

If there are more than one slimScrolls in a page, if Im not wrong, the above script will apply the same height to ALL scroll regions (since we are applying height property by class [$(".slimScrollBar")], not by ID). Is there a way to refer just that particular scroll region and re-apply height?

Submitted by Senthil C (not verified) on Sat, 04/07/2012 - 19:11

great idea, but there is a glitch (RESOLVED!!)

Hi,
I managed to resolve the glitch I reported when re-applying height property to $(".slimScrollBar") (Benjamin's idea). That will re-apply height to ALL slimScroll regions in the page; Benjamin, Im not sure if I understood your solution correctly, but you can confirm on this.

Anyways, you can try this:

STEP 1:
--------
While instantiating slimScroll, pass an extra parameter "id" with some value
$('#dvScrollTest').slimScroll({
id: 'dvScrollTest',
size: '5px'
});

STEP 2:
--------
In the source file (version 0.5.0), apply a class to the wrapper DIV (divS) used for bar,rail etc.
NOTE: make use of the "id" parameter and apply different class name to each scroll region (I have used the prefix "clsSlim_" for class name)

// do it for every element that matches selector
this.each(function(){
...
divS = "<div class='clsSlim_" + o.id + "'></div>",

STEP 3:
--------
Now, when you want to resize slimScroll (to follow its parent's changed height), simply re-apply the height property for wrapper DIV:

$(".clsSlim_dvScrollTest").css("height",$('#dvScrollTest').height() + 'px');

Hope its of use to someone. Thanks.

Submitted by Senthil C (not verified) on Sun, 04/08/2012 - 08:32

I am a Beginner

kindly explain this code for the beginner.
Where to add this code?

Submitted by Raja (not verified) on Wed, 01/11/2012 - 12:03

OR

Submitted by Alex (not verified) on Tue, 12/06/2011 - 14:17

Demo on this page not working on IE8+

Hi Piotr,

Thanks for the plugin. Your demo on this page works sleek in Chrome, however, it doesn't work on IE8, and IE9.. so probably you'd need to update your code somewhere.

Thanks,
Totti

Submitted by Totti Anh Nguyen (not verified) on Wed, 10/19/2011 - 08:00

works for me?

Hey Totti, thanks for your comment.
Can you specify what exactly doesn't work? I just checked this demo on IE8 and it works fine. (Well, rounded corners from scrollbars are missing, but this is known limitation of Internet Explorer). Everything else - scrolling, fade in/fade out, mouse-wheel scroll and so on is ok.

Submitted by Piotr Rochala on Wed, 10/19/2011 - 11:00

It works on IE8 & 9 , just

It works on IE8 & 9 , just need to use the original code , not minified ( that was my solution )

Submitted by Benjamin B. (not verified) on Wed, 10/19/2011 - 17:30

checked it again

Hey, I checked the minified version and even set up a test case here: http://rocha.la/misc/jsdemos/slimScroll/index.min.htm - everything works fine on IE8 (at least on my pc).

What sort of issues do you see?

Submitted by Piotr Rochala on Wed, 10/19/2011 - 23:03

not working on IE9

First of all, great work you're made with slimscroll.
Now, talking about the problem, I've implemented it in a webpage and it works very well, except that in IE9 the scroll just works with the mouse scroll, it doesn't work dragging the bar with the mouse.
On your test case, works for me in every browser, but on IE9 it doesn't display the scrollbars at all, just plain text on the page and nothing more.

Submitted by Ricardo (not verified) on Wed, 10/26/2011 - 16:56

float does not work

Hey,
at first its a great plugin.
I try to use it with a div that has a float: left. But if I use the plugin the float does no longer work.
Can u tell me what I do wrong.

Submitted by Ronny St. (not verified) on Wed, 10/19/2011 - 18:49

float fix?

Hi Ronny,

I will have a look into it, but for now, you could create inner div that holds scrollable content, so for example:

.. text.. to.. scroll...

Where #news is your div with float and #news_content is div where you apply $('#news_content').slimScroll();

Submitted by Piotr Rochala on Wed, 10/19/2011 - 23:19

Not working

Hi there,

I really like the plugin, however I cannot seem to get it to function on my website. I am fairly new to code and totally self taught. Here is is where I have used it - http://www.lilyemo.co.nz/work/honouringAMprayer.html, what have I done wrong?

Submitted by Lily (not verified) on Thu, 10/20/2011 - 00:48

jQuery draggable

Hey,

I've noticed that you are missing jQuery Draggable. Add this code to the header of your website, immediately after you load jQuery:

(Or you could just download it yourself from jQuery website, but loading it from Google CDN is easier and faster.)

Submitted by Piotr Rochala on Thu, 10/20/2011 - 08:51

Thanks!

It works great now, thank you!

Submitted by Lily (not verified) on Thu, 10/20/2011 - 09:55

Wonderful job!

I'm here just to congrat you for the wonderful job you've done!
I really loved it!

Regards, Marcos Gonçalves

Submitted by Marcos Gonçalves (not verified) on Thu, 10/20/2011 - 01:52

thanks

Thanks a lot Marcos! I'm glad you like it. Feel free to post a link to your website and show off what you've done with it! :)

Submitted by Piotr Rochala on Thu, 10/20/2011 - 10:26

Position of scroll bar

Hey
I've just tested this plugin and already love it. Great job! Finally no more nasty, ugly scrollbars when making only a part of a site scrollable.
There's just one point i'm missing:
Is it possible in any way to get some space between the scrolling div (or whatever you use) and the scrollbar?

Submitted by Matthias (not verified) on Thu, 10/20/2011 - 17:03

EDIT:

ps: i'm using it on a position:absolute <div>, padding didn't help

Submitted by Matthias (not verified) on Thu, 10/20/2011 - 17:07

Could I also suggest this

Could I also suggest this please

Also should the scroller detect if it is needed or not? On my site it appears even if the content doesnt need to scroll

You can see the effect here (and you can see the bar working on the about us page)

Site is an ongoing project so may change

Lee

Submitted by Lee (not verified) on Sat, 10/22/2011 - 20:01

Paste fail http:/

Paste fail http://virtualdirection.com/index.php#morestuff

Submitted by Lee (not verified) on Sat, 10/22/2011 - 20:09

good point

Hey Lee, good point. I will patch it in the next version.

Submitted by Piotr Rochala on Sat, 10/22/2011 - 23:39

Super :) It would be great.

Submitted by Viktor (not verified) on Tue, 10/25/2011 - 10:25

Super. Ver. 0.2.4 works

Super. Ver. 0.2.4 works perfect. Thank you very much for your work.

Submitted by Viktor (not verified) on Fri, 10/28/2011 - 09:17

Multiple

Is it possible to add the scroller to all elements with a specific selector. I tried and it doesnt show the scroller?

Thanks

Lee

Submitted by Lee (not verified) on Fri, 10/21/2011 - 19:37

Multiple elements now allowed

Hi Lee,

Thanks for spotting this defect. I have updated my plugin. Please download newest version - v0.2.3 and you will be able to use $('.className') selector to attach the slimScroll to multiple elements at once.

Submitted by Piotr Rochala on Sat, 10/22/2011 - 16:04

Thats working on all elements

Thats working on all elements now

As commented earlier, should the scroller be showing up on elements that dont need to scroll? Is it possible to check this, so the scroller is disabled if the content is not larger than the div?

Thanks

Lee

Submitted by Lee (not verified) on Sat, 10/22/2011 - 20:02

UL elements?

every time i add a <ul> element, the scroll stops working.
any fix?

Submitted by Jack (not verified) on Sun, 10/23/2011 - 06:01

Variable content

Hi there,

Love the scroller! However, does anybody have any simple amends to this code that would update the scroller depending on variable div content, similar to Benjamin B's solution for viewport size?

Thanks.

Submitted by James (not verified) on Mon, 10/24/2011 - 17:44

pending fix

Hi James, I've seen someone already submitted fix to my github repo tackling this issue. I'll review and create new release.

Submitted by Piotr Rochala on Tue, 10/25/2011 - 10:12

pending fix

I'm using the latest from github, and the scrollbar doesn't seem to update itself with the content. Is there an option that needs to be set?

Submitted by Louis (not verified) on Sun, 02/12/2012 - 02:52

little mod

I've added little mod.
When content is smaller than container - slider sholdn't appear. So I added one line in your code:

var height = Math.max((me.outerHeight() / me[0].scrollHeight) * me.outerHeight(), minBarHeight);

if (height+"px"==cheight) { height = 0 } //added line

bar.css({ height: height + 'px' });

Submitted by qczy (not verified) on Wed, 10/26/2011 - 08:25

already fixed

hey qczy,
good news - this fix has been already added in the latest release. Download version 0.2.4 from github or jQuery Plugins page and you shouldn't see the scrollbar anymore when content is not long enough.

Submitted by Piotr Rochala on Wed, 10/26/2011 - 11:46

almost

When using 'alwaysVisible: true' to prevent slider from hiding it still shows full-height slider

adding:

if(barHeight==me[0].scrollHeight) { barHeight = 0 }

in 236 line of new ver (0.4.3) will do the job.

Submitted by qczy (not verified) on Sat, 01/07/2012 - 22:28

but thanks for reply

by the way - some flattering stuff - good plugin

Submitted by qczy (not verified) on Sat, 01/07/2012 - 22:31

Border

Hi, scroller is working well now.

Just the one last thing for me, as mentioned above, can we get a padding option when the scroller is needed to prevent it overlapping the content?

Thanks

Lee

Submitted by Lee (not verified) on Wed, 10/26/2011 - 12:53

Starting at the bottom of content

Thanks for the great plugin, works awesome!

I do have a question though. How would I go about programatically getting to the bottom of the div that has the slimScrollBar? For example, I have a comment section that has comments going top to bottom from the earliest to the latest. If I want the user to skip down to the last comment at the bottom with a button click, and the div uses this slimScrollBar, what would be your suggestion to achieve that?

Submitted by mnshyn (not verified) on Thu, 10/27/2011 - 17:00

?

Have you managed to solve this? I am trying to figure out the same things as well.

Submitted by Kenrick (not verified) on Wed, 11/09/2011 - 13:40

makes sense

Thanks mnshyn, your suggestion makes sense. I'll add the option to allow automatic scroll-to-bottom.

Submitted by Piotr Rochala on Wed, 11/09/2011 - 17:36

jQuery slimScroll

What is slimScroll?

Download

Set up

Examples

Documentation

Share

Comments

Pages

Comment

Plain text

Follow me

Recent comments

Recent Articles

What's going on?

Contact Me