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.

Cool image

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.

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.

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'
			  });
Cool image

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.

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.

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>

	$('#slimtest2').slimScroll({
		position: 'left',
		height: '150px',
		railVisible: true,
		alwaysVisible: true
	});

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.

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.

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.

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>

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

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

Submitted by Andrew (not verified) on Thu, 02/16/2012 - 23:10

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

Submitted by Pellumb Hasani (not verified) on Sun, 07/08/2012 - 19:26

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

Submitted by Pellumb Hasani (not verified) on Sun, 07/08/2012 - 20:41

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

Submitted by Dom (not verified) on Sat, 02/18/2012 - 13:41

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.

Submitted by Piotr Rochala on Sat, 02/18/2012 - 16:32

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

Submitted by Dom (not verified) on Sun, 02/19/2012 - 06:55

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

Submitted by Dom (not verified) on Wed, 02/22/2012 - 02:01

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?

Submitted by Krunal Shah (not verified) on Wed, 02/22/2012 - 20:02

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

Submitted by Dom (not verified) on Thu, 02/23/2012 - 01:44

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

Submitted by Dom (not verified) on Thu, 02/23/2012 - 01:48

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

Submitted by jquery newbie (not verified) on Thu, 02/23/2012 - 18:52

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

Submitted by Markus Klug (not verified) on Fri, 02/24/2012 - 13:57

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.

Submitted by Piotr Rochala on Fri, 02/24/2012 - 16:47

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

Submitted by Alwin (not verified) on Mon, 03/05/2012 - 05:21

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

Submitted by viruszgirl (not verified) on Mon, 03/05/2012 - 06:43

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

Submitted by Rob (not verified) on Thu, 03/08/2012 - 20:18

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.

Submitted by delkant (not verified) on Sat, 03/10/2012 - 21:43

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.

Submitted by Daniel (not verified) on Sat, 03/10/2012 - 23:17

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

Submitted by Tony (not verified) on Mon, 03/12/2012 - 16:10

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

Submitted by Anonymous (not verified) on Mon, 03/19/2012 - 21:10

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?

Submitted by Vera (not verified) on Tue, 03/20/2012 - 15:38

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

Submitted by Piotr Rochala on Wed, 03/21/2012 - 08:41

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

Submitted by adi (not verified) on Wed, 03/21/2012 - 15:39

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

Submitted by themepixels (not verified) on Fri, 03/23/2012 - 07:21

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?

Submitted by Andrea (not verified) on Fri, 03/23/2012 - 08:56

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>

Submitted by Jeffrey Ferris (not verified) on Mon, 03/26/2012 - 23:26

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

Submitted by Pedro (not verified) on Wed, 03/28/2012 - 16:59

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

Submitted by Brian (not verified) on Wed, 03/28/2012 - 18:22

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

Submitted by wendy (not verified) on Tue, 04/03/2012 - 00:55

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

Submitted by Ahmad (not verified) on Wed, 04/04/2012 - 11:43

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.

Submitted by Senthil C (not verified) on Fri, 04/06/2012 - 08:44

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

Submitted by Chetan (not verified) on Sat, 04/07/2012 - 19:21

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!

Submitted by Animesh (not verified) on Mon, 04/09/2012 - 16:56

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)

Submitted by Dragan (not verified) on Thu, 04/12/2012 - 12:34

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?

Submitted by Piotr Rochala on Sat, 04/14/2012 - 11:23

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

Submitted by dragan (not verified) on Sun, 04/15/2012 - 17:51

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

Submitted by mahan (not verified) on Fri, 04/13/2012 - 06:59

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?

Submitted by Piotr Rochala on Sat, 04/14/2012 - 11:21

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

Submitted by Neeraj Dev (not verified) on Fri, 04/13/2012 - 07:18

how to use the horizontal scroll ?

Submitted by Lê Văn Chiến (not verified) on Sun, 04/22/2012 - 05:28

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.

Submitted by Piotr Rochala on Mon, 04/30/2012 - 13:33

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

Submitted by Suparjo Zheng (not verified) on Mon, 04/23/2012 - 09:45

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!

Submitted by Piotr Rochala on Mon, 04/30/2012 - 13:35

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

Submitted by panos pavlakis (not verified) on Fri, 04/27/2012 - 21:55

Hi panos pavlakis,

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

Thank you so much!
Piotr

Submitted by Piotr Rochala on Mon, 04/30/2012 - 13:37

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

Submitted by rifai (not verified) on Tue, 05/01/2012 - 08:23

how do you scroll horizontally?

Submitted by brody (not verified) on Wed, 05/09/2012 - 05:56

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

Submitted by Di (not verified) on Thu, 05/10/2012 - 22:53

has anyone managed to make it work on ipad ?

Submitted by Seb (not verified) on Fri, 05/11/2012 - 16:42

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

Submitted by nishant (not verified) on Tue, 05/15/2012 - 14:45

Pages

Comment

More information about text formats

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

Follow me

Recent comments