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

Question

我正在从 API 获取数据，我想在 table 上显示它。但是，此 table 具有选取框滚动功能。

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

挑战是 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,
"rejected": 1
},
{
"collected_received": 115,
"tested": 378,
"perc_less_1000": 0.931694,
"rejected": 1
},
{
"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,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,255,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,255,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,255,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,0,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>

Answer 1

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

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

你想延迟 3 秒，所以我们可以在 (3÷总时间)*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%;
    }
}

Answer 2

实际上，没有设置下一次迭代延迟的选项，但我们可以通过下面的 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;
    }
}

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

Is there a way to customize marquee on a HTML table to reduce the scroll delay?

html

javascript

css

marquee