Блог

У меня есть панель разделов, которая отображает выпадающий список с некоторыми данными при наведении на него курсора мыши. Это работает нормально. Но после реализации кода слайдера этот выпадающий список прокручивается.

Раздел содержит дисплеи высотой 30 дюймов. Но я хочу отобразить эти выпадающие списки на другом div.

Когда я удаляю overflow-x: hidden его, он работает нормально, но этот временной экран выглядит не очень хорошо.

Я пытался использовать z-index , переполнение, но безуспешно.

HTML

 <div id="container">
    <div id="parent">
        <div class="contentBlock">1</div>
        <div class="contentBlock">2</div>
        <div class="contentBlock">3</div>
        <div class="contentBlock">4</div>
        <div class="contentBlock">5</div>
    </div>
</div>
<span id="panLeft" class="panner" data-scroll-modifier='-1'>Left</span>

<span id="panRight" class="panner" data-scroll-modifier='1'>Right</span>
  

CSS

 #container{
    width:600px;
    overflow-x:hidden;
}

#parent {
    width:6000px;
}
.contentBlock {
    font-size:10em;
    text-align:center;
    line-height:400px;
    height:400px;
    width:500px;
    margin:10px;
    border:1px solid black;
    float:left;
}
.panner {
    border:1px solid black;
    display:block;
    position:fixed;
    width:50px;
    height:50px;
    top:45%;
}
.active {
    color:red;
}
#panLeft {
    left:0px;
}
#panRight {
    right:0px;
}
  

JAVASCRIPT

 (function () {

    var scrollHandle = 0,
        scrollStep = 5,
        parent = $("#container");

    //Start the scrolling process
    $(".panner").on("mouseenter", function () {
        var data = $(this).data('scrollModifier'),
            direction = parseInt(data, 10);

        $(this).addClass('active');

        startScrolling(direction, scrollStep);
    });

    //Kill the scrolling
    $(".panner").on("mouseleave", function () {
        stopScrolling();
        $(this).removeClass('active');
    });

    //Actual handling of the scrolling
    function startScrolling(modifier, step) {
        if (scrollHandle === 0) {
            scrollHandle = setInterval(function () {
                var newOffset = parent.scrollLeft()   (scrollStep * modifier);

                parent.scrollLeft(newOffset);
            }, 10);
        }
    }

    function stopScrolling() {
        clearInterval(scrollHandle);
        scrollHandle = 0;
    }

}());