页面右侧CSS动画引发页面尺寸变化及滚动条异常问题求助

开发网站着陆页时，页面两侧设置了模拟摇摆树叶的图片动画，左侧表现正常，但右侧动画会导致页面横向、纵向尺寸变化，底部滚动条随动画反复出现和消失。

JSX结构 #

<div className='app'>
  <div className='wrapper'>
    <Navbar />
    <div className='maincontainer'>
      <div className='animleft'>
        <img alt='left-folliage-1' />
        <img alt='left-folliage-2' />
        <img alt='left-folliage-3' />
        <img alt='left-folliage-4' />
      </div>
      <Hero />
      <div className='animright'>
        <img alt='right-folliage-2' />
        <img alt='right-folliage-1' />
        <img alt='right-folliage-3' />
        <img alt='right-folliage-4' />
      </div>
    </div>
  </div>
  <Footer />
</div>

原CSS代码 #

.app {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.maincontainer {
    display: flex;
    justify-content: space-between;
    height: 100%;
    width: 100%;
}

.wrapper {
  background-image: url('../assets/hero2.png');
  background-size:contain;
  background-repeat: no-repeat;
  background-position: center;
  height: 100vh;
  width: 100%;  
}

.animleft {
  position: absolute;
  top: 0;
  height: 100%;
}

.animright {
  right: 0;
  height: 100%;
  position: absolute;
  top: -5px;
}

.animleft img {
  position: absolute;
  filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.4));
  animation: leaf-sway 5s ease-in-out infinite;
  left: -15px;
}

.animright img {
  position: absolute;
  filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.4));
  animation: leaf-sway 5s ease-in-out infinite;
  right: -15px;
}

/* 每个树叶图片的定位样式，重复设置 */
.animleft img:nth-child(1) {
  top: -5%;
  max-width: 75vh;
 }

问题原因 #

1. .animleft和.animright是绝对定位，但父容器.wrapper未设置position: relative，导致这两个元素相对于整个文档定位，而非.wrapper。
2. 右侧树叶动画时超出视口范围，且.wrapper未设置横向溢出隐藏，触发浏览器横向滚动条；同时动画带来的尺寸波动也会影响纵向滚动条状态。

解决方案 #

1. 修正父容器定位与溢出属性 #

给.wrapper添加定位基准和横向溢出隐藏，约束绝对定位元素并隐藏溢出内容：

.wrapper {
  background-image: url('../assets/hero2.png');
  background-size:contain;
  background-repeat: no-repeat;
  background-position: center;
  height: 100vh;
  width: 100%;
  position: relative; /* 作为绝对定位元素的参考容器 */
  overflow-x: hidden; /* 隐藏横向溢出，避免触发滚动条 */
}

2. 调整右侧树叶的初始定位与动画原点 #

确保右侧树叶初始位置不溢出，同时让动画向视口内侧摇摆：

.animright {
  right: 0;
  height: 100%;
  position: absolute;
  top: -5px;
  width: fit-content; /* 自适应内容宽度 */
}

.animright img {
  position: absolute;
  filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.4));
  animation: leaf-sway 5s ease-in-out infinite;
  right: 0; /* 修正初始位置，避免溢出 */
  transform-origin: right center; /* 设置动画原点，让树叶向内侧摇摆 */
}

3. 优化动画关键帧（可选） #

如果动画本身会让树叶向右超出，调整关键帧限制摇摆方向：

@keyframes leaf-sway {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(-5deg); } /* 向视口内侧摇摆 */
  100% { transform: rotate(0deg); }
}

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