本文介绍一种轻量、纯 css + django 模板驱动的无限水平滚动图库方案：通过服务端重复渲染图像列表并配合宽度扩展与 overflow 控制，实现视觉无缝循环，无需 javascript。
本文介绍一种轻量、纯 css + django 模板驱动的无限水平滚动图库方案：通过服务端重复渲染图像列表并配合宽度扩展与 overflow 控制，实现视觉无缝循环，无需 javascript。
在构建响应式商品展示页或媒体画廊时，「无限循环滚动」能显著提升用户体验——用户滑动到末尾后无需停顿或点击，内容自然回流。不同于依赖 JavaScript 动画或第三方库（如 Swiper）的方案，本文提供一种零 JS、语义清晰、服务端可控的实现方式，完美适配 Django 模板上下文。
核心思路：服务端复制 + CSS 宽度扩容
无限滚动的本质并非真正“无限”，而是通过视觉欺骗营造循环感：当原始图像序列结束后，立即接上完全相同的副本，同时将容器设为固定宽度（如 width: calc(100% * 2)）并隐藏溢出部分。当用户持续向右滚动至副本区域时，再通过 CSS 过渡或自动重置（本方案依赖平滑滚动行为+足够长的可视缓冲区）达成无缝衔接。
✅ 优势：无运行时依赖、SEO 友好、服务端可动态控制副本数量、兼容性极佳（支持所有现代浏览器及 Safari iOS）
实现步骤
1. 修改 Django 模板：重复渲染图像块
在原有 {% for %} 循环基础上，追加一次完全相同的循环，确保 DOM 中存在两份连续、顺序一致的图像流：
<div class="top-display snaps-inline">
{% for top in clothes %}
<div class="top-wrapper">
@@##@@
</div>
{% endfor %}
<!-- 重复渲染：构建无缝循环基础 -->
{% for top in clothes %}
<div class="top-wrapper">
@@##@@
</div>
{% endfor %}
</div>? 提示：若需更高容错性（例如 clothes 为空），可在外层用 {% if clothes %}...{% endif %} 包裹；alt 属性增强可访问性，建议补充。
2. 更新 CSS：扩展容器宽度并强化滚动控制
关键修改在于 .top-display 的 width 和 overflow 行为，同时保留原有布局逻辑：
.top-display {
position: relative;
display: grid;
gap: 5rem;
grid-auto-flow: column;
grid-auto-columns: 17%;
padding: 0 var(--_spacer) var(--_spacer);
/* ? 核心：宽度设为原始内容的 2 倍，容纳两轮图像 */
width: calc(100% * 2);
/* ? 必须隐藏横向溢出，否则副本会折行或撑宽页面 */
overflow-x: hidden;
overflow-y: hidden;
overscroll-behavior-inline: contain;
white-space: nowrap;
/* ? 可选：启用平滑滚动（提升体验） */
scroll-behavior: smooth;
}⚠️ 注意事项：
- grid-auto-columns: 17% 在双倍宽度下仍保持单图比例，确保副本与原图尺寸一致；
- scroll-behavior: smooth 非必需，但强烈推荐添加，使滚动过渡更自然；
- 若使用 snap-inline（如 CSS Scroll Snap），请确认 scroll-snap-align: start 已作用于 .top-wrapper，以保障对齐精度。
3. 进阶优化（可选）
- 三倍副本增强鲁棒性：将循环复制三次（×3），并设 width: calc(100% * 3)，可进一步降低快速滚动时的“断点”感知；
- 响应式副本数：通过 Django 模板变量控制重复次数，例如 {% with loop_count=3 %}{% for i in loop_count|make_list %}...{% endfor %}{% endwith %}；
- 性能提示：图像应启用懒加载（loading="lazy"）和现代格式（WebP/AVIF），避免因副本导致资源冗余加载。
总结
该方案以最小侵入性达成无限滚动效果：不引入 JS、不改变数据模型、不增加网络请求，完全依托 Django 模板逻辑与 CSS 布局能力。它特别适合内容更新频率低、强调首屏性能与兼容性的电商类项目。实际部署前，请务必在 iOS Safari 和 Android Chrome 上测试滚动流畅度，并结合 prefers-reduced-motion 媒体查询降级处理（如禁用 scroll-behavior）。
