JQuery Nicescroll.js Overlapping DIVs collide during scroll

Question

Okay I'm using the JQuery plugin Nicescroll which I like very much. I suddenly ran into a problem where I have two DIV tags containing two lists, one above the other. When I enable Nicescroll on both of the DIVs, I get a strange error when trying to scroll the bottom of the two lists.

The elements that are being hidden from the TOP list are "technically" under the BOTTOM list. So, any attempt to scroll the BOTTOM lists makes the ENTIRE DIV scroll up and down. To put it another way, clicking and dragging on the BOTTOM DIV collides with the "hidden" elements from the TOP DIV and scrolls it instead. However, it doesn't scroll its elements, it scrolls the TOP DIV itself.

Has anyone dealt with this problem?

<div id="top" style="overflow:hidden;height:30px;">
    <div class="sub-element"></div>
    <div class="sub-element"></div>
    <div class="sub-element"></div>
    <div class="sub-element"></div>
    <div class="sub-element"></div>
    <div class="sub-element"></div>
    <div class="sub-element"></div>
    <div class="sub-element"></div>
    <div class="sub-element"></div>
    <div class="sub-element"></div>
</div>

<div id="bottom" style="overflow:hidden;height:30px;">
    <div class="sub-element"></div>
    <div class="sub-element"></div>
    <div class="sub-element"></div>
    <div class="sub-element"></div>
    <div class="sub-element"></div>
    <div class="sub-element"></div>
    <div class="sub-element"></div>
    <div class="sub-element"></div>
    <div class="sub-element"></div>
    <div class="sub-element"></div>
</div>

<script>

$('#top').niceScroll();
$('#bottom').niceScroll();

</script>

Answer 1

The solution is using the nested method of niceScroll.js.

<div id="top">
    <div id="top-scroll">
        <div class="sub-element"></div>
        <div class="sub-element"></div>
        <div class="sub-element"></div>
    </div>
</div>

<div id="bottom">
    <div id="bottom-scroll">
        <div class="sub-element"></div>
        <div class="sub-element"></div>
        <div class="sub-element"></div>
    </div>
</div>

<script>
    $('#top').niceScroll('#top-scroll');
    $('#bottom').niceScroll('#bottom-scroll');
</script>