Shopify主题使用区块时CSS Marquee动画卡顿问题求助

我来帮你搞定这个跑马灯卡顿的问题！你遇到的末尾卡顿，核心原因是动画位移和实际内容宽度不匹配，加上重复区块的逻辑有问题，导致动画循环到结束时出现跳变卡顿。我先拆解问题，再直接上修复后的代码。

问题分析 #

1. 硬编码宽度与实际渲染不符：你用case语句硬算的width和keyframe值，和响应式Logo区块（col-md-4等）的实际渲染宽度有偏差，动画结束时的位移和内容长度不匹配，就会出现卡顿跳变。
2. 重复区块逻辑错误：你只复制了除最后一个区块外的Logo，导致.marquee--content长度不足，滚动到末尾时没有无缝衔接的内容，自然会卡顿几秒再重启。

修复方案 #

我们要做的是：

• 去掉硬编码宽度计算，让内容自然延伸
• 复制完整的Logo列表，确保滚动前后无缝衔接
• 让动画位移等于单个Logo列表的宽度，实现平滑循环

修改后的完整代码 #

{% assign block_count = section.blocks.size %}
{% assign marquee_enabled = section.settings.marquee %}

<style>
  .logo_list--marquee {
    display: flex;
    overflow-x: hidden;
    flex-wrap: nowrap;
    white-space: nowrap;
    min-width: 100%;
    height: 200px;
  }

  .marquee--content {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    animation: slide-left {{ section.settings.marquee_speed }}s linear infinite;
    flex-wrap: nowrap;
  }

  .marquee--content .logo_list--logo {
    flex: 0 0 auto;
  }

  @keyframes slide-left {
    from { 
      transform: translateX(0); 
    }
    to { 
      transform: translateX(calc(-100% / 2)); 
    }
  } 
</style>

<div class="row logo_list--marquee">
  <div class="marquee--content">
    {% for block in section.blocks %}
      {% assign link = block.settings.link %}
      {% assign image = block.settings.image %}
      <div class="col-md-4 col-sm-6 col-6 logo_list--logo">
        {% if link != blank %}
          <a href="{{ link }}">
        {% endif %}
        <div class="logo__img">
          {% if image != blank %}
            {{ image | image_url: width: 1500 | image_tag:
             width: image.width,
             height: image.height,
             widths: '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840',
             alt: image.alt | escape }}
          {% else %}
            {{ 'logo' | placeholder_svg_tag: 'logo-list__placeholder' }}
          {% endif %}
        </div>
        {% if link != blank %}
          </a>
        {% endif %}
      </div>
    {% endfor %}

    {% if marquee_enabled and block_count >= 3 %}
      <!-- 复制完整Logo列表，实现无缝滚动衔接 -->
      {% for block in section.blocks %}
        {% assign link = block.settings.link %}
        {% assign image = block.settings.image %}
        <div class="col-md-4 col-sm-6 col-6 logo_list--logo">
          {% if link != blank %}
            <a href="{{ link }}">
          {% endif %}
          <div class="logo__img">
            {% if image != blank %}
              {{ image | image_url: width: 1500 | image_tag:
               width: image.width,
               height: image.height,
               widths: '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840',
               alt: image.alt | escape }}
            {% else %}
              {{ 'logo' | placeholder_svg_tag: 'logo-list__placeholder' }}
            {% endif %}
          </div>
          {% if link != blank %}
            </a>
          {% endif %}
        </div>
      {% endfor %}
    {% endif %}
  </div>
</div>

关键改动说明 #

1. 移除硬编码宽度：删掉了原来的case语句，让.marquee--content宽度由内部Logo区块自然撑开，避免和实际渲染宽度不符。
2. 完整复制Logo列表：原来只复制了除最后一个外的区块，现在直接复制完整的blocks列表，滚动到末尾时，后面跟着完全一样的内容，实现无缝衔接。
3. 动画位移改用百分比：关键帧结束位移用calc(-100% / 2)，因为我们复制了两份列表，位移一半宽度就刚好让第二份列表接在第一份后面，循环完全平滑。
4. 修复变量引用：补上了{% assign link = block.settings.link %}和{% assign image = block.settings.image %}，确保变量正确引用区块设置里的内容。

这样修改后，跑马灯就能平滑循环，不会在末尾出现卡顿跳变的问题了。

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