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

Sorry for the flood,

here is the version without bug. When I tried my custom version on your slimScroll demo, i saw the scrollbar was displayed even if there is not enough content.
So, I add a condition that seems to work (except in IE6 :( )

http://www.2shared.com/document/SnngMtA5/slimScroll.html

I've a problem using it in a popup of Fancybox. It say:

Error: 'style' is null or not an object

But if I open that view without Fancybox it's works. Any idea?

Thanks!

try out my custom version. I made a test and it works great with fancybox ^^

First, plugin is Awesome, love it.
So, is it just me or does the page not keep scrolling when reaching the top or the bottom of the div that slimScroll is running on like a normal scrolling div would? I think this should be an option you can turn on or off, would be nice, other than that I love this thing.

I hope that Piotr Rochala does not think that I want to steal his project. I just wanna help and improve the plugin for my website ^^
@Dion : I made some modifications again in the code to add the option that you asked for the scroll on the page when the div limit is reached.
You can download it here : http://www.2shared.com/document/ZoRa60yo/slimScroll.html

Hope that it will help!!!

Bye

@mickael dervaux
Thanks, that works like a champ! I appreciate it.

Awesome plugin... i got it working easily first time. compared to other plugins i tried yours is by far the best. However, the mousewheel scroll event doesnt work in IE, Firefox OR Opera for me. Chrome and safari are fine! so its obviously not a webkit thing!

ive used the plugin on a div that is absolutely positioned if that makes any difference. Other plugins seemed to have problems with absolutely position elements.

Maybe a bug fix for the future!

Cheers

Hey, I was wondering if there was a capability for side scrolling, or if anyone can point me in the direction of where to look for something that matches the style of this but can horizontally scroll?

Hey Katie,
Every time someone uses horizontal scrollbar a kitten dies. Horizontal scrollbars are bad design in most of the cases and I am not planning on adding them any time soon (unless demand is ridiculously high). You're welcome to modify plugin yourself though.

Hi Piotr,
It's a great script although I'm also concerned by the horizontal scroll problem.
It does happen that a horizontal scroll bar appears while displaying content. A very long word in a small space, a line of formatted code (there are regular horizontal scroll bars in the code on your page), a too big image... It does happen without even us knowing while it's mostly caused by inappropriate content.
I'm looking at the posts, and the fact you've been so quick-on-demand for new features, I wanted first to try to convince you to add that one. At the moment I can't use this script as is because the horizontal hidden content will be invisible to a standard user, but I will look into the code and give a try to add the feature myself... if you don't !
Btw, "horizontal" is number 2 in the Google suggestions when you type slimScroll - and kittens are dispensable.
Thanks!

You are a huge winner. And not in a foreign prince way. You just win.

Hello...

this plugin is a good, but I have try..and get a problem that is scroll doesn't show all content (target div as scroll) when a content appended something (on wheel all content is show but the problem when drag-gable scrool ) , but I have fixed it just added : line like below ....

if (isWheel)
{
//move bar with mouse wheel
delta = bar.position().top + y * wheelStep;

//move bar, make sure it doesn't go out
delta = Math.max(delta, 0);
var maxTop = me.outerHeight() - bar.outerHeight();
delta = Math.min(delta, maxTop);

//scroll the scrollbar
bar.css({ top: delta + 'px' });
}else{ // Saiful Amri, added same like isWheel condition
//move bar with mouse wheel
delta = bar.position().top + y * wheelStep;

//move bar, make sure it doesn't go out
delta = Math.max(delta, 0);
var maxTop = me.outerHeight() - bar.outerHeight();
delta = Math.min(delta, maxTop);

//scroll the scrollbar
bar.css({ top: delta + 'px' });
}

Thanks, I hope it's can be improved this plugin...

Saiful Amri
http://dagohill.com

And then for dynamic content of the target div, the scroll can be added one of parameters again, that is on CSS, I added margin-bottom : 50px or as conditional div, 50px because I design a more box for append something on the div dynamically.

Thanks...

la couleur des commentaires ne permets pas assez de lisibilité ! oups

the behavior on previous versions better, now once you reached top or at bottom, page scrolls..
have a look at facebook's ticker.. mausewheel on div doesnt affect main scrollbar, once it reached the top or bottom.. so previous behavior maybe should be optional? and of course thanks for such a nice useful script!!

Hi Mark, good point - this should be configurable. At the moment it behaves like any other scrollable element on the page i.e. textarea, iframe or div with overflow:auto. But I agree it would be better if this could be switched on/off. I'll patch it in the next version.

Hi, I tried the code ... no dobut its an amazing one of its kind , but sadly it is not working for IE9. I tried in Firefox and Chrome as well and they seem to be perfect. Is there something that I am missing?

The slimscrolldiv is binding twice...

how to remove rail when smaller content in scroll area

I wonder if there's a way to unbind it?

Is there a way to unbind slimscroll?

for rail and bar, add stop(true, true) on their.

So they can be immediately fadeIn without waiting for pre-ordered fadeOut :)

Hi Piotr,

Thanks for all previous updates and amends! Would it also be possible to add parameters so that slimScroll also boasts it's own 'scrollTo' functionality? I would like to be able to use slimScroll with the jQuery accordion (in a fixed height div) so that the 'onchange' function will scroll to the new header when the accordion is triggered.

slimScroll seems the most elegant way round this function that the UI team unfortunately forgot to add!

cheers

Hi, congratulation for your scrollbar plugin!
Have you verify a safari for iPad/Iphone issue.
I've used plugin for my project, and of corse i've verify there's a problem with scrollbar functionality.
I've update at latest version (0.4.3) but the problem still remain.
Thanks.
F.

Hi Filippo, thanks for your feedback. I am aware of this issue and I'm working on it. Will try to put this fix it in the next version.

Hi there!
Thanks for replay.
I'm waiting for fix.
Meantime, while Surfing google groups, i've found this lines of code, referred to Jquery scroll function:
if( navigator.userAgent.match(/iPad/i) !== null ){
window.onscroll = function(){ check(); } //jQuery.scroll() not compatible w/iPad as of jQuery 1.5.2. This method /still/ isn't working reliably on user scroll.
} else {
w.scroll(check);
}

I'm not sure if this case is applicable to Slimscroll, but i post it equally, if it can help you.
The link to the entire post is:
http://code.google.com/p/jquery-appear/issues/detail?id=13

waiting for your replay
F.

Base on the demo, I try to set the position of a div, and it does not work and always find error by FireFox error Console.
Following a simple code about the problem. If I remove the left and top position of css, the everything work fine.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>slimScroll demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<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>

<script type="text/javascript" src="slimScroll.min.js"></script>

<style type="text/css">
.multi-test {
position:absolute;
<!-- Remove the top and left setting, and it work-->
top:335px; left:300.00000062821px;

z-index:100;
}
</style>
</head>
<body>
<div class="multi-test">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam sem, imperdiet at mollis vestibulum, bibendum id purus. Aliquam molestie, leo sed molestie condimentum, massa enim lobortis massa, in vulputate diam lorem quis justo. Nullam nec dignissim mi. In non varius nibh. Proin et eros nisi, eu vulputate libero. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis ultricies augue id risus dapibus blandit.</p>
<p>Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.</p>
<p>Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.</p>
</div>

<script type="text/javascript">
$(function(){

//multiple elemenets
$('.multi-test').slimScroll({
width: '100px',
height: '150px'
}
);

});
</script>

</body>
</html>

Hi, as first I want to thank you by the plugin. I have an issue when tested it, it's when the window is resized: the plugin's box continue with the same size and isn't growing the same as window.

Also I want to can use this same plugin to horizontal scrolling, how can I do it?

Thanks for responding

Hey, Was testing this and even converting it to do horizontal scroll bars (we have very specific reasons for doing this). Then after testing i found it didn't work in IE9. I have had to remove it from our site for the time being but hope to add it again in the future. As for kittens dieing due to horizontal scroll bars. There are many reasons for them in todays world. One of which is probably your development environment/text editors. I hope that you overcome your fear of them, your fear of kitten killing and realise that in some cases they are necessary.

Hey, I See you got it working on IE9. Awesome. I have a small problem, our users are selecting from a treeview in a div. As the content expands we want the scrollbars to appear. Unfortunately, it doesnt seem to be firing the hover method as the mouse is already over the div. I presume this is because the mouse is already ontop of the div. Can you think of anyway around this? Or maybe a way to fire the hover event when the div content changes?

Thanks,
Piercy

just wanna say
perfect and fully useful for me

Thank you tonylo, I'm glad you found it useful!

Hi,
Thank you for a great plugin.

Is there a way to scroll to a selected element? Similar to scrollIntoView().
Smooth animated scroll would be even better ;)

/Niclas

Hey Niclas,

Try 'start' config option. You can pass jQuery selector and it will scroll to offsetTop of the passed element. Animation won't be smooth though.. good idea for one of the next releases ;-)

When I wrap a div using your plug-in, it always seems like the upper-level div resizes the container a couple of pixels (5 or so). So it is always 5 or so pixels off. Any idea why?

Hello.

First, congratulations on your fine work!
I have been using it for some time and noticed that the scroll bars are not refreshed when the size of the window is changed.

So, in version 0.4.4 after line 239 -> getBarHeight();
I added this:

$(window).resize(function() {
getBarHeight();
showBar();
});

I seems to be working fine.

Just my two cents,

regards

hello. you are my hero. I have blacked out with rage five times in the past 24 hours over other so-called jquery scroll pane extensions. where they have failed, yours has soared. I will be using your plugin exclusively from now on.

Hi!
Thank you very much for this useful tool!
I have a question though: is it possible to remove the slimscroll from a div once you don't need it anymore?

Thank you.

Hey, I've found a workaround to remove the wrapper that the plugin insert, but there should definitely be a destroy option ;)

Or at least allow the plugin to be called with a new height option !

I would be really happy if you do it :D

ps: sorry for my bad English

Hey, thanks for this amazing plugin :)

Do you have any news on iOS scrolling support?

Right now I am using the code someone linked to in the comments (http://jsfiddle.net/mfXMn/), but it disables any functionality on the element I call it on.

In that code, If I only keep the e.preventDefault() on the 'touchmove' event, I am not able to pinch in/out or move when zoomed in.

Looking forward to a solution, if any :)

I have div arrangements wrap inside update panel control of asp.net 4.0 when update panel is added the slim scroll does not work if applied inner divs...an as i remove it works fine... what is the cause

When the content in the div loads (which I get using ajax) I set it to be at the bottom and that's fine but when I hover the scroll bar is at the top and when i start to wheel down then it jumps to the top of the content.

does anyone know how its possible to keep the "start: 'bottom'" even when a new element has been appended. (i.e. for a chatbox)

sorry here is a example of my problem http://jsfiddle.net/DY9CT/2/

hey Jamie, you can try .scroll() function added in release 0.5.0. You could scroll by .offsetHeight of your newly added element.

Hi,
Is there a way to catch the "got to bottom" and "got to top" events so it will be possible to implement endless scrolling?

Hi thank you for this nice plugin.

I have a query, i have page that whenever it resize i also resize the DIV, how can i reset the height of the scroll? do you have this feature in this plugin?

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

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

randomness
randomness