添加hover遮罩后无限滚动轮播仅渲染首个元素问题排查

我在实现无限循环图片轮播时，添加hover图片遮罩后，scroll-element容器下仅首个元素能够渲染。元素检查显示容器宽度等于所有子元素宽度之和，但仅首个元素可见。该问题是添加overlay-container和img-overlay类实现滚动图片的文本遮罩后出现的。

HTML代码 #

<div class="scroll-parent">
  <div class="scroll-element primary">
    <a class="overlay-container" href="">
      <img src="Pictures/Exterior1.jpg">
      <div class="img-overlay">35 Chem Meredith</div>
    </a>
    <a class="overlay-container" href="">
      <img src="Pictures/Exterior1.jpg">
      <div class="img-overlay">50 Chem Meredith</div>
    </a>
    <a class="overlay-container" href="">
      <img src="Pictures/Exterior1.jpg">
      <div class="img-overlay">35 Chem Meredith</div>
    </a>
  </div>
  <div class="scroll-element secondary">
    <a class="overlay-container" href="">
      <img src="Pictures/Exterior1.jpg">
      <div class="img-overlay">35 Chem Meredith</div>
    </a>
    <a class="overlay-container" href="">
      <img src="Pictures/Exterior1.jpg">
      <div class="img-overlay">50 Chem Meredith</div>
    </a>
    <a class="overlay-container" href="">
      <img src="Pictures/Exterior1.jpg">
      <div class="img-overlay">35 Chem Meredith</div>
    </a>
  </div>
</div>

CSS代码 #

.scroll-parent {
  position: relative;
  width: 100vw;
  height: 500px;
  padding: 2rem 0;
  overflow-x: hidden;
}

.scroll-parent::after{
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 100vw; height: 500px;
  pointer-events: none;
  background: -moz-linear-gradient(left,  rgba(255,255,255,1) 0%, rgba(255,255,255,1) 15%,   rgba(255,255,255,0) 25%, rgba(255,255,255,0) 75%, rgba(255,255,255,1) 85%, rgba(255,255,255,1) 100%);
  background: -webkit-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 15%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 75%,rgba(255,255,255,1) 85%,rgba(255,255,255,1) 100%);
  background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 15%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 75%,rgba(255,255,255,1) 85%,rgba(255,255,255,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 );
}

.scroll-element {
  width: inherit;
  height: inherit;
  position: absolute;
  left: 0%;
  top: 0%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.scroll-element img {
  width: auto;
  height: 400px;
  border-radius: 10px;
  transition: 0.2s;
}

.scroll-element img:hover {
  scale: 1.05;
}

.primary {
  animation: primary 5s linear infinite;
}

.secondary {
  animation: secondary 5s linear infinite;
}

@keyframes primary {
  from {
    left: 0%;
  }
  to {
    left: -100%;
  }
}

@keyframes secondary {
  from {
    left: 100%;
  }
  to {
    left: 0%;
  }
}

.overlay-container{
  position: absolute;
}

.img-overlay {
  position: absolute; 
  bottom: 0; 
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
  color: #f1f1f1; 
  width: 100%;
  transition: .2s ease;
  opacity:0;
  color: white;
  font-size: 20px;
  padding: 20px 0;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  text-align: center;
}

.overlay-container:hover .img-overlay {
  opacity: 1;
  pointer-events: none;
}

问题原因与解决方案 #

原因

.overlay-container设置了position: absolute，这会让所有<a>元素脱离正常文档流，全部堆叠在scroll-element容器的左上角位置，因此只能看到最上层的第一个元素。

修复方案

将.overlay-container的定位属性修改为relative，这样它会保留在scroll-element的flex布局流中，同时内部的img-overlay（绝对定位）会以它为参考容器，不会影响整体布局：

.overlay-container{
  position: relative; /* 替换原有absolute */
}

修改后，scroll-element的flex布局会正常排列所有图片元素，hover遮罩功能也能正常触发，轮播动画不受影响。

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