jQuery slimScroll

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

What is slimScroll?

slimScroll is a small (3.7KB) 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.1.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.9.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.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 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,
    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!

Tags:

JavaScript

jQuery

Comments

Custom Version without bug

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

Submitted by Fakeoff (not verified) on Wed, 11/30/2011 - 16:05

Fancybox

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!

Submitted by John (not verified) on Wed, 11/30/2011 - 20:24

try out my custom version. I

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

Submitted by Fakeoff (not verified) on Thu, 12/01/2011 - 09:36

Scroll entire page when reaching top or bottom

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.

Submitted by Dion (not verified) on Fri, 12/02/2011 - 05:10

Page scrolling when reached div limit

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

Submitted by mickael dervaux (not verified) on Fri, 12/02/2011 - 11:56

Thanks!

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

Submitted by Dion (not verified) on Sat, 12/03/2011 - 22:20

Mouse wheel event

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

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

Horizontal Scrolling

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?

Submitted by Katie (not verified) on Tue, 12/06/2011 - 21:56

kittens

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.

Submitted by Piotr Rochala on Wed, 12/07/2011 - 17:04

not just

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!

Submitted by Thomas (not verified) on Sun, 02/05/2012 - 20:50

You win

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

Submitted by Daniel Costalis (not verified) on Fri, 08/24/2012 - 18:05

Fixes Scroll Update When Div Update Content

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

Submitted by Saiful Amri (not verified) on Sun, 12/11/2011 - 16:23

Margin Bottom ScrollBar...

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

Submitted by Saiful Amri (not verified) on Mon, 12/12/2011 - 07:12

commentaires pas très lisibles

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

Submitted by adama (not verified) on Mon, 12/12/2011 - 11:58

previous version v0.4.3

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

Submitted by Mark (not verified) on Tue, 12/13/2011 - 12:32

good point

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.

Submitted by Piotr Rochala on Wed, 12/21/2011 - 18:34

its not working for IE9 :(

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?

Submitted by Sougata Chandra (not verified) on Wed, 12/14/2011 - 03:42

The slimscrolldiv is binding twice

The slimscrolldiv is binding twice...

Submitted by kt (not verified) on Wed, 12/14/2011 - 11:20

visible of rail

how to remove rail when smaller content in scroll area

Submitted by anna (not verified) on Fri, 12/23/2011 - 09:04

un bind slimscroll

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

Submitted by Pham ngoc hoa (not verified) on Wed, 12/28/2011 - 07:35

Unbind

Is there a way to unbind slimscroll?

Submitted by Kenrick (not verified) on Thu, 01/19/2012 - 08:49

add stop() for fadeIn

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

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

Submitted by InspiredJW (not verified) on Wed, 12/28/2011 - 07:44

parameters for scrollTo functionality

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

Submitted by James (not verified) on Tue, 01/10/2012 - 13:00

iPad/Iphone issue

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.

Submitted by Filippo (not verified) on Wed, 01/11/2012 - 20:00

thanks

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.

Submitted by Piotr Rochala on Thu, 01/12/2012 - 11:42

Thanks....

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.

Submitted by Filippo (not verified) on Thu, 01/12/2012 - 18:29

Not work with setting the top and left position of the div

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

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>

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

});
</script>

</body>
</html>

Submitted by hsb (not verified) on Thu, 01/12/2012 - 07:34

Horizontal Scrolling?

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

Submitted by Cristian Rojas (not verified) on Thu, 01/12/2012 - 16:39

Doesnt work in IE9

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.

Submitted by Piercy (not verified) on Fri, 01/13/2012 - 14:36

IE9 Working

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

Submitted by Piercy (not verified) on Mon, 01/16/2012 - 12:56

just wanna say

just wanna say
perfect and fully useful for me

Submitted by tonylo (not verified) on Sat, 01/21/2012 - 10:28

thanks!

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

Submitted by Piotr Rochala on Sun, 01/22/2012 - 21:57

scrollIntoView

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

Submitted by Niclas (not verified) on Tue, 01/24/2012 - 12:33

try start property

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

Submitted by Piotr Rochala on Tue, 01/24/2012 - 19:14

container height

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?

Submitted by brem (not verified) on Fri, 01/27/2012 - 16:34

Refresh scrollbars on window resize

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

Submitted by Pavel [pavlos@i... (not verified) on Tue, 01/31/2012 - 09:08

thank you.

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.

Submitted by YES (not verified) on Wed, 02/01/2012 - 10:04

Removing Scrollbar

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.

Submitted by Andrea (not verified) on Sun, 02/05/2012 - 18:11

Removing Workaround

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

Submitted by Andrea (not verified) on Sun, 02/05/2012 - 21:31

I really agree on that !

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

Submitted by Romza (not verified) on Fri, 07/13/2012 - 12:18

iPhone/iPad

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

Submitted by Cosmin (not verified) on Wed, 02/08/2012 - 00:37

Slim Scroll not working under asp:update panel

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

Submitted by Azhar (not verified) on Wed, 02/08/2012 - 10:36

start: 'bottom' is not working for me

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.

Submitted by Jamie (not verified) on Fri, 02/10/2012 - 15:39

does anyone know how its

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

Submitted by Jamie (not verified) on Sun, 02/12/2012 - 20:15

sorry here is a example of my

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

Submitted by Jamie (not verified) on Sun, 02/12/2012 - 20:51

try .scroll()

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

Submitted by Piotr Rochala on Mon, 02/13/2012 - 20:13

endless scroll

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?

Submitted by Tomer Weller (not verified) on Mon, 02/13/2012 - 09:50

How to reset

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?

Submitted by Bernard (not verified) on Tue, 02/14/2012 - 09:15

Want to remove Scrollbar

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.

Submitted by Dheeraj (not verified) on Tue, 02/14/2012 - 10:08

Slimscroll v.0.5.0

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

Submitted by Dom (not verified) on Wed, 02/15/2012 - 20:05

jQuery slimScroll

What is slimScroll?

Download

Set up

Examples

Documentation

Events

Share

Comments

Pages

Comment

Plain text

Check out my latest game!

Follow me

Recent comments

Recent Articles

What's going on?

Contact Me