0

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

从 TOP 列表中隐藏的元素“技术上”位于 BOTTOM 列表下。因此，任何滚动 BOTTOM 列表的尝试都会使 ENTIRE 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>
4

1 回答 1

0

解决方案是使用 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>
于 2014-05-06T06:51:40.960 回答