允许元素出现在滚动条上

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 并使用 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

允许元素出现在滚动条上

Allow element to appear over scrollbars

html

css

scrollbars

mouseover

hover