如何反转这个滚动动画？答案

【问题标题】：How to reverse this scroll animation?如何反转这个滚动动画？
【发布时间】：2021-03-17 01:44:53
【问题描述】：

我想将这个简单的东西用于我的网站。问题是我想向下滚动文本。所以基本上反过来，但我做不到。是否有可能以某种方式反转 scrollTop() ？

HTML

<div id="list">
    <span>Item 1</span>
    <span>Item 2</span>
    <span>Item 3</span>
    <span>Item 4</span>
    <span>Item 5</span>
    <span>Item 6</span>
    <span>Item 7</span>
    <span>Item 8</span>
    <span>Item 9</span>
    <span>Item 10</span>
</div>

CSS

* {
    box-sizing: border-box;
}

#list {
    overflow: hidden;
    width: 300px;
    height: 50px;
    background: red;
    padding: 10px;
}

#list span {
    display: block;
    height: 30px;
    padding: 10px 10px;
    margin-bottom: 10px;
    background: yellow;
}

.item:last-child {
    margin-bottom: 0px;
}

setInterval(function(){
  $('#list').stop().animate({scrollTop:40},400,'swing',function(){
    $(this).scrollTop(0).find('span:last').after($('span:first', this));
  });
}, 1000);

你有一个小提琴http://jsfiddle.net/e5dtyLjw/4/

在此先感谢

【问题讨论】：

标签： jquery css text infinite-scroll

【解决方案1】：

在您的动画中，序列如下：

40 像素的滚动动画
将第一个元素（顶部溢出的元素）移到底部
将滚动位置重置为零（因为第一个元素已移动）

现在要反转它，您需要：

将最后一个元素移到顶部
将滚动位置设置为 40 像素
动画滚动到零位置

两者的主要区别在于元素“移动”在动画之前和之后（在动画回调上）。

setInterval(function(){
  $('#list').prepend($('#list').find('span:last'));
  $('#list').scrollTop(40).stop().animate({scrollTop:0},400,'swing')
}, 1000);

* {
    box-sizing: border-box;
}

#list {
    overflow: hidden;
    width: 300px;
    height: 250px;
    background: red;
    padding: 10px;
}

#list span {
    display: block;
    height: 30px;
    padding: 10px 10px;
    margin-bottom: 10px;
    background: yellow;
}

.item:last-child {
    margin-bottom: 0px;
}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="list">
    <span>Item 1</span>
    <span>Item 2</span>
    <span>Item 3</span>
    <span>Item 4</span>
    <span>Item 5</span>
    <span>Item 6</span>
    <span>Item 7</span>
    <span>Item 8</span>
    <span>Item 9</span>
    <span>Item 10</span>
</div>

如有任何问题，请随时... ;)

【讨论】：