Разрешить элемент появляться над полосами прокрутки

Question

Я пытаюсь создать меню мыши, которое появляется при наведении указателя мыши на элемент. Это отлично работает, однако, для нижних рядов зависание исчезает в полосах прокрутки.

HTML

<div style="width:1024px; height:50px; overflow:scroll; border: 1px solid red;"> 
     <div class="dropdown"> 
      <span style="margin-left:5px" class="checkboxlink ignore"></span> 

      <ul> 
      <li><a href="#"><span class="checkboxlink todo"></span>Te doen</a></li> 
      <li><a href="#"><span class="checkboxlink done"></span>Behandeld</a></li> 
      <li><a href="#"><span class="checkboxlink ignore"></span>Negeren</a></li> 
      <li><a href="#"><span class="checkboxlink park"></span>Parkeren</a></li> 
      </ul> 
     </div> 
     .... more divs 

CSS

.dropdown{ 
    position: relative; 
    display: inline-block; 
    font-size: 16px; 
    width: 40px; 
    border: 0px solid white; 
    vertical-align: top; 

} 

.dropdown:hover 
{ 
border: 0px solid #ccc; 

} 

ul{ 
    position: absolute; 
    list-style: none; 
    text-align: left; 
    z-index: 1; 
    margin:0; 
    padding:0; 
    display: none; 
    background-color: white; 
    border: 1px solid #ccc; 
} 
.dropdown:hover ul { 
    display: block; 
} 

Смотрите также здесь:

https://jsfiddle.net/w030L59t/

Я попытался позиционировании абсолютное , но элемент все еще остается в области прокрутки.

Answer 1

Проблема заключается в любом атрибуте position: relative для раскрывающихся родителей. Если вы удалите их, вы можете легко добавить position: absolute к вашему выпадающего меню, чтобы отобразить его над прокручивать поле:

JSFIDDLE DEMO

Проблема удаления position: relative является то, что положение каждого выпадающего списка вычисляется один раз при загрузке страницы , В то время как выпадающие списки отлично работают без прокрутки, вы заметите в демо, что каждый раскрывающийся список не обновляет свою позицию.

---

Это может быть решена с помощью нескольких строк JavaScript, расчета .offset.top каждого родителя после прокрутки и обновление положения Dropdowns с помощью top: <offset.top of its parent>. Я добавил классы .list_item и ul.dropdown_list, хотя ID #wrapper.

$(document).ready(function() { 

    // fire function everytime the wrapper is scrolled 
    $('#wrapper').scroll(function(){ 

    // set element to relate to 
    var list_items = $('div.list_item'); 

    // get each position 
    list_items.each(function() { 

     // store offset().top inside var 
     var list_item_position = $(this).offset().top; 

     // select previous dropdown_list item 
     $(this).prev().find('ul.dropdown_list').css({ 

     // apply offset top 
     top: list_item_position + "px" 

     }); 
    }); 

    // write to console to track changes 
    console.log('positions updated'); 

    }); // .scroll 

}); // document.ready 

JSFIDDLE DEMO WITH jQUERY