如何修复内容高度自适应的无限滚动跑马灯（ticker）动画跳闪问题

跳闪根本原因 #

• 自适应内容高度场景下，将列元素插入DOM后立即读取高度，此时浏览器还未完成文本排版和重排计算，拿到的高度值存在误差，最终动画平移距离和实际原列总高度不匹配，动画循环重置时就会出现跳闪。
• 兄弟元素、父子元素的margin折叠问题，你计算高度时仅减去了第一个item的margin-top，但原列最后一个item的margin-bottom和克隆后的第一个item的margin-top会发生折叠，导致实际滚动对齐位置和计算值存在偏差。

修复步骤 #

1. 给.column添加display: flow-root属性，彻底消除margin折叠的影响，无需再手动计算margin偏移。
2. 把高度计算逻辑放到requestAnimationFrame回调中执行，确保浏览器完成DOM渲染、高度数值稳定后再读取。如果需要兼容老旧浏览器，也可以替换为setTimeout(() => {}, 0)，效果一致。

修复后完整代码 #

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="ticker-wrapper"></section>

CSS #

section#ticker-wrapper {
  height: 400px;
  background-color: #ddd;
  display: flex;
  align-items: flex-start;
  border: 1px solid red;
  overflow: hidden; /* 可选，超出容器的内容隐藏 */
}
div.column {
  flex: 1;
  border: 1px solid blue;
  display: flow-root; /* 新增：消除margin折叠 */
}
div.item {
  margin: 20px;
  background-color: white;
}
@keyframes ticker { 
  to { transform: translateY(var(--height)); } 
}

JS #

$(() => {
  for(var i = 0; i < 3; i++) { // 3 columns
    var html = '<div class="column">';
    for(var j=0; j<3; j++) { // 3 items
      // 使用自适应内容高度的方法2
      html += '<div class="item">' + ('Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo similique ducimus tempore molestiae ad, maxime obcaecati animi voluptatum ab, neque sed perferendis eveniet est eligendi, officiis dolor aut saepe iste.').substr(0, Math.random() * 1000) + '</div>';
    }
    html += '</div>';
    var $column = $(html).appendTo($('section#ticker-wrapper'));
    // 等待DOM渲染完成后再计算高度
    requestAnimationFrame(() => {
      var height = $column.height(); // 无需再手动减margin，flow-root已经消除折叠
      $column.children().clone().appendTo($column);
      $column[0].style.setProperty('--height', -height + 'px');
      $column.css('animation', 'ticker ' + (height / 50) + 's linear infinite');
    })
  }
});

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