粘性定位（sticky）头部下拉菜单过长时，如何让菜单优先滚动？

要实现下拉菜单展开时优先滚动菜单而非页面，需要从菜单自身滚动能力和页面滚动锁定两个方面调整：

核心思路 #

1. 给下拉菜单设置固定最大高度与垂直滚动属性，让菜单内容超出时自身可滚动，不依赖页面滚动；
2. 菜单展开时锁定页面滚动，避免用户操作时触发页面滚动，收起时恢复页面滚动。

具体修改步骤 #

1. 调整CSS样式 #

• 给菜单容器（#Menu）设置position: relative，作为绝对定位子菜单的定位基准；
• 给下拉子菜单设置max-height（基于视口高度减去头部高度）和overflow-y: auto，限制菜单高度并开启自身滚动；
• 给头部设置固定高度，方便计算子菜单的最大高度。

2. 添加JavaScript控制逻辑 #

监听菜单的展开/收起事件，切换页面的overflow属性，实现页面滚动的锁定与恢复。

修改后的完整代码示例 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #header {
            position: sticky;
            top: 0px;
            background-color: #ffd800;
            height: 60px; /* 固定头部高度，用于计算子菜单最大高度 */
            line-height: 60px;
            padding: 0 1rem;
        }
        #Menu {
            position: relative; /* 作为子菜单的定位容器 */
            display: inline-block;
            cursor: pointer;
        }
        #submenu {
            position: absolute;
            top: 100%;
            left: 0;
            margin: 0;
            padding: 0;
            list-style: none;
            width: 220px;
            background-color: #ffffff;
            border: 1px solid #e0e0e0;
            max-height: calc(100vh - 60px); /* 视口高度减去头部高度，确保菜单不超出屏幕 */
            overflow-y: auto;
            display: none; /* 默认隐藏子菜单 */
        }
        #submenu.show {
            display: block; /* 展开时显示子菜单 */
        }
        #submenu li {
            padding: 0.8rem 1rem;
            border-bottom: 1px solid #f0f0f0;
        }
        #submenu li:last-child {
            border-bottom: none;
        }
        #page {
            height: 2000px; /* 模拟超长页面内容 */
            background-color: #f5f5f5;
            padding: 1rem;
        }
    </style>
</head>
<body>
    <div id="header">
        <div id="Menu">
            点击展开下拉菜单
            <ul id="submenu">
                <!-- 模拟大量菜单选项 -->
                <li>菜单选项 1</li>
                <li>菜单选项 2</li>
                <li>菜单选项 3</li>
                <li>菜单选项 4</li>
                <li>菜单选项 5</li>
                <li>菜单选项 6</li>
                <li>菜单选项 7</li>
                <li>菜单选项 8</li>
                <li>菜单选项 9</li>
                <li>菜单选项 10</li>
                <li>菜单选项 11</li>
                <li>菜单选项 12</li>
                <li>菜单选项 13</li>
                <li>菜单选项 14</li>
                <li>菜单选项 15</li>
                <li>菜单选项 16</li>
                <li>菜单选项 17</li>
                <li>菜单选项 18</li>
                <li>菜单选项 19</li>
                <li>菜单选项 20</li>
            </ul>
        </div>
    </div>
    <div id="page">
        页面长内容区域，滚动此区域验证效果
    </div>

    <script>
        const menuTrigger = document.getElementById('Menu');
        const submenu = document.getElementById('submenu');
        const body = document.body;

        // 监听菜单点击事件，切换展开/收起状态
        menuTrigger.addEventListener('click', () => {
            submenu.classList.toggle('show');
            // 根据菜单状态锁定/恢复页面滚动
            if (submenu.classList.contains('show')) {
                body.style.overflow = 'hidden';
            } else {
                body.style.overflow = '';
            }
        });
    </script>
</body>
</html>

关键细节说明 #

• max-height: calc(100vh - 60px)：100vh是当前视口高度，减去头部的固定高度60px，确保下拉菜单不会超出屏幕范围；
• overflow-y: auto：仅当菜单内容超出最大高度时才显示滚动条，保证交互体验；
• 锁定页面滚动时，若需要保留页面滚动位置，可以额外记录scrollTop值，收起时恢复，但大多数场景下直接设置overflow: hidden即可满足需求。

内容的提问来源于stack exchange，提问作者Jortx