overflow: hidden 不生效？无限滚动背景溢出问题排查

问题核心是容器未正确设置尺寸与定位，导致overflow: hidden未生效，同时body默认边距也会引发多余滚动条。按以下方案修改CSS即可解决：

修改后的完整CSS代码 #

body {
  margin: 0; /* 消除浏览器默认边距，避免不必要的滚动条 */
}

.container {
  overflow: hidden;
  position: relative; /* 让绝对定位的子元素以该容器为基准 */
  width: 100vw; /* 容器占满整个视口宽度 */
  height: 100vh; /* 容器占满整个视口高度 */
}

.infinite-scrolling {
  background: url("https://willdotjpg.gay/images/backgrounds/testbackground.png") repeat-x;
  height: 100%; /* 继承容器高度，无需固定数值 */
  width: 10080px; /* 保持单张图片宽度的3倍，保证滚动衔接 */
  animation: slide 60s linear infinite;
  position: absolute;
}

@keyframes slide {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-3360px, 0, 0); /* 对应单张图片宽度的负值，确保滚动无断层 */
  }
}

关键修改点说明 #

• 给body加margin: 0：去掉浏览器默认的边距，避免页面出现额外滚动条。
• 给.container加position: relative：让绝对定位的.infinite-scrolling以容器为定位基准，这样容器的overflow: hidden才能生效，隐藏超出容器的部分。
• 给.container设置width: 100vw和height: 100vh：让容器完全覆盖浏览器视口，背景仅在这个范围内显示，超出部分被自动隐藏。
• 将.infinite-scrolling的height改为100%：继承容器高度，适配不同屏幕尺寸，无需写固定数值。

修改后背景会在视口内无限滚动，不会出现多余的滚动条，超出视口的部分会被容器隐藏。

内容的提问来源于stack exchange，提问作者will.jpg