有没有办法在 HTML 表格上自定义选取框以减少滚动延迟？

如何解决有没有办法在 HTML 表格上自定义选取框以减少滚动延迟？

我从 API 获取数据，我想将其显示在表格上。但是，此表格具有选框滚动功能。

内容应如示例代码所示。效果很好。

挑战是 scroll delay，我想显示记录，然后延迟 3 秒，然后再次开始循环。

目前，延迟大约在 80 秒后开始，猜猜这是默认值？

等等，我知道选框已被弃用，但是，它适用于这种情况。

有人知道怎么做吗？

var response = [
{
"collected_received": 805,"tested": 526,"perc_less_1000": 0.8768267,"rejected": 1
},{
"collected_received": 788,"tested": 1933,"perc_less_1000": 0.9077469,"rejected": 0
},{
"collected_received": 114,"tested": 2342,"perc_less_1000": 0.9503951,"rejected": 16
},{
"collected_received": 492,"tested": 767,"perc_less_1000": 0.8912732,"rejected": 7
},{
"collected_received": 186,"tested": 909,"perc_less_1000": 0.9170404,{
"collected_received": 115,"tested": 378,"perc_less_1000": 0.931694,{
"collected_received": 26,"tested": 368,"perc_less_1000": 0.9466292,"rejected": 0
}
];


var trHTML = '';

$.each(response,function (i,item) {

trHTML += '<tr><td width="130px"><div style="width: 35px;border-radius: 0.1vw; text-align:center; border: 0.1vw rgba(255,255,.7) solid;font-size: 0.8em; margin: 0.1vw; padding:0px 0px 0px 0px;">' + item.collected_received + '</div></td><td width="90px"><div style="width: 35px;border-radius: 0.1vw;text-align:center; border: 0.1vw rgba(255,.7) solid;font-size: 0.8em; margin: 0.1vw; padding:0px 0px 0px 0px;">' + item.tested + '</div></td><td width="130px"><div style="width: 35px;border-radius: 0.1vw;text-align:center; border: 0.1vw rgba(255,.7) solid;font-size: 0.8em; margin: 0.1vw; padding:0px 0px 0px 0px;">' + item.perc_less_1000.toFixed(1) + '</div></td><td width="90px"><div style="width: 35px;border-radius: 0.1vw;text-align:center; border: 0.1vw rgba(255,.7) solid;font-size: 0.8em; margin: 0.1vw; padding:0px 0px 0px 0px;">' + item.rejected + '</div></td></tr>';

});
$('#records_table').append(trHTML);

.marquee {
    top: 6em;
    position: relative;
    Box-sizing: border-Box;
    animation: marquee 140s linear 0s infinite;
}

.marquee:hover {
    animation-play-state: paused;
}

@keyframes marquee {
    0% {
        top: 40em
    }
    100% {
        top: -300em
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row contain"
   style="background-color: rgba(0,.15); margin:2px; height:150vh; max-height:94vh;border-radius: 0.9vw;">
   <div class="table-responsive">
      <table class="table table-condensed table-striped table-sm" style="color: white;"
         id="table_fixed">
         <thead>
            <tr>
               <th width="130px">Received</th>
               <th width="90px"> Tested </th>
               <th width="130px">Total (%)</th>
               <th width="90px">Rejected </th>
            </tr>
         </thead>
      </table>
   </div>
   <div class="table-responsive" id="contain">
      <table class="marquee table table-condensed table-striped table-sm" style="color: white;truespeed:10;"
         id="records_table">
         <tbody>
         </tbody>
      </table>
   </div>

解决方法

没有 css 属性可以在迭代之间延迟。所以我们可以给出动画本身的差距。这是数学：

（延迟 ÷ 总时间）*100 = 开始百分比

您想延迟 3 秒，所以我们可以在 (3÷Total Time)*100 处开始我们的动画。

我举了一个总时间为 9 秒的例子。我们将在 ((3÷9)*100) = 33%

处开始动画

这会使动画延迟 3 秒，完成动画需要 6 秒。

代码如下：

.marquee {
    top: 100%;
    position: relative;
    box-sizing: border-box;
    animation: marquee 9s linear infinite;
}

.marquee:hover {
    animation-play-state: paused;
}

@keyframes marquee {
    0% {
        top: 100%
    }
    33% {
        top: 100%
    }
    100% {
        top: -100%;
    }
}

实际上，没有设置下一次迭代延迟的选项，但我们可以通过CSS中的小变化来管理它，如下所示，请尝试使用这个CSS

.marquee {
    top: 6em;
    position: relative;
    box-sizing: border-box;
    animation: marquee 20s linear 0s infinite;

}

.marquee:hover {
    animation-play-state: paused;
}

@keyframes marquee {
    0% {
        top: 30em;
    }
    100% {
        top: -30em;
    }
}