nested scroll areas - inner scroll does not get focus

[haveboard]

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.

Today I ran into the same situation and fixed it. You can find my fork here: https://github.com/9livesdevelopment/jQuery-slimScroll

I also fixed an issue with checking if it's already bound. It used hardcoded values so when you override the defaults the check wouldn't work. Now it contains this code

    //ensure we are not binding it again
    if (me.parent().hasClass(o.wrapperClass))

Anyway,

My solution for the issue was to introduce a special class .slimScrollPriority. This is used to set a global variable called priorityScrollingActive to true. You can find it top of the js file.

To bind them this is what I do:

            $('.slimScroll').slimscroll({
              color: '#000',
              size: '8px',
              width: '100%',
              height: '100%'
            });

            $('.slimScrollPriority').slimscroll({
                  color: '#000',
                  size: '8px',
                  width: '100%',
                  height: '100%',
                  wrapperClass: 'slimScrollDivPriority'
            });   

It works very smooth for me. If you have any questions let me know and I'll see what I can do to help.

Cheers,
René
9Lives Development.

[nsitu]

René, Is it possible to nest/embed multiple vertical scrolling areas within a single horizontal scrolling area? Do you have an example of this?

[nsitu]

I think I've got a solution, by copying your slimScrollPriority method over to the slimScrollHorizontal.js, however, it only works when alwaysVisble = false

I am not sure if it will work with my "hack".

Tbh it isn't the most beautiful solution I've used, but it does the job for our project.
A better solution would be for the slimscroll object to have children and keep track if children are scrolling. Actually block parents :)

Unfortunately I don't have to the time to update the library at the moment :(