使用scrolllTop属性制作消息滚动

最新推荐文章于 2023-01-10 16:27:01 发布

kf999999999

最新推荐文章于 2023-01-10 16:27:01 发布

阅读量164

点赞数

文章标签： ajax javascript

本文链接：https://blog.youkuaiyun.com/kf999999999/article/details/107563790

版权

本文介绍如何使用JavaScript的scrollTop属性结合AJAX实现消息滚动功能。通过定时发送请求获取新消息，动态拼接并更新页面，确保消息的实时显示。需要注意的是，如果频繁请求，滚动速度可能因请求叠加而加快。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用scrolllTop属性制作消息滚动

发送请求，获取数据，进行拼接渲染，里面的内容从后台发送请求获得，每隔几分钟就请求一次，这样时间一长，它滚动的速度会叠加！！算了我自己都描述不清楚！直接看代码。

function ininMessageData(){
	   $.ajax({
		    url:"bigscreen/getMessageData",
		    type:"get",
		    dataType:"json",
		    data:{},
		    success:function(data)
		    {
		    	if(data.status==200)
		    	{
		    		var arrdata=data.data;
		    		if(Object.keys(data.data).length>0)
		    		{
		    			var list=arrdata;
		    			var sb='';
		    		    for (var i = 0; i < list.length; i++) {
		    		    	sb+='<div class="item" style="">';
		    		    	sb+='<div class="text-overflow-hidden" style="position: relative;left:50%;width: 95%;margin-left: -48%;font-size: 12px;padding:12px 10px;border-radius:24px;background: #013873;">';
		    		    	sb+='<div style="color: #00DBFF;">'+list[i].message_content+'</div>';
		    		    	sb+='</div>';
		    		    	sb+='</div>';
						}
		    		    $("#child1").html(sb);
		    		    (function () {
		    		        var parent = document.getElementById('parent');
		    		        var child1 = document.getElementById('child1');
		    		        var child2 = document.getElementById('child2');
		    		        child2.innerHTML = child1.innerHTML;
		    		        setInterval(function () {
		    		            if (parent.scrollTop >= child1.scrollHeight) {
		    		                parent.scrollTop = 0;
		    		            } else {
		    		                parent.scrollTop++;
		    		            }
		    		        }, 100);
		    		    })()
		    		}
		    	}
		    }
	   })
		    		    setTimeout(ininMessageData,120000);
   }