0

さて、私はとても気に入っている JQuery プラグイン Nicescroll を使用しています。2 つのリストを含む 2 つの DIV タグが上下に重なっているという問題に突然遭遇しました。両方の DIV で Nicescroll を有効にすると、2 つのリストの下部をスクロールしようとすると奇妙なエラーが発生します。

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>
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 に答える