JQuery Nicescroll.js Перекрывающиеся DIV сталкиваются во время прокрутки

Question

JQuery Nicescroll.js Перекрывающиеся DIV сталкиваются во время прокрутки

0

Хорошо, я использую JQuery-плагин Nicescroll, который мне очень нравится. Я вдруг столкнулся с проблемой, когда у меня есть два тега DIV, содержащие два списка, один над другим. Когда я включаю Nicescroll на обоих DIV, я получаю странную ошибку при прокрутке нижней части этих двух списков.

Элементы, которые скрываются из списка 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>

Mark Löwe 03 май 2014, в 05:35

Источник

Теги:

jquery

overlapping

nicescroll

1 ответ

Ещё вопросы

Mark Löwe · Answer 1 · 2014-05-06T05-19-00.000Z

Решение использует вложенный метод 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>