微信浏览器scrollTop问题

最新推荐文章于 2023-12-06 17:17:16 发布

wive

最新推荐文章于 2023-12-06 17:17:16 发布

阅读量1.1w

点赞数 3

CC 4.0 BY-SA版权

文章标签：微信浏览器scrollTop滑动条底部

本文链接：https://blog.csdn.net/javadhh/article/details/51992878

前端技术专栏收录该内容

41 篇文章

订阅专栏

在微信上开发接入环信聊天功能时，需要确保新消息能将历史消息顶上去，保持滚动条始终位于底部。通过设置scrollTop属性，可以在每次接收到新消息并追加到列表后，实现这一功能。此方法适用于各种浏览器的兼容性处理。

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

功能描述：最近要在微信上面做一个接入环信的聊天功能，

要把新收到的消息把原来的消息往上顶，因此要设置滚动条总是在最下面，因此要用到scrollTop

1、聊天消息列表：

<ul id="message">
	<li></li>
	<li></li>
</ul>

2、该方法在每次收到消息并且append到message（ul）调用：

/**
 * JS效果
 * 将滚动条滚到最下面， 用于新消息将原来的消息顶上去
 * 消息列表：
 * <ul id="message">
 * 	<li></li>
 * 	<li></li>
 * </ul>
 * 
 */
function changeToBottom(){
	//这两种写法都可以，但是微信浏览器不兼容,能支持火狐等浏览器
	//document.getElementById('message').scrollTop = document.getElementById('message').scrollHeight;
	//$('#message').scrollTop( $('#message')[0].scrollHeight );
	
	//能兼容微信的写法
	setScrollTop(document.getElementById('message').scrollHeight);
}

3、附加一个判断是否到底的js方法：

window.onscroll= function(){
	var a = document.documentElement.scrollTop==0? document.body.clientHeight : document.documentElement.clientHeight;
	var b = document.documentElement.scrollTop==0? document.body.scrollTop : document.documentElement.scrollTop;
	var c = document.documentElement.scrollTop==0? document.body.scrollHeight : document.documentElement.scrollHeight;
	if(a+b==c){
		alert("到底了");
		//showMoreData();   //加载更多的数据
	}
};

4、兼容所有浏览器设置scrollTop的方法：

/**
 *获取scrollTop的值，兼容所有浏览器 
 */
function getScrollTop() {
	var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
	return scrollTop;
}

/**
 *设置scrollTop的值，兼容所有浏览器 
 */
function setScrollTop(scroll_top) {
	document.documentElement.scrollTop = scroll_top;
	window.pageYOffset = scroll_top;
	document.body.scrollTop = scroll_top;
}