网站自动横向滚动Feed组件动画末尾空白问题求助

问题描述 #

开发网站自动横向滚动Feed模块时，功能正常但存在异常：动画从左向右滚动至末尾时，会出现一段空白区域。

问题原因 #

1. 容器宽度计算遗漏margin：.feed-track仅计算了feed-item的自身宽度（210px），但每个feed-item设置了margin: 0 10px，实际每个项占据的宽度是210px+20px=230px，导致容器总宽度不足，滚动后半段内容缺失出现空白。
2. 动画关键帧冗余且计算错误：原动画设置了重复的50%和50.01%关键帧，且滚动距离未考虑margin，导致滚动逻辑与实际内容宽度不匹配。

修复步骤 #

1. 修正CSS的容器宽度与动画逻辑 #

更新.feed-track和动画关键帧代码，将margin纳入宽度计算：

.feed-track {
  display: flex;
  /* 每个item总宽度=210px（自身宽度）+20px（左右margin），共8个item */
  width: calc(230px * 8);
  animation: scroll 30s linear infinite;
}

@keyframes scroll {
  0% {
      transform: translateX(0);
  }
  /* 滚动至总宽度的一半，对应4个item的总宽度 */
  100% {
      transform: translateX(calc(-230px * 4));
  }
}

去掉冗余的中间关键帧，让动画从初始位置平滑滚动到总宽度的一半，利用infinite循环无缝回到起点，解决空白问题。

2. （可选）实现完全无缝滚动 #

若希望滚动视觉上完全无衔接断点，可在.feed-track末尾复制前4个feed-item：

<div class="feed-wrapper">
    <div class="feed-track">
        <!-- 原有8个feed-item -->
        <div class="feed-item">
            <img src="{{url('frontend/assets/images/feed1.jpeg')}}" width="210" height="380">
            <div class="bg-black-gradient-feed"></div>
            <div class="feed-content">
                <div class="content-wrapper">
                    <div style="display: block;">
                        <h2>Mercedes-Benz AMG: One Of</h2>
                    </div>
                    <div class="d-flex"><span>Posted By : f1rstmotors</span></div>
                    <div class="d-flex"><span>Posted On : 1/May/2024</span></div>
                </div>
            </div>
        </div>
        <div class="feed-item">
            <img src="{{url('frontend/assets/images/feed2.jpeg')}}" width="210" height="380">
            <div class="bg-black-gradient-feed"></div>
            <div class="feed-content">
                <div class="content-wrapper">
                    <div style="display: block;">
                        <h2>Mercedes-Benz AMG: One Of</h2>
                    </div>
                    <div class="d-flex"><span>Posted By : f1rstmotors</span></div>
                    <div class="d-flex"><span>Posted On : 1/May/2024</span></div>
                </div>
            </div>
        </div>
        <div class="feed-item top-60">
            <img src="{{url('frontend/assets/images/feed1.jpeg')}}" width="210" height="380">
            <div class="bg-black-gradient-feed"></div>
            <div class="feed-content">
                <div class="content-wrapper">
                    <div style="display: block;">
                        <h2>Mercedes-Benz AMG: One Of</h2>
                    </div>
                    <div class="d-flex"><span>Posted By : f1rstmotors</span></div>
                    <div class="d-flex"><span>Posted On : 1/May/2024</span></div>
                </div>
            </div>
        </div>
        <div class="feed-item">
            <img src="{{url('frontend/assets/images/feed2.jpeg')}}" width="210" height="380">
            <div class="bg-black-gradient-feed"></div>
            <div class="feed-content">
                <div class="content-wrapper">
                    <div style="display: block;">
                        <h2>Mercedes-Benz AMG: One Of</h2>
                    </div>
                    <div class="d-flex"><span>Posted By : f1rstmotors</span></div>
                    <div class="d-flex"><span>Posted On : 1/May/2024</span></div>
                </div>
            </div>
        </div>
        <div class="feed-item top-60">
            <img src="{{url('frontend/assets/images/feed1.jpeg')}}" width="210" height="380">
            <div class="bg-black-gradient-feed"></div>
            <div class="feed-content">
                <div class="content-wrapper">
                    <div style="display: block;">
                        <h2>Mercedes-Benz AMG: One Of</h2>
                    </div>
                    <div class="d-flex"><span>Posted By : f1rstmotors</span></div>
                    <div class="d-flex"><span>Posted On : 1/May/2024</span></div>
                </div>
            </div>
        </div>
        <div class="feed-item">
            <img src="{{url('frontend/assets/images/feed2.jpeg')}}" width="210" height="380">
            <div class="bg-black-gradient-feed"></div>
            <div class="feed-content">
                <div class="content-wrapper">
                    <div style="display: block;">
                        <h2>Mercedes-Benz AMG: One Of</h2>
                    </div>
                    <div class="d-flex"><span>Posted By : f1rstmotors</span></div>
                    <div class="d-flex"><span>Posted On : 1/May/2024</span></div>
                </div>
            </div>
        </div>
        <div class="feed-item top-60">
            <img src="{{url('frontend/assets/images/feed1.jpeg')}}" width="210" height="380">
            <div class="bg-black-gradient-feed"></div>
            <div class="feed-content">
                <div class="content-wrapper">
                    <div style="display: block;">
                        <h2>Mercedes-Benz AMG: One Of</h2>
                    </div>
                    <div class="d-flex"><span>Posted By : f1rstmotors</span></div>
                    <div class="d-flex"><span>Posted On : 1/May/2024</span></div>
                </div>
            </div>
        </div>
        <div class="feed-item">
            <img src="{{url('frontend/assets/images/feed2.jpeg')}}" width="210" height="380">
            <div class="bg-black-gradient-feed"></div>
            <div class="feed-content">
                <div class="content-wrapper">
                    <div style="display: block;">
                        <h2>Mercedes-Benz AMG: One Of</h2>
                    </div>
                    <div class="d-flex"><span>Posted By : f1rstmotors</span></div>
                    <div class="d-flex"><span>Posted On : 1/May/2024</span></div>
                </div>
            </div>
        </div>
        <!-- 复制前4个item添加到末尾 -->
        <div class="feed-item">
            <img src="{{url('frontend/assets/images/feed1.jpeg')}}" width="210" height="380">
            <div class="bg-black-gradient-feed"></div>
            <div class="feed-content">
                <div class="content-wrapper">
                    <div style="display: block;">
                        <h2>Mercedes-Benz AMG: One Of</h2>
                    </div>
                    <div class="d-flex"><span>Posted By : f1rstmotors</span></div>
                    <div class="d-flex"><span>Posted On : 1/May/2024</span></div>
                </div>
            </div>
        </div>
        <div class="feed-item">
            <img src="{{url('frontend/assets/images/feed2.jpeg')}}" width="210" height="380">
            <div class="bg-black-gradient-feed"></div>
            <div class="feed-content">
                <div class="content-wrapper">
                    <div style="display: block;">
                        <h2>Mercedes-Benz AMG: One Of</h2>
                    </div>
                    <div class="d-flex"><span>Posted By : f1rstmotors</span></div>
                    <div class="d-flex"><span>Posted On : 1/May/2024</span></div>
                </div>
            </div>
        </div>
        <div class="feed-item top-60">
            <img src="{{url('frontend/assets/images/feed1.jpeg')}}" width="210" height="380">
            <div class="bg-black-gradient-feed"></div>
            <div class="feed-content">
                <div class="content-wrapper">
                    <div style="display: block;">
                        <h2>Mercedes-Benz AMG: One Of</h2>
                    </div>
                    <div class="d-flex"><span>Posted By : f1rstmotors</span></div>
                    <div class="d-flex"><span>Posted On : 1/May/2024</span></div>
                </div>
            </div>
        </div>
        <div class="feed-item">
            <img src="{{url('frontend/assets/images/feed2.jpeg')}}" width="210" height="380">
            <div class="bg-black-gradient-feed"></div>
            <div class="feed-content">
                <div class="content-wrapper">
                    <div style="display: block;">
                        <h2>Mercedes-Benz AMG: One Of</h2>
                    </div>
                    <div class="d-flex"><span>Posted By : f1rstmotors</span></div>
                    <div class="d-flex"><span>Posted On : 1/May/2024</span></div>
                </div>
            </div>
        </div>
    </div>
</div>

此时需要同步更新.feed-track的宽度：

.feed-track {
  width: calc(230px * 12);
}

这样动画滚动到4个item的位置时，末尾的复制内容会和前面的内容无缝衔接，彻底消除空白和视觉断点。

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