当导航栏中多个子菜单通过 height 过渡动画同时开闭时，页面会因 dom 高度突变而意外滚动，导致新打开的子菜单移出视口。本文提供一种基于 transitionend 回调 + 精确 scrolltop 计算的平滑解决方案，确保新展开菜单的标题始终锚定在导航栏可视区域顶部。
当导航栏中多个子菜单通过 height 过渡动画同时开闭时，页面会因 dom 高度突变而意外滚动，导致新打开的子菜单移出视口。本文提供一种基于 transitionend 回调 + 精确 scrolltop 计算的平滑解决方案，确保新展开菜单的标题始终锚定在导航栏可视区域顶部。
在实现带高度过渡（transition: height 325ms ease）的单例子菜单系统时，一个常见但棘手的 UX 问题浮现：当用户快速点击下方的子菜单项（如“Submenu 2”），而上方长内容子菜单（如“Submenu 1”）仍在收起动画中时，浏览器会因两个 height 变化引发的布局重排（reflow）触发非预期的滚动行为——新打开的子菜单可能被推至视口之外，甚至完全不可见。
根本原因在于：CSS height 过渡本身不触发 scroll 锚定逻辑，且 scrollTop 的计算若在动画中途执行，将基于错误的中间 DOM 布局状态，导致偏移量失准。
✅ 推荐方案：动画完成后再精准滚动（非延迟，而是“时机正确”）
我们不采用“等待全部过渡结束再滚动”的生硬方式（会造成明显卡顿），而是利用 transitionend 事件，在新子菜单的 height 过渡真正完成、DOM 布局稳定后，立即计算其相对于导航栏容器的精确垂直偏移，并执行平滑滚动：
function toggleSubmenu($submenu, isOpen, callback) {
const $submenuContent = $submenu.find(".submenu-content");
if (isOpen) {
// 展开：设为 scrollHeight → 触发 transition
$submenuContent.css("height", $submenuContent.get(0).scrollHeight);
$submenu.addClass("opened");
} else {
// 收起：先设为当前 scrollHeight（确保有值），强制 reflow，再设为 0
$submenuContent.css("height", $submenuContent.get(0).scrollHeight);
$submenuContent.get(0).offsetHeight; // 强制同步布局计算
$submenuContent.css("height", 0);
$submenu.removeClass("opened");
}
// 绑定一次性的 transitionend 监听器
$submenuContent.one('transitionend', function() {
if (typeof callback === 'function') {
callback($submenu);
}
});
}
关键点在于 one('transitionend') —— 它确保回调仅在本次过渡完成后执行一次，避免重复触发。此时 DOM 已完成渲染，$submenu.offset().top 返回的是最终、准确的位置。
? 滚动定位逻辑（核心计算）
在回调中，我们需将新展开子菜单的 .submenu-title 顶部对齐到导航栏 .navbar 的可视区域顶部：
toggleSubmenu($submenu, !$submenu.hasClass("opened"), function(openedSubmenu) {
if (openedSubmenu.hasClass("opened")) {
const navbar = $('.navbar');
// 计算 openedSubmenu 顶部距离 navbar 顶部的距离（考虑 navbar 当前滚动）
const offsetTop = openedSubmenu.offset().top - navbar.offset().top + navbar.scrollTop();
// 使用 animate 实现与过渡时长一致的平滑滚动（325ms）
navbar.animate({ scrollTop: offsetTop }, 325);
}
});
- openedSubmenu.offset().top：子菜单在整个文档中的绝对 Y 坐标；
- navbar.offset().top：导航栏在文档中的绝对 Y 坐标；
- 相减得到子菜单相对于导航栏容器左上角的局部 Y 偏移；
- 加上 navbar.scrollTop()，即导航栏当前已滚动的距离，得出目标 scrollTop 值；
- 最后用 animate({scrollTop: ...}, 325) 同步动画时长，视觉上无缝衔接。
⚠️ 注意事项与最佳实践
- 避免重复绑定：使用 .one() 而非 .on() 绑定 transitionend，防止多次点击累积监听器导致滚动多次。
- 清除旧监听器：在每次 toggleSubmenu 调用前，建议先执行 $submenuContent.off('transitionend')，确保无残留事件（示例代码已体现）。
- 性能考量：offset() 和 scrollTop() 均为读操作，应尽量集中执行；动画时长（325ms）需与 CSS transition-duration 严格一致。
- 无障碍增强：可额外添加 aria-expanded 属性同步更新，提升屏幕阅读器体验。
- 现代替代方案（可选）：若项目支持较新浏览器，可考虑用 Element.scrollIntoView({ block: 'start', behavior: 'smooth' }) 替代 jQuery animate，但需注意其兼容性及对父容器 overflow 的依赖。
此方案在保持“同时开闭”动画流畅性的同时，彻底解决了滚动失控问题，让用户始终聚焦于所操作的目标菜单，显著提升导航栏的专业性与可用性。
