如何从下到上为列表制作动画

Ambuj Khanna 发表于 Dev

Ambuj khanna

我正在创建一个小动画，其工作方式如Up to Down，一旦它将滚动到结束，然后它将Down Down变为Up，并且将一次又一次地重复。

<style>
#scrollList{height:150px; width:200px; overflow:auto; margin:40px auto;}
#scrollList li{height:45px;}
</style>
<script type="text/javascript">
//document.getElementById("scrollList").setAttribute("onClick","scrollList()");
function scrollList() {
//var scrollHeight = document.getElementById("scrollList").scrollTop;
//console.log(scrollHeight);

var ActualscrollHeight = document.getElementById("scrollList").clientHeight;
console.log(ActualscrollHeight);

setInterval(function(){
var scrollHeight = document.getElementById("scrollList").scrollTop;
if(scrollHeight <= ActualscrollHeight){
scrollHeight = scrollHeight + 1;
//console.log(scrollHeight);
document.getElementById("scrollList").scrollTop=scrollHeight;
}


}, 3);
}
</script>

<body onload="scrollList()">
<ul id="scrollList">
<li>Scroll Text</li>
<li>Scroll Text</li>
<li>Scroll Text</li>
<li>Scroll Text</li>
<li>Scroll Text</li>
<li>Scroll Text</li>
<li>Scroll Text</li>
</ul>

阿努吉斯

试试这个：

function scrollList() {
    var ActualscrollHeight = document.getElementById("scrollList").clientHeight;
    var down = true;
    setInterval(function () {
        var scrollHeight = document.getElementById("scrollList").scrollTop;
        if (scrollHeight == 0) {
            down = true;
        } else if (scrollHeight >= ActualscrollHeight) {
            down = false;
        }
        scrollHeight = (!down) ? scrollHeight - 1 : scrollHeight + 1;
        document.getElementById("scrollList").scrollTop = scrollHeight;
    }, 3);
}

小提琴

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。