hover展示按钮的高度动画导致页面滚动位置偏移问题如何解决？

问题原因 #

你通过修改按钮高度实现显隐动画时，按钮展开会增加GridItem内部的内容总高度，既会撑高Grid对应行的高度、改变整体文档流高度，也会触发浏览器默认的滚动锚定机制自动调整滚动位置，二者叠加就会出现hover第一行Grid项时页面向上滚动的问题。

解决方案 #

优先推荐修改动画实现逻辑，放弃修改高度的方案，改用绝对定位+位移动画，完全不影响文档流，从根源避免滚动问题，修改后的样式代码如下：

const GridItem = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;

  text-align: center;
  background-color: grey;
  height: 200px;
  width: 100%;

  div {
    transition: all 400ms ease-out;
    position: absolute;
    bottom: 0;
    height: 56px;
    transform: translateY(100%);
    opacity: 0;
    will-change: transform, opacity;
    background-color: white;
  }

  :hover {
    .button {
      transform: translateY(0);
      opacity: 1;
    }
  }
`;

如果你要保留原有高度动画的实现，只需要做两处修改即可：

• 给GridItem添加overflow: hidden属性，保证容器始终保持200px固定高度，不会被内部内容撑高改变Grid行高
• 给全局滚动容器添加scroll-anchor: none属性，禁用浏览器滚动锚定自动调整滚动位置的行为：

html, body {
  scroll-anchor: none;
}

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