如何解决这个无休止滚动的代码？答案

【问题标题】：How to fix this endlessly scrolling ticker?如何解决这个无休止滚动的代码？
【发布时间】：2021-11-23 04:13:16
【问题描述】：

我需要 n 列来显示无休止重复的内容（见附件 gif）。

我的方法是克隆并附加每列的项目，然后为列高设置transform: translateY() 的动画。

这在我使用 css 设置每个项目的高度时有效（参见 sn-p 中的方法 1）。

但是，当项目高度由其内容确定时（方法 2），动画在循环时会跳过。

我花了两天时间，但无法解决问题。有人有想法吗？

$(() => {
        for(var i = 0; i < 3; i++) { // 3 columns
          var html = '<div class="column">';
          for(var j=0; j<3; j++) { // 3 items

            // METHOD 1: SETTING RANDOM HEIGHT VIA CSS
            html += '<div class="item" style="height:' + (50 + Math.random() * 100) + 'px"></div>';

            // METHOD 2: SETTING RANDOM HEIGHT VIA CONTENT
            //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'));
          var height = $column.height() - parseInt(window.getComputedStyle($column.find(':first-child')[0]).marginTop); // Get height minus one child margin (because of collapsing margins)
          $column.children().clone().appendTo($column);
          $column[0].style.setProperty('--height', -height + 'px');
          $column.css('animation', 'ticker ' + (height / 50) + 's linear infinite');
        }
      });

section#ticker-wrapper {
  height: 400px;
  background-color: #ddd;
  display: flex;
  align-items: flex-start;
  border: 1px solid red;
}
div.column {
  flex: 1;
  border: 1px solid blue;
}
div.item {
  margin: 20px;
  background-color: white;
}
@keyframes ticker { to { transform: translateY(var(--height)); } }

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

【问题讨论】：

标签： jquery css css-animations

【解决方案1】：

好的，我确实找到了解决方案。

问题是我在添加其他列之前确定了第 1 列的高度。因为flex: 1 添加更多的列有时会使一个项目变得更高，因此整个列更高。

解决方案是将循环分成两个循环。一个添加项目，然后另一个确定高度：

for(var i = 0; i < 3; i++) {
  var html = '<div class="column">';
  for(var j=0; j<3; j++) {
    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>';
  $(html).appendTo($('section#ticker-wrapper'));
}
for(var i = 0; i < 3; i++) {
  var $column = $($('section#ticker-wrapper div.column')[i]);
  var height = $column.height() - parseInt(window.getComputedStyle($column.find(':first-child')[0]).marginTop); // Get height minus one child margin (because of collapsing margins)
  $column.children().clone().appendTo($column);
  $column[0].style.setProperty('--height', -height + 'px');
  $column.css('animation', 'ticker ' + (height / 50) + 's linear infinite');
}

【讨论】：