Question

好的，我正在使用我非常喜欢的JQuery插件Nicescroll。我突然遇到一个问题，我有两个DIV标签包含两个列表，一个在另一个之上。当我在两个DIV上启用Nicescroll时，在尝试滚动两个列表的底部时出现一个奇怪的错误。

从TOP列表中隐藏的元素是＆＃34;技术上＆＃34;在BOTTOM列表下。因此，任何滚动BOTTOM列表的尝试都会使整个DIV向上和向下滚动。换句话说，点击并拖动BOTTOM DIV会与＆＃34;隐藏＆＃34;来自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>

JQuery Nicescroll.js重叠DIV在滚动期间发生碰撞

1 个答案: