数据向上循环滚动

 html部分

<div class="liscorll"> 
</div>

js部分：

            var flag=true;
			var arr=[];
            var showRow=4;  //页面显示总数（数量自定）
			$(document).ready(function() { 
                //鼠标事件
				$(".liscorll").mouseover(()=>{
					flag=false;
				}).mouseout(()=>{
					flag=true;
				})
				//获取模拟的数据
				getData();
                //获取页面要显示的数量
				let j=0;
				for (var i = 0; i < arr.length; i++) {
					if(j>showRow-1) break;
					$(".liscorll").append("<div>第"+ arr[i] +"行数据</div>"); 
                    //加载一个删除一个
					arr.shift(arr[i]) 
					i--; j++;
				}
                //循环加载数据
				setInterval(function() { 
					if(flag) doscroll() 
				}, 3000);
			}); 
			//模拟的数据
			function getData(){
				for (var i = 0; i < 20; i++) {
					let r=randomRange(0, 1000);
					if(!arr.includes(r)) arr.push(r);
				}
					 console.log(arr)
			}
            //数据滚动
			function doscroll() {
				var $parent = $('.liscorll');
				var $first = $parent.find('div:first');
				var height = $first.height();
				$first.animate({
					height: 0         //或者改成： marginTop: -height + 'px'
				}, 500, function() {  // 动画结束后，把它插到最后，形成无缝
					$first.css('height', height).appendTo($parent);
					// $first.css('marginTop', 0).appendTo($parent);
                    //大于等于页面显示的总数时删除第一条数据
					if($(".liscorll").children().length>=showRow) 
					    $(".liscorll").children().eq($(".liscorll").children().length-1).remove()
						
					$(".liscorll").append("<div>第"+arr[0]+"行数据</div>"); 
					arr.shift(arr[0]) 
                    //数据全部加载完后重新获取
					if(arr.length==0) getData()
				});
			};

			function randomRange(min, max) { // min最小值，max最大值 
				return Math.floor(Math.random() * (max - min)) + min;
			}