CSS绝对定位元素随横向滚动消失问题求助

嘿，这个问题我之前也碰到过！核心原因就是你的.bg元素没覆盖到横向滚动后的区域——毕竟.outer只有300px宽，但.inner有1000px，滚动后超出的部分自然就没条纹了。给你两个实用的解决办法：

方法一：让背景元素匹配滚动内容的宽度 #

给.bg设置绝对定位，并且把宽度设成和.inner一样的1000px，这样它就能覆盖整个滚动区域了：

.outer {
  width: 300px;
  height: 200px;
  overflow-x: scroll;
  overflow-y: hidden;
  border: 1px solid black;
  position: relative;
}
.inner {
  width: 1000px;
  height: 200px;
}
.bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 1000px; /* 和.inner宽度保持一致 */
  height: 100%;
  /* 示例条纹背景，你可以换成自己的样式 */
  background: repeating-linear-gradient(
    45deg,
    #f0f0f0,
    #f0f0f0 10px,
    #ffffff 10px,
    #ffffff 20px
  );
  z-index: -1; /* 把背景放在.inner下方，不遮挡内容 */
}

方法二：直接给容器加滚动绑定的背景（更简洁） #

如果不需要单独的.bg元素，直接给.outer设置背景，再加上background-attachment: local属性，就能让背景跟着滚动内容一起移动：

.outer {
  width: 300px;
  height: 200px;
  overflow-x: scroll;
  overflow-y: hidden;
  border: 1px solid black;
  position: relative;
  /* 直接给容器加条纹背景 */
  background: repeating-linear-gradient(
    45deg,
    #f0f0f0,
    #f0f0f0 10px,
    #ffffff 10px,
    #ffffff 20px
  );
  background-attachment: local; /* 关键：让背景跟随滚动内容 */
}
.inner {
  width: 1000px;
  height: 200px;
}

这种方法可以直接去掉.bg元素，代码更清爽。

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