网站Ticker Tape滚动无法循环，求实现连续无空白滚动方案

问题说明 #

使用TradingView提供的代码实现行情滚动条时，滚动结束后会出现空白间隙，无法实现无中断的连续滚动效果。

解决方案 #

核心问题在于原代码的动画位移设置和克隆时机不合理，导致内容无法无缝衔接。以下是具体修改方案：

关键修改点 #

1. 调整动画位移逻辑：将动画的终点位移从-100%改为-50%，同时确保滚动容器内包含两份完全相同的行情内容，这样滚动到一半时就能无缝衔接开头，避免空白。
2. 动态适配内容宽度：移除硬编码的容器宽度计算，让容器自适应内容实际宽度，避免因内容尺寸变化导致的错位。
3. 延迟克隆时机：等待TradingView的iframe加载完成后再克隆内容，确保克隆的是完整的行情组件，而非空框架。

修改后的完整代码 #

<!-- TradingView Widget BEGIN -->
<style>
body {
  margin: 0;
}
.content {
  padding: 10px 20px;
}
.content p {
  font-family: sans-serif;
}

/******/

.ticker-container {
  width: 100%;
  overflow: hidden;
}

.ticker-canvas {
  display: flex; /* 让两个内容横向并排 */
  width: fit-content; /* 自适应内容实际宽度 */
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: ticker-canvas;
  animation-duration: 30s; /* 可根据需求调整滚动速度 */
}
.ticker-canvas:hover {
  animation-play-state: paused
}

@keyframes ticker-canvas {
  0% {
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    transform: translate3d(-50%, 0, 0); /* 滚动一半距离即可无缝衔接 */
  }
}

.tradingview-widget-container {
  flex-shrink: 0; /* 防止内容被压缩变形 */
  width: 100%; /* 每个内容容器占满父容器宽度 */
}
</style>

<script>
// 等待页面和TradingView组件加载完成后再克隆内容
window.addEventListener('load', function() {
  const widgetContainer = document.querySelector('.tradingview-widget-container');
  const iframe = widgetContainer.querySelector('iframe');
  
  // 监听iframe加载完成，确保行情内容已渲染
  iframe.addEventListener('load', function() {
    const clonedIframe = iframe.cloneNode(true);
    widgetContainer.appendChild(clonedIframe);
  });
});
</script>

<div class="ticker-container">
  <div class="ticker-canvas">
    <div class="tradingview-widget-container">
      <div class="tradingview-widget-container__widget"></div>
      <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-tickers.js">
      {
        "symbols": [
          {"description": "IBOV", "proName": "INDEX:IBOV"},
          {"description": "Euro", "proName": "FX_IDC:BRLEUR"},
          {"description": "Dólar", "proName": "FX_IDC:BRLUSD"},
          {"description": "Libra", "proName": "FX_IDC:BRLGBP"},
          {"description": "Yuan", "proName": "FX_IDC:BRLCNY"},
          {"description": "Petróleo", "proName": "ECONOMICS:BRCOP"},
          {"description": "S&P", "proName": "SP:SPX"},
          {"description": "Nasdaq", "proName": "SKILLING:NASDAQ"},
          {"description": "Ouro (250g)", "proName": "BMFBOVESPA:OZ1"},
          {"description": "Inflação", "proName": "ECONOMICS:BRIRYY"},
          {"description": "Ibovespa", "proName": "INDEX:IBOV"},
          {"description": "Bovespa Index Mini Futures", "proName": "BMFBOVESPA:WIN1!"},
          {"description": "Bovespa Index Futures", "proName": "BMFBOVESPA:IND1!"},
          {"description": "S&P Index Futures", "proName": "BMFBOVESPA:ISP1!"},
          {"description": "Bitcoin", "proName": "CRYPTOCAP:BTC"}
        ],
        "colorTheme": "dark",
        "isTransparent": false,
        "showSymbolLogo": true,
        "locale": "br"
      }
      </script>
    </div>
  </div>
</div>
<!-- TradingView Widget END -->

代码解释 #

• Flex布局：通过display: flex让原行情内容和克隆内容横向并排，确保视觉上连续无断裂。
• 动画位移优化：滚动-50%时，克隆的内容刚好接替原内容的显示位置，实现无空白的循环滚动。
• 延迟克隆逻辑：通过监听load事件和iframe的加载状态，避免克隆未渲染完成的空框架，保证内容完整。

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