如何根据内容动态设置CSS overflow解决自定义下拉菜单滚动条异常

解决方法 #

1. 修复高度获取失败的问题

元素设置display: none时无法获取渲染后的真实高度，你可以在初始化渲染完选项后，临时将下拉容器设为可见但不显示在页面中，读取真实滚动高度后再恢复状态，以此判断是否需要滚动：
修改getTestStuff函数，末尾添加判断逻辑：

function getTestStuff() {
    let content = document.getElementById("content");
    let text = document.getElementById("text");
    for (let group of testData) {
        let div = document.createElement("div");
        div.innerHTML = group;
        div.addEventListener("click", function() { 
            text.innerHTML = group;
        }, false);
        content.appendChild(div);
    }
    // 新增判断逻辑开始
    const MAX_HEIGHT = 300; // 对应CSS中设置的下拉最大高度
    // 临时显示容器获取真实高度
    content.style.display = 'block';
    content.style.visibility = 'hidden';
    const isScrollNeeded = content.scrollHeight > MAX_HEIGHT;
    // 恢复容器默认状态
    content.style.display = '';
    content.style.visibility = '';
    // 给容器加标记类
    if (isScrollNeeded) {
        content.classList.add('need-scroll');
    } else {
        content.classList.remove('need-scroll');
    }
    // 新增判断逻辑结束
}

2. 优化CSS适配不同场景

修改原CSS规则，仅在需要滚动时才启用滚动条和负边距适配：

/* 原有.dropdown-content规则中把overflow-y: scroll改为hidden */
.dropdown-content {
    overflow-y: hidden;
    /* 其余原有属性保持不变 */
}
/* 新增需要滚动时的样式 */
.dropdown-content.need-scroll {
    overflow-y: scroll;
}
/* 原有.dropdown-content div规则去掉margin-right: -15px，新增到下面的规则中 */
.dropdown-content.need-scroll div {
    margin-right: -15px;
}

3. 修复展开过程中滚动条闪烁问题

监听下拉展开动画的结束事件，动画完成后再切换滚动条显示状态，避免动画过程中出现不必要的滚动条：
在原有JS代码末尾添加监听逻辑：

content.addEventListener('animationend', function(e) {
    // 展开动画结束后设置滚动条
    if (e.animationName === 'openDropdownAnimation') {
        content.style.overflowY = content.classList.contains('need-scroll') ? 'scroll' : 'hidden';
    }
    // 收起动画结束后重置滚动条状态
    if (e.animationName === 'closeDropdownAnimation') {
        content.style.overflowY = 'hidden';
    }
}, false);

修改后可以解决全部问题：

• 展开动画过程中不会出现滚动条闪烁，动画结束后才会根据内容高度决定是否显示滚动条
• 不需要滚动时不会预留滚动条位置，hover选项时背景可以铺满整个容器，不会出现空白缝隙
• 滚动条不会挤压内容发生偏移，和原有适配逻辑完全兼容

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