如何反转这个滚动动画？

Posted 2023-03-05

【中文标题】如何反转这个滚动动画？

【英文标题】：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;

JS

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/

在此先感谢

【参考方案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>

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