当页面中多个元素通过 css `transition` 动态改变尺寸（如 hover 展开）时，可通过 `resizeobserver` 或 `transitionend` 事件结合 `scrollintoview({ behavior: 'smooth' })` 实现视口自动、平滑滚动，确保变化后的元素始终完整可见。
在交互式布局中，常见需求是：当用户悬停（hover）某个可伸缩区块（如高度从 100px 变为 200px）时，页面视口应自动平滑滚动，使该元素始终完全可见——尤其当它靠近视口边缘或位于长列表底部时。纯 CSS 无法监听尺寸变化并触发滚动，因此需借助 JavaScript。
✅ 推荐方案：使用 ResizeObserver
ResizeObserver 是现代浏览器原生支持的高效 API，能精准监听元素尺寸变化（包括宽高），且性能优于轮询或事件监听，无需依赖 hover 状态，真正响应式：
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid #333;
width: 100px;
height: 100px;
background-color: #0000ff;
transition: height 0.5s ease, background-color 0.5s ease;
margin: 10px 0;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
div:hover {
background-color: #ffcccc;
height: 200px;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<script>
const divs = document.querySelectorAll('div');
const resizeObserver = new ResizeObserver(entries => {
entries.forEach(entry => {
entry.target.scrollIntoView({
behavior: 'smooth',
block: 'nearest', // 避免过度滚动：仅在必要时调整（顶部/底部越界才滚动）
inline: 'nearest'
});
});
});
divs.forEach(div => resizeObserver.observe(div));
</script>
</body>
</html>? 关键说明： block: 'nearest' 是核心优化项——它确保仅当元素因尺寸变化而部分移出视口时才滚动，避免每次 hover 都强制滚到顶部； ResizeObserver 自动捕获所有尺寸变更（含 CSS transition 引起的高度变化），无需手动绑定 mouseenter/mouseleave； 兼容性：Chrome 64+、Firefox 69+、Safari 13.1+、Edge 79+（caniuse.com/resizeobserver）。
⚙️ 备选方案：监听 transitionend 事件
若需兼容较老浏览器（如 Safari < 13.1），可退而求其次，在 transitionend 中触发滚动。但注意：该事件会因任意可过渡属性（width/height/background-color）触发多次，需过滤目标属性：
divs.forEach(div => {
div.addEventListener('mouseenter', () => {
const handleTransitionEnd = (e) => {
if (e.propertyName === 'height') { // 精确匹配关键属性
div.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}
div.removeEventListener('transitionend', handleTransitionEnd);
};
div.addEventListener('transitionend', handleTransitionEnd);
});
});⚠️ 注意事项：
- 不要直接在 mouseenter 中立即调用 scrollIntoView——此时尺寸尚未变化，滚动无效；
- 必须移除事件监听器（如示例中 removeEventListener），防止重复绑定导致多次滚动；
- 若元素本身有 overflow: hidden 或父容器限制高度，scrollIntoView 可能失效，需确保其可滚动上下文有效。
✅ 总结
| 方案 | 优势 | 适用场景 |
|---|---|---|
| ResizeObserver | 精准、高效、语义清晰、自动去重 | 现代项目首选，推荐 95%+ 场景使用 |
| transitionend + 属性过滤 | 兼容性更好（IE 不支持，但旧版 Safari 可用） | 需支持 Safari 12 或 Firefox 68 等老版本 |
最终效果：用户悬停任意方块时，页面以自然缓动动画滚动，确保该元素完整呈现于可视区域内，大幅提升长列表交互体验。
