如何结合Transition效果实现视口随元素展开平滑滚动？

问题背景 #

现有多个DIV元素，设置了transition过渡效果，鼠标悬停时高度从100px平滑过渡到200px。需要实现当元素展开时，浏览器视口能自动平滑滚动，保证用户始终能看到完整的展开后的方块。

解决方案 #

通过JavaScript监听元素的mouseenter事件，在元素开始展开时，计算其在页面中的位置，调用window.scrollTo()方法并设置behavior: 'smooth'，让视口平滑滚动到能完整显示该元素的位置。滚动行为会自动同步元素0.5s的过渡时长，避免出现滚动和展开不同步的情况。

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  border-style: solid;
  border-width: 1px;
  width: 100px;
  height: 100px;
  background-color: #0000ff;
  transition: 0.5s;
  margin: 5px 0; /* 增加间距，避免元素堆叠 */
}

div:hover {
  background-color: #ffcccc;
  width: 100px;
  height: 200px;
}
</style>
</head>
<body>

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

<script>
// 获取所有div元素
const divs = document.querySelectorAll('div');

divs.forEach(div => {
  div.addEventListener('mouseenter', () => {
    // 获取元素在视口中的位置信息
    const rect = div.getBoundingClientRect();
    const viewportHeight = window.innerHeight;
    
    // 如果元素底部超出视口，滚动到让元素完全显示的位置
    if (rect.bottom > viewportHeight) {
      const scrollToY = window.scrollY + rect.bottom - viewportHeight + 10;
      window.scrollTo({
        top: scrollToY,
        behavior: 'smooth'
      });
    } 
    // 如果元素顶部超出视口，滚动到元素顶部位置
    else if (rect.top < 0) {
      const scrollToY = window.scrollY + rect.top - 10;
      window.scrollTo({
        top: scrollToY,
        behavior: 'smooth'
      });
    }
  });
});
</script>

</body>
</html>

代码说明 #

• 给DIV增加margin属性，避免元素完全贴合，提升视觉区分度
• 监听每个DIV的mouseenter事件，在鼠标悬停瞬间触发滚动判断逻辑
• 通过getBoundingClientRect()获取元素在当前视口的位置，判断是否需要调整视口
• 利用window.scrollTo()的平滑滚动特性，让视口移动和元素展开动画节奏保持一致

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