移动端仿直播间弹幕

效果

代码

<div class="Plive_comments">
	<ul>
		<li>祝大家新年快乐吖！</li>
		<li>实鼠不易，牛年大吉！</li>
		<li>新的一年，新的开始，祝大家阖家欢乐，平平安安!</li>
		<li>跨过除夕，迈入新年!</li>
		<li>老铁666!</li>
		<li>牛气冲天！</li>
		<li>吉祥如意！</li>
		<li>扭转乾坤！</li>
	</ul>
</div>
<!-- /评论滚动部分 -->

/* 评论滚动区 */
.Plive_comments {
	position: absolute;
	left: 56px;
	top: 847px;
	width:384px;
	height:304px;
	overflow:hidden;
}

.Plive_comments ul {
	list-style:none;
	width:100%;
	height:100%;
}

.Plive_comments ul li {
	/* 浮动和清除浮动是让每一条评论都以行元素的身份独占一行 */
	float:left; 
	clear:both;
	
	width: auto;
	height: auto;
	margin: 7px 0;
	padding: 0 12px;
	box-sizing:border-box;
	line-height:42px;
	font-size: 32px;
	color: #fff;
	background: rgba(0, 0, 0, .3);
	border-radius: 30px;
}

// 滚动评论区
//获得当前<ul>
let $uList = $(".Plive_comments ul"),
	timer = null;

//滚动动画
function scrollList(obj) {
	//获得当前<li>的高度
	let scrollHeight = $("ul li:first").height();
	//滚动出一个<li>的高度
	$uList.stop().animate({
		marginTop: -scrollHeight
	}, 600, function() {
		//动画结束后，将当前<ul>marginTop置为初始值0状态，再将第一个<li>拼接到末尾。
		$uList.css({
			marginTop: 0
		}).find("li:first").appendTo($uList);
	});
}

在这个链接的基础上改了一点东西，让它在移动端可以实现