jscrollpane block scrolling parent

Question

Can i make jscrollpne such that parent pane doesnot scroll even when child scroll has reached its bottom. Now when child scrolling reaches bottom scrolling of parent occurs. I want parent to scroll only when mouse is out of child scrollpane.

Answer 1

The behaviour you describe is by design. This is how the native browser scrollbars behave on an element which has overflow: auto. I wouldn't recommend changing it. However, if you wish to then Borgenk's answer is correct, you can use this code:

$('.scroll-pane')
    .jScrollPane()
    .bind(
        'mousewheel',
        function(e)
        {
            e.preventDefault();
        }
    );

See an example here (you may need to shrink your window so the parent has any need to scroll): http://jsfiddle.net/VYcDZ/51/

Answer 2

You could use event.preventDefault()

$('.selector').mousewheel(function(event) {
    event.preventDefault();
});

Answer 3

Ran into this problem tonight... saw no one had the answer so i wrote it up

var blockScrollTarget;    
$('.jscroll').mousewheel(blockScroll);
        ......
    function blockScroll(e) {
        blockScrollTarget = blockScrollTarget || $(e.currentTarget);
        var d = blockScrollTarget.data('jsp');
        if(d.getPercentScrolledY() == 1 || d.getPercentScrolledY() == 0) {
          return true;
        }
        if(d.getIsScrollableV()) {
          e.preventDefault();
        }
      }

Answer 4

The above answers didn't work for me. If you are comfortable with editing the plugin source, you can expose the relevant internal methods to the public api:

// Public API
$.extend(
  jsp,
    {

      ...

      initMousewheel : function(){
        initMousewheel();
      },
      removeMousewheel : function(){
        removeMousewheel();
      }

    }
  );

Now you can conditionally and pragmatically eanable/disable the scrolling of any jscrollpane:

api = $('#full-page-container').data('jsp');
api.removeMousewheel(); // disable
api.initMousewheel(); // enable