How can I fix odd jScrollPane behavior on resize?

Question

I want expert advice on jScrollPane, please!

It refuses to resize when I resize the browser window!

When I decrease the height of browser window, the drag handle of the scroll bar can be dragged way below the lower border of the content panel – and the content gets cut off at the bottom. On the other hand, when I increase the height of browser window, the height of the scrollbar remains the same (un-resized), and there's empty space below the lower edge of the scroll bar.

Could someone please explain what's going on and how I can fix that? I would be truly grateful!

Hope to hear back from someone who knows the solution!

Answer 1

Found the solution: reinitializing jScrollPane on resize:

<script type="text/javascript">
$(function () {
    $('#pane1').jScrollPane({
        showArrows: true,
        dragMaxHeight: 100,
        wheelSpeed: 20
    });
});
$(window).resize(function () {
    $('#pane1').jScrollPane({
        showArrows: true,
        dragMaxHeight: 100,
        wheelSpeed: 20
    });
});
</script>

It worked!

Hope it helps someone else who has experienced the same issue.