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.

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.

• javascript
• jquery
• mouse
• jscrollpane

• Would not mind to know the answer to this one myself. – Atorian Commented Jan 15, 2011 at 16:12

4 Answers 4

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 remend 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/VYcDZ/51/

You could use event.preventDefault()

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

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

The above answers didn't work for me. If you are fortable 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