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添加到您的下拉列表中，以便将其显示在可滚动框上方：

this workaround

删除position: relative的问题是每个下拉列表的位置在页面加载时计算一次。虽然下拉列表在没有滚动的情况下运行良好，但您会在演示中注意到每个下拉列表都不会刷新其位置。

这可以使用几行javascript来解决，在滚动后计算每个父项的.offset.top并使用top: <offset.top of its parent>更新下拉列表位置。我已添加了类.list_item和ul.dropdown_list，但标识为#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

允许元素显示在滚动条上

1 个答案: