replace "srcTarget" to "srcElement"

how can I scroll always to the end of the

how can i find the scrolling position? when it reached eg 500px, i want to scroll top

See http://fiddle.jshell.net/p9xMt/show/ for example.

In IE8 you cannot scroll with the mousewheel. I'm not quite sure if you can fix it, but jScrollPane is able to scroll with the mousewheel in IE8.

I used it for the chat function which is dynamic content and i need to keep the scrollbar always on the bottom of content (latest content always from the bottom). How should i do this from this plugin?

Right side scroll init

 $('#scrollSlim').slimScroll({
                disableFadeOut: true,
                railVisible:true, 
                distance: 3,
                size: 7
            });

User scroll content and doing some action. Now i need return scroll position in top. I'l do this programmatically like this:

$('#scrollSlim').slimScroll({scrollTo: 0})

Content is scrolled fine, but scroll visible div element with class="slimScrollBar ui-draggable" in right side doesn't changed his position. When user scroll mouse, content jump to the old position

I apply .slimScroll({height: '250px'}) to a div which initially has no content. If I press the mousewheel then the page is scrolled.

It seems that allowPageScroll:false just works when the div has more content than the size of the div, this is, just when the scroll appears. IMHO the page should not be scrolled in that case.

Hello there, thank you for your already great plug-in!

I want to add gradients to the top/bottom of my content so that it fades out, if the content is larger than the surrounding scroll-div. But I also want the top gradient to fade out, if the scrollbar reached the top, and the same for the bottom gradient. Therefore, I'd ask you to add special events like "reachedBottom" and "reachedTop" that are trown in these cases.

Alternatively (or better additionally) it would be great, to have an option for gradients being added automatically by your script (with an option to define the color, as well). But primarily I'm asking for the events as they offer more (and custom) possibilities.

There would be even more possibilities, if it was possible to get the actual position and the maximum (bottom) possition of the scrollbar (each in pixels) in an event that is thrown each time that the scrollbar changes its position. This way it would be possible (for example) to have "growing" and "shrinking" gradients at the top/bottom depending on how far away the scrollbar is from its top/bottom position. Android (at least Samsung) smartphones use this effect a lot, already.

It would be great to get some feedback whether you're planning to investigate in this features, or not. Thank you! :)

Hello,

How comes this code

    if (me.parent().hasClass('slimScrollDiv'))
    {
        // start from last bar position
        var offset = me.scrollTop();

        // find bar and rail
        bar = me.parent().find('.slimScrollBar');
        rail = me.parent().find('.slimScrollRail');

doesn't use the configuration parameters? Like below:

    if (me.parent().hasClass(o.wrapperClass))
    {
        // start from last bar position
        var offset = me.scrollTop();

        // find bar and rail
        bar = me.parent().find('.' + o.barClass);
        rail = me.parent().find('.' + o.railClass);

Would it cause any problems, doing things that way?

I have an region that I add and remove items from through ajax requests using slimScroll. When I call slimScroll on the region after additional elements have been added or removed, the region is given additional scrollbars.

As a workaround, I am manually removing the elements added by slimScroll and then calling slimScroll() again.

I am new using slimScroll and would greatly appreciate any suggestion on the above problem.
As soon as I insert iframe between the recommended div as shown below, mouse scrolling stops working in firefox (scrolling by dragging still works). Google Chrome browser works fine.

Example:

Thanks

Hello,
slimScroll seems to be having a problem with usage of percentage instead of pixels. Are you able to look at this?

I found this question on StackOverflow and peeked at your code. I didn't see any way to set the scroll position from an external source, and have it update the scroll bar. So I added a bind/trigger method described in my answer there.

I would have just forked the repository and submitted a pull request, but I figured you might want to use a different name or use another method. So I'll just add this issue as an enhancement request :)

Nice work by the way!

Hi

Your plugin is realy cool! but i think i found a bug in the version 0.6.5 (that's the current one here on GitHub)

Line 51 should be «o.wrapperClass» instead of «'slimScrollDiv'»
Line 54 should be «o.scroll» instead of «scroll»
Line 57 should be «'.' + o.barClass» instead of «'.slimScrollBar'»
Line 58 should be «'.' + o.railClass» instead of «'.slimScrollRail'»
Line 61 should be «o.scroll» instead of «scroll»

Cheers Pascal

I want to be able to scroll the entire website from a scrolling div after that div is at the top or bottom. Makes sense?

I am using v 0.65... from my reading, it is suppose to work in Android or iPhone, but in my case, it is not working when iframe is involved.

Anyone has any suggestions?

I've implemented Slimscroll using jQuery 1.8.0.
When loading the script I get this message in Firebug:

Exposing chrome JS objects to content without exposedProps is insecure and deprecated.
See https://developer.mozilla.org/en/XPConnect_wrappers for more information.

I tried to find out where in Slimscroll the error originates. And for now it seems to be comming from the showBar function, especially the bar.stop(true,true).fadeIn('fast');

Now this does not seem to be off, but then again, maybe you might immediatly know why this error occurs.

When setting alwaysVisible: true together with height: '100%' the scrollbar will not reflect the height of the document, but simply be just as tall as the scroll rail. When the scrollbar is clicked, it updates to the correct length/height.

Given that the jQuery UI is >~350 kB, I'd rather include a basic version which contains only that which is needed for slimScroll to work. I currently don't use jQuery UI and have no plan to include that many lines of JS just to get this plugin working.

Or even better, stop depending on it entirely, but I guess that's not going to happen.

Thanks for your great work!

Hi,

The scrolling gets really fast(can not stop the cursor) if you put very long contents.

Thanks.

after certain lines/height the content is clipped in the div slimscroll is attached to.

set allowPageScroll: true

page and content together scroll

Given this code:

<div id="parent">
  <div id="scrollable">
     [.....]
  </div>
</div>

<style>
  #parent { height: 100px; }
</style>

Let's run slimScroll:

jQuery('#scrollable').slimScroll( { height: 'auto' } );

If later I need to increase/decrease the height of #parent then the size of #scrollable is not updated according, and the worst: there is NO way to update it. Calling again to .slimScroll( { height: 'auto' } ) has no effect, so no way to go.

Do I miss something? or is it a limitation?

Hi, i am soo much in love with slimscroll! Thans you very much for bringing it to us.

Now, i am building à website for the iPad specifically and slimscroll is set to work on it for
Two divs on the same page. No problems there!

However, in those two divs i load the contents of à html file. And in it are anchor links etc. So, clickable content. It seems that slimscroll is preventing the user from clicking (tapping) it. If i remove slimscroll links work ok..

Can you give me some advise what to do now? It must be something im doing wrong.....

I cannot believe that this can't work! Thanks again for the work you put in slimscroll!

Uncaught TypeError: Object [object Object] has no method 'draggable'

Can anyone help? thanks!

I am using chrome.

Hi, I patched the scrollContent function so that I can specify wheelStep in the percent of the actual bar height.

delta = parseInt( bar.css('top') ) + y * wheelStep / 100 * bar.outerHeight();

This was needed because I have rapidly a changing container in height, and a low wheelStep value was too slow for the whole list, and a too high value wasn't good enough for the small list either.

This way I can set wheelStep to 50, and have comfortable scrolling speed all the time.

I didn't incorporate the change in a pull request because I don't know how it should be done. (Yet another setting, maybe?)

Hope other finds this useful. Thank you for the great, "set-and-forget...or-enjoy-actually" software!

I have a problem with absolute positioned elements inside the container. The elements is not scrolling.
http://jsfiddle.net/BpHZ7/
Sorry for my English.

I need to nest a scrolling area within another scrolling area.

It seems the only way that you can scroll a nested area is by using the mouse to grab and drag the scrollbar in the nested scroll area.

The only other way is if you are at the top or bottom of the parent scroll area, you can scroll the top inner scroll area up and the bottom inner scroll area down when at the bottom.

mousewheel scrolling on a nested scrolling area does not seem to get focus.

When the cursor enters the slimscroll div area, the scrollbar properly appears, but if you actually scroll the scrollbar will disappear and the only way to get it back is to leave the div and re-enter.

the way facebook does it is if you do nothing for a couple seconds, the scroll bar will disappear but if you move the cursor to the scrollbar area it re-appears. this would be ideal.

I've got your great plugin running fine on webkit (Safari, Chrome) and IE, but it doesn't work at all on Mozilla/Firefox. Even your demo page doesn't work. I tried Firefox v15 and v18.

Any ideas?

Notes: My site is running jQuery v1.9; your site is running v1.6.4; Fails on both.

Hi,

Is it possible to add a padding (or border) to the slimScrollRail?

I'd need something like that:

Thanks for your work ;-)

I have a slimScroll plugin attached to an element:

$('#my-element').slimScroll();

And then tried doing this:

$('#my-element').scroll(0, 100);

Doesn't seem to do anything, even though scroll() is a valid function. There is no documentation on how to change the scroll bar's position programmatically, and a look through the github cases doesn't throw any light on this issue. I'm using version 0.5.0.

How do I achieve this? Also, how do I get the current scroll position?

When running with jQuery 1.8.0, the dragger is invisible. Mouse scrolling doesn't work either.
Simply degrade jQuery to 1.7.2 or lower works.

It would be nice if, apart from the height option we could use another one to specify the max-height, which means that the scroll bar will only start working if the content height is superior to that value but otherwise it wouldn't.

Right now if the height option is specified, the container will always be of that fixed height. In some cases that's not desirable. For example, a list of comments in which we want to scroll them if the height is more than 500px but in the case there are only one or two comments, we don't want to waste 500px of height. Just the needed space for the current content without scrolling.

As far as I know that's not possible right now but would be a nice feature to add.

Since jScrollPane isn't really developed anymore I switched to slimScroll.

But what I really miss is the ability to add arrows and customize the overall look like applying an image as the scrollbar. Is there any way that you guys could add this?

In my situation, I cannot allow the scrollbar to wrap the contents in its own div because that messes with my css selectors. If you could add an option for this that would be awesome! thanks!

I roughly implemented this myself: http://jsfiddle.net/rgmrw/11/ (if you wanna think about incorporating it somehow)

Ooh, another idea: allow the scrollbar to scroll a different window (given by a css selector)!

I've tried v0.6.5 on the Android SDK Emulator with version 3.2, 4.0.3, 4.1.2 and 4.2 of Android and the default browser but scrolling didn't work. Indeed I could see the scroll bars, but they had no functionality.

If div#scrollable contains a div.bottomShadow with position:absolute; bottom:0 and I apply slimScroll() to div#scrollable, them the shadow appears at the top instead of at the bottom.

change this
// use mouse wheel only when mouse is over
if (!isOverPanel) { return; }

for this

// use mouse wheel only when mouse is over
if (!isOverPanel && !isOverBar) { return; }

And the mousewheel will work over the bar too (var bar)

If you change your code... i could follow the futures codes =D

When scrollbar is always visible, I find nice to have the scrollbar unobtrusive unless you hover the scrollable area and therefore the scrollbar becomes darker
.slimScrollBar{ opacity: 0.2 !important; } .slimScrollDiv:hover .slimScrollBar{ opacity: 0.4 !important; }

I really like slimScroll the function

I have recently had a new idea, and want to combine the slimScroll jquery.smooth-scroll to do, but I failed

Can someone please help me?

jquery.smooth-scroll:https://github.com/kswedberg/jquery-smooth-scroll

Web site of failure:http://cracky.hostev.net/new-html/

When trying to scroll the scrollable divs on http://rocha.la/jQuery-slimScroll, the page is also scrolled.

This occurs using Firefox 20.0 on OS X 10.8.3 and the trackpad on a MacBook Air. It doesn't happen when using an external mouse, or when using Safari or Chrome.

Great plugin, I'm hoping to use it extensively.

I have a div in which the comments are updated dynamically. I was reading on the tutorial site comments that this had been looked at about a year ago. It seems like the scrollbar still isn't being updated using the latest version in Github. Is there a method I need to call to update the scrollbar, or is this still being addressed?

Thanks,
Louis

I have the example working in:
http://jsfiddle.net/zPvHg/

But on this demo page:
http://mt.webod.co.uk/turbos/list?view=product&id=1

At the bottom left box it doesn't work it vanishes after clicking the scroll bar. Any ideas?

Many thanks.

When I setup slimScroll with a div and do the following to scroll it to the top:

jQuery('#pr-results').scrollTop(0);

It does scroll, but slimScroll's scrollbar does not update and when clicked it scrolls back to the old location.

First of all it is a really cool and handy plugin, we really like it :)

I get some strange visual effects when slimScroll gets applied on multiple tabs. I use the jQueryUI tabs to sort data, so currently I have 4 of them. The HTML-structure is the common one for ui-tabs:

[div id="tabs"]
[ul]
[li][a href="#tabs-1"]Bla I[/a][li]
[li][a href="#tabs-2"]Bla II[/a][li]
[li][a href="#tabs-3"]Bla III[/a][li]
[li][a href="#tabs-4"]Bla IV[/a][li]
[/ul]
[div id="tabs-1"]contents[/div]
[div id="tabs-2"]contents[/div]
[div id="tabs-3"]contents[/div]
[div id="tabs-4"]contents[/div]
[/div]

When the DOM has been loaded, the tabs are fired via $('div#tabs').tabs(); and after that Im applying slimScroll() for each [div id="tabs-WHATEVER]. I even tried it via the "show event" for the specific tab-panel that was clicked on.

However, it works only for tab 1. The next ones are getting moved down according to their index. It looks like that spaces (invisible slimScrollDivs actually) are getting shown before the contents of the current tab. So for tab 2 the space seems to fit the dimension of tab 1. For tab 3 it appears to be twice the height of tab 1 ...and so on.

Question is, whether someone already tried to apply more than one slimScroll per page or better directly in jQueryUI-tabs. For only one slimScroll in a tab-panel, everything works shiny. As soon as it becomes more than one, something breaks the positioning of other slimScroll-panels.

Any help or hint is appreciated.

Cheerio.

Hi,

first of all I would like to thank you for this great work.

I hope that you add this new feature, when I select text inside container div it should auto scroll to allow me to select more text inside scroller

Hi

I have a vertical dashboard containing an embedded IE7 instance that I've been coding for. It has a static section at the top (for customer & contact details), and then a scrollable section below that for the data available. I wanted to use your slimScroll plugin to give myself a little extra screen space, by getting rid of the IE vertical scroll bar. I ran into problems as the size of the static section can change. What I found was that I had to tear down and re-create the slimScroll functionality each time the size changed, otherwise the scrolled window size would extend past either the top or bottom of the screen.

In achieving this I had to make a few changes to my copy of your plugin (which I will attach the patch for), adding a remove and removeAll option to unbind and remove the previously created elements and events, and also integrating the use of the jquery.mousewheel plugin (http://brandonaaron.net/code/mousewheel/docs).

I thought I'd provide it to you in case it proves useful.

Here's the patch:

29c29,31
<         wrapperClass : 'slimScrollDiv'

---
>         wrapperClass : 'slimScrollDiv',
>         remove : false,
>         removeAll : false
53c55,57
<         railOpacity = o.railOpacity;

---
>         railOpacity = o.railOpacity,
>           remove = o.remove,
>           removeAll = o.removeAll;
57a62,102
>         if (removeAll) {
>           $("." + o.wrapperClass).each(function () {
>               var wrapper = $(this),
>                   rail = $("." + o.railClass, wrapper),
>                   bar = $("." + o.barClass, wrapper);
>               rail.unbind('mouseover mouseout');
>               bar.unbind('mouseover mouseout');
>               if (this.addEventListener) {
>                   wrapper.children()
>                       .not("." + o.railClass)
>                       .not("." + o.barClass)
>                       .unbind("mousewheel");
>               } else {
>                   $(document).unbind("mousewheel");
>               }
>               rail.remove();
>               bar.remove();
>               wrapper.replaceWith(wrapper.contents());
>           });
>           
>           return this;
>         }
>         
>         if (remove) {
>           if (me.parent("." + o.wrapperClass).length !== 0) {
>               var wrapper = me.parent("." + o.wrapperClass),
>                   rail = $("." + o.railClass, wrapper),
>                   bar = $("." + o.barClass, wrapper);
>               rail.unbind('mouseover mouseout');
>               bar.unbind('mouseover mouseout');
>               if (this.addEventListener) {
>                   me.unbind("mousewheel");
>               } else {
>                   $(document).unbind("mousewheel");
>               }
>               rail.remove();
>               bar.remove();
>               wrapper.replaceWith(wrapper.contents());
>           }
>           return this;
>         }        
156c201
<         var _onWheel = function(e)

---
>         var _onWheel = function(e, delta)
163,166d207
<           var delta = 0;
<           if (e.wheelDelta) { delta = -e.wheelDelta/120; }
<           if (e.detail) { delta = e.detail / 3; }
< 
168c209
<           scrollContent(delta, true);

---
>           scrollContent(delta * -1, true);
173c214
<         }

---
>         };
213c254
<         }

---
>         };
217,225c258,261
<           if (window.addEventListener)
<           {
<             this.addEventListener('DOMMouseScroll', _onWheel, false );
<             this.addEventListener('mousewheel', _onWheel, false );
<           } 
<           else
<           {
<             document.attachEvent("onmousewheel", _onWheel)
<           }

---
>           if (this.addEventListener) {
>               $(this).bind("mousewheel", _onWheel);
>           } else {
>               $(document).bind("mousewheel", _onWheel);
226a263
>         };
236c273
<         }

---
>         };
255c292
<         }

---
>         };
270c307
<         }

---
>         };

Pete Howell

replication:
on page creation, initialize using $(element).slimScroll({height:'auto', });
have a button whose onclick does $(element).slimScroll({height:'auto', scrollTo: y+'px'});

what I see:
first click: the scrollbar goes to the proper position, but the scrollable area does not scroll.
subsequent clicks: the scrollable area goes to the proper position, but the scrollbar does not move.