代码之家 › 专栏 › 技术社区 › Robo Robok

可滚动容器内的下拉菜单-如何使选项弹出?

absolute dropdown overflow css-position css

Robo Robok · 技术社区 · 4 年前

我试图在一个可滚动的容器中实现一个下拉列表。我遇到的问题是,这些选项在展开时会被夹在这个容器中。我知道这是一个公认的滚动容器问题,但直到今天我还不知道一个好的解决方案。问题是:

我需要这些粉红色的选项来从容器中弹出。在不将它们放在容器外的情况下,这是可能的吗?

以下是片段:

document.getElementById('dropdown-button').addEventListener('click', () => {
    document.querySelector('.dropdown-options').classList.toggle('hidden');
});

.scrollable {
    width: 200px;
    height: 400px;
    background: yellow;
    overflow-y: auto;
}

.filler {
    background: orange;
    height: 350px;
}

.dropdown {
    position: relative;
}

.dropdown-options {
    background-color: pink;
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
}

.hidden {
    display: none;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Overflow</title>
</head>
<body>
    <div class="scrollable">
        <div class="filler"></div>
        <div class="dropdown">
            <button id="dropdown-button">Expand me</button>
            <ul class="dropdown-options hidden">
                <li>Option one</li>
                <li>Option two</li>
                <li>Option three</li>
            </ul>
        </div>
        <div class="filler"></div>
    </div>
</body>
</html>

有没有可能找到一个只有CSS的解决方案?