Question

我想在屏幕底部构建一个滚动的滚动条，从右向左滚动。

最好的方法是什么？我正在使用reactjs，我读到反应与jQuery不能很好地结合，我发现的大多数例子都使用jQuery。

Answer 1

您可以完全使用css创建侧滚动效果。这是demo fiddle。

/* Make it a marquee */
.marquee {
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
}

.marquee span {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 5s linear infinite;
}

/* Make it move */
@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

Answer 2

基于

Tyrsius

解决方案，我已经修改了一点关键帧动画，所以现在它会在中间停留一段时间，因此用户可以以一种舒适的方式阅读内容：

 @keyframes marquee {
0%   { transform: translate(0,0);
       font-style:italic;
       opacity:0;}
5%   { opacity:0;}
14%  { opacity:0.8;}
15%  { transform: translate(-46%, 0);
       opacity:1;
       font-style:normal;}
85%  { transform: translate(-54%, 0);
       opacity:1;
       font-style:normal;}
86%  { opacity:0.8;}
96%  { opacity:0;}  
100% { transform: translate(-100%, 0);
       opacity:0;}}

Answer 3

查看react-scroll指令：

https://www.npmjs.com/package/react-scroll

滚动div自动收报机

3 个答案: