100%高垂直字幕，CSS固定滚动速度

出于法规遵从性原因，我需要用CSS等价物替换垂直滚动条。替换需要是100%高的字幕，以固定速度垂直滚动

此示例实现了我需要的功能，但有三个例外：

我尝试使用上面链接的代码，但找到了一种方法来满足以下三个要求：

（1） 我需要它是100%高，为文本从上到下滚动

（2） 我无法指定滑块div的长度，因为它将由（变量）内容决定。这意味着我不能设置绝对滚动位置，除了div的顶部应该从视口的底部开始，并一直滚动直到该div的底部到达视口的顶部

及

（3） 滚动速度不能固定为15秒，因为如果有大量内容，则滚动速度太快，而如果内容很少，则滚动速度太慢。我需要能够指定一个固定的滚动速度，与长度无关

.container{
宽度：20em；
高度：10公分；
利润率：2米自动；
溢出：隐藏；
背景：#ffffff；
位置：相对位置；
}
.滑块{
顶部：1米；
位置：相对位置；
框大小：边框框；
动画：滑块15s线性无限；
列表样式类型：无；
文本对齐：居中；
}
.滑块：悬停{
动画播放状态：暂停；
}
@关键帧滑块{
0%{top:10em}
100%{顶部：-14em}
}
.blur.slider{
保证金：0；
填充：0.1em；
线高：1.5em；
}
.blur:before、.blur:：before、，
.blur:after.blur:：after{
左：0；
z指数：1；
内容：''；
位置：绝对位置；
宽度：100%；
高度：2米；
背景图像：线性梯度（180度，#FFF，rgba（255255,0））；
}
.blur:after.blur:：after{
底部：0；
变换：旋转（180度）；
}
.blur:before.blur:：before{
排名：0；
}
p{
字体系列：helvetica、arial、无衬线字体；
}

你好，是我

我想知道这么多年后你是否想见我

检查一切

他们说时间会治愈你

但我没有做多少治疗

我找不到一种纯粹的CSS方法来保持一致的速度，但是通过一点数学和小javascript，您可以通过可变高度的项目实现固定速度。下面的关键因素是/500，以每秒像素为单位。下面的代码将以每秒约500像素的速度滚动，无论项目的长度如何

高度可以适应您的设计

这将根据您的要求顺利循环

滚动速度由您决定，与长度无关

为了可读性，javascript/css非常详细

-如果仍然可用，否则代码如下

HTML

项目
...

CSS

*{填充：0；边距：0；框大小：边框框；}
正文{溢出：隐藏；高度：100%；}
.滑块{
位置：绝对位置；
列表样式类型：无；
文本对齐：居中；
动画：滑块线性无限；
}
.slider li{线高：50px；宽度：100vw；}
@关键帧滑块{
0%{transform:translateY（100vh）}
100%{transform:translateY（-100%）}
}

JS

window.onload=function（）{
var lineHeight=document.querySelector（“.slider li”）.clientHeight；
var viewHeight=window.innerHeight；
var slider=document.querySelector（“.slider”）；
变量时间=（slider.offsetHeight*2.0+viewHeight*2）/500.0；
slider.style.animationDuration=时间+s；
}