Scroll doesn't work until the mouse is moved

[alvarotrigo]

I'm creating slimScroll structure dynamically as well as calling the initialization.

I've been able to reproduce the problem in a jsfiddle with a timeout so you can have time to place the mouse over the scrolling div, and without moving it at all, try to scroll. This will show the bug. Slimscroll won't scroll unless you move the mouse.

http://jsfiddle.net/u9P87/9/

Why there's a mousemove event inside the mousedown here?

    bar.bind("mousedown", function(e) {
            var $doc = $(document);
            isDragg = true;
            t = parseFloat(bar.css('top'));
            pageY = e.pageY;

            //why is this here?
            $doc.bind("mousemove.slimscroll", function(e){

[alvarotrigo]

Nothing? No ideas why?

[freddyamsterdam]

The problem you described does not seem to have anything to do with this particular line of code. The problem was still present after commenting out the mousemove event.

[alvarotrigo]

@freddyamsterdam yeah right.

I detected the cause of it. It is entering in the following condition:

function _onWheel(e)
        {
          // use mouse wheel only when mouse is over
          if (!isOverPanel) { return; }

[alvarotrigo]

I see... me.hover() is not fired unless the mouse is moved... This is how it works... I will try to figure something out or just set the isOverPanel to true for my own purposes.

[freddyamsterdam]

You beat me to it, I was just typing the same thing!

Probably has to do with the fact that jQuery .hover() is combination of mouseenter and mouseleave.

[freddyamsterdam]

    // show on parent mouseover
    me.hover(function(){
      isOverPanel = true;
      showBar();
    }, function(){
      isOverPanel = false;
      hideBar();
    });

    me.on('mouseover', function(){
      isOverPanel = true;
      showBar();                
    })
    me.on('mouseout', function(){
      isOverPanel = false;
      hideBar();                
    })  

[alvarotrigo]

That doesn't solve the problem. I already tried it.

I ended up deleting the if (!isOverPanel) { return; } from the _onWheel function. Not quite sure why is it there...

[freddyamsterdam]

Sweet! Works like a charm.

[alvarotrigo]

But it causes another problem... not a proper solution.

Anyone solved this issue??

[jnettik]

So from everything I've seen, knowing the mouse position on page load isn't possible. It is explained well here: http://stackoverflow.com/questions/8013062/how-to-track-mouse-position-from-on-page-load-as-well-as-on-mouse-move

Removing if (!isOverPanel) { return; } hijacks scrolling for the entire page. In my case I have a vertical menu in a fixed drawer (similar to http://designcouch.com/demos/pure-css-drawer-menu.html). If there are more menu items than can fit in the browser window, overflow: auto; should allow for scrolling within the drawer. Without the isOverPanel check, any scrolling outside of the context of a slimScroll region doesn't work.

I did find this fairly hacky solution that relies on a CSS background color that would seem to work http://stackoverflow.com/questions/6586166/detect-mouse-hover-on-page-load-with-jquery.

[alvarotrigo]

@jnettik well done! Have you integrated it with fullPage.js already?

[jnettik]

Not yet. I should have some time later today to test it and get a PR out.

[alvarotrigo]

That's great. Have you submited it as a pull request for this plugin (slimScroll)? It would be nice to have it in the official version as well.

[jnettik]

I haven't . Not sure how I'd get it to work with the plugin. It doesn't have any CSS to add the background-color: transparent; to. Since the class names for the plugin are configurable, I don't know what I could tie any styles to anyway. It works with your plugin because the .fp-scrollable class doesn't change.

The best idea I have is to add the javascript that detects the background color, and add some documentation for people using the plugin to add the style themselves. Or an example, as the documentation seems to be outside GitHub.

I'm open to other ideas if someone has them though.

[magentapose]

@alvarotrigo What is the 'other problem' that removing the line "if (!isOverPanel) { return; } " causes? I've removed that line with no problems!

[alvarotrigo]

Solved by using:

setTimeout(function () {
    $('.text').wrapInner('<div class="scrollable" />');

    $('.text').find('.scrollable').slimScroll({
        height: '250px',
        alwaysVisible: true,
        size: '10px'
    });

    //HERE!
    $('.text').find('.scrollable').mouseover();    
}, 2000);

Online demo

[rgomesf]

can you use something like this?

https://github.com/rgomesf/jQuery-slimScroll/commit/427149c13f0583cb89bf03c6f68a92d595961d9c

[jssuttles]

👍