JQuery Nicescroll.js滾動期間重疊的DIV碰撞

Question

好吧我正在使用我非常喜歡的JQuery插件Nicescroll。我突然遇到了一個問題，我有兩個包含兩個列表的DIV標籤，一個在另一個之上。當我在兩個DIV上啓用Nicescroll時，嘗試滾動兩個列表的底部時出現奇怪的錯誤。

從TOP列表中隱藏的元素在「技術上」位於BOTTOM列表下。所以，任何嘗試滾動BOTTOM列表都會使整個DIV向上和向下滾動。換句話說，單擊並拖動BOTTOM DIV與TOP DIV中的「隱藏」元素相沖突，然後將其滾動。但是，它不滾動它的元素，它滾動TOP DIV本身。

有沒有人處理過這個問題？

<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

解決方法是使用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>