Chrome中修改body子元素CSS样式触发window resize事件问题排查

嘿，结合你给的代码、样式和场景，这个Chrome独有的问题根源其实很好拆解，主要和Chrome的滚动条特性、jQuery计算隐藏元素高度的逻辑有关：

1. Chrome滚动条的「特殊脾气」 #

和Firefox等浏览器不一样，Chrome的滚动条是占用视口空间的——当页面内容溢出视口时，滚动条会挤掉一部分视口宽度/高度；滚动条消失时，视口尺寸又会恢复。这种视口尺寸的变化会直接触发window.resize事件，而其他浏览器的滚动条是叠加在内容上的，不会改变视口尺寸，所以没这个问题。

2. jQuery计算隐藏元素高度的「小动作」 #

你的下拉菜单初始样式是display: none，当执行$dd.height()时，jQuery为了拿到准确的高度，会偷偷执行这些临时操作：

• 把元素的display临时改成block（不然没法计算真实高度）
• 设为visibility: hidden（避免用户看到这个临时显示的元素）
• 改成position: absolute（防止打乱页面原有布局）
• 计算完高度后再恢复原样式

而你之前刚修改了元素的top和left位置，这个临时显示的下拉菜单可能会超出当前视口范围，导致页面突然出现滚动条；等jQuery把样式改回去后，滚动条又消失了。这一来一回，Chrome的视口尺寸发生了变化，自然就触发了window.resize事件。

怎么验证这个猜想？ #

你可以试试这几个操作：

• 暂时删掉var autoH = $dd.height();这行代码，看是否还会触发resize事件
• 在Chrome开发者工具的「Elements」面板中，手动把dropdown-menu-ap的display改成block，观察页面是否会出现滚动条
• 给body添加overflow: hidden样式，强制隐藏滚动条，再执行代码看是否触发resize

解决办法参考 #

如果验证后确实是这个原因，可以试试这些方案：

• 先算高度再改位置：在修改top和left之前，先计算好下拉菜单的高度，避免临时渲染时位置偏移导致滚动条变化
• 用getBoundingClientRect()替代height()：这个原生API可以直接获取元素尺寸，不需要临时渲染元素，更稳妥
• 给下拉菜单的父容器加overflow: hidden：让下拉菜单的临时渲染不会溢出到页面外，也就不会触发滚动条变化

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