聊天窗口,新加的内容直接往上顶

最新推荐文章于 2023-02-15 14:51:15 发布

weixin_34377065

最新推荐文章于 2023-02-15 14:51:15 发布

阅读量514

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/bibo/blog/712355

版权

为什么80%的码农都做不了架构师？>>>

最新在写聊天需求，遇到了个问题，就是当有新消息时，如果把老的消息顶上去。也就是把SCROLL一直在底部

粘出简单的DEMO测试代码

用了JS的mCustomScrollbar插件

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="./jquery.mCustomScrollbar.css">

    </head>
    <body>
    <div style="width:500px;height:500px;overflow:hidden" id="test">
    <div id="content">
    	<div style="width:400px;height:30px;backgroune:#fff">sfasdf</div>
    	<div style="width:400px;height:30px;backgroune:#fff">sfasdf</div>
    	<div style="width:400px;height:30px;backgroune:#fff">sfasdf</div>
    	<div style="width:400px;height:30px;backgroune:#fff">sfasdf</div>
    	<div style="width:400px;height:30px;backgroune:#fff">sfasdf</div>
    	<div style="width:400px;height:30px;backgroune:#fff">sfasdf</div>
    	<div style="width:400px;height:30px;backgroune:#fff">sfasdf</div>
    	<div style="width:400px;height:30px;backgroune:#fff">sfasdf</div>
    	<div style="width:400px;height:30px;backgroune:#fff">sfasdf</div>
    	<div style="width:400px;height:30px;backgroune:#fff">sfasdf</div>
    	<div style="width:400px;height:30px;backgroune:#fff">sfasdf</div>
    	<div style="width:400px;height:30px;backgroune:#fff">sfasdf</div>
    	<div style="width:400px;height:30px;backgroune:#fff">sfasdf</div>
    	<div style="width:400px;height:30px;backgroune:#fff">sfasdf</div>
    	<div style="width:400px;height:30px;backgroune:#fff">sfasdf</div>
    	<div style="width:400px;height:30px;backgroune:#fff">sfasdf</div>
    	<div style="width:400px;height:30px;backgroune:#fff">sfasdf</div>
    	<div style="width:400px;height:30px;backgroune:#fff">sfasdf</div>
    	<div style="width:400px;height:30px;backgroune:#fff">sfasdf</div>
    	<div style="width:400px;height:30px;backgroune:#fff">sfasdf</div>
    	<div style="width:400px;height:30px;backgroune:#fff">sfasdf</div>
    	<div style="width:400px;height:30px;backgroune:#fff">sfasdf</div>
    	<div style="width:400px;height:30px;backgroune:#fff">sfasdf</div>
    	<div style="width:400px;height:30px;backgroune:#fff">sfasdf</div>
    	<div style="width:400px;height:30px;backgroune:#fff">sfasdf</div>
    	<div style="width:400px;height:30px;backgroune:#fff">sfasdf</div>
    	<div style="width:400px;height:30px;backgroune:#fff">sfasdf</div>
    	<div style="width:400px;height:30px;backgroune:#fff">sfasdf</div>
    	<div style="width:400px;height:30px;backgroune:#fff">sfasdf</div>
    	<div style="width:400px;height:30px;backgroune:#fff">sfasdf</div>
    	<div style="width:400px;height:30px;backgroune:#fff">sfasdf</div>
    	<div style="width:400px;height:30px;backgroune:#fff">sfasdf</div>
    	<div style="width:400px;height:30px;backgroune:#fff">sfasdf</div>
    	<div style="width:400px;height:30px;backgroune:#fff">sfasdf</div>
    	<div style="width:400px;height:30px;backgroune:#fff">sfasdf</div>
    	<div style="width:400px;height:30px;backgroune:#fff">sfasdf</div>
    </div>	
    	
    </div>
    </body>
</html>



<script src="./jquery.js"></script>
<script src="./jquery.mCustomScrollbar.concat.min.js"></script>
<script type="text/javascript">
	(function($){
			$(window).on("load",function(){
				
				$.mCustomScrollbar.defaults.scrollButtons.enable=true; //enable scrolling buttons by default
				$.mCustomScrollbar.defaults.axis="yx"; //enable 2 axis scrollbars by default
				
				$("#content-l").mCustomScrollbar();
				
				$("#test").mCustomScrollbar({theme:"dark"});

				
	
				
			});
			setInterval(reask, 500, "1");
			function reask(){
				// alert('sfa')
			$("#content").append('<div style="width:400px;height:30px;backgroune:#fff">sfasdf555</div>')
			$("#test").mCustomScrollbar("scrollTo","bottom");
		}

		})(jQuery);

	</script>

下面是相关的文档：

mCustomScrollbar 的参数介绍

mCustomScrollbar 这个插件的功能巨大，所以参数也很多，参数值当然更多。在介绍参数的时候，我想先为新手介绍两种参数值的写法，分别是直接的和合并的。

我们平时接触的插件用的参数，都是直接跟着参数写上参数值，这个比较直观简单。在这个插件中，参数值太多，所以把一些参数合并起来写。例如下面要介绍到的 scrollButtons 这个参数，它又有四个子属性：enable、scrollType、scrollSpeed、scrollAmount，这四个属性也分别有自己的值，来实现相应的功能。如果再加上其他的参数，那么我们应该这样写：

$("#main").mCustomScrollbar({
	scrollButtons:{
		enable:false,
		scrollType:"continuous",
		scrollSpeed:20,
		scrollAmount:40
	},
 	horizontalScroll:false,
});

一定要注意闭合的括号和语句之间的逗号，新手可能会因为不小心，没有严格的按照这个规则写导致插件无法运行。好，下面我们介绍详细的参数。

set_width:false：设置你内容的宽度值可以是像素或者百分比
set_height:false：设置你内容的高度值可以是像素或者百分比
horizontalScroll:Boolean：是否创建一个水平滚动条默认是垂直滚动条值可为:true(创建水平滚动条) 或 false
scrollInertia:Integer：滚动的惯性值在毫秒中使用0可以无滚动惯性 (滚动惯性可以使区块滚动更加平滑)
scrollEasing:String：滚动动作类型查看 jquery UI easing 可以看到所有的类型
mouseWheel:String/Boolean：鼠标滚动的支持值为:true.false,像素默认的情况下鼠标滚动设置成像素值填写false取消鼠标滚动功能
mouseWheelPixels:Integer：鼠标滚动中滚动的像素数目值为以像素为单位的数值
autoDraggerLength:Boolean：根据内容区域自动调整滚动条拖块的长度值:true,false
scrollButtons:{ enable:Boolean }：是否添加滚动条两端按钮支持值:true,false
scrollButtons:{ scrollType:String }：滚动按钮滚动类型值:”continuous”(当你点击滚动控制按钮时断断续续滚动) “pixels”(根据每次点击的像素数来滚动) 点击这里可以看到形象的例子
scrollButtons:{ scrollSpeed:Integer }：设置点击滚动按钮时候的滚动速度(默认 20) 设置一个更高的数值可以更快的滚动
scrollButtons:{ scrollAmount:Integer }：设置点击滚动按钮时候每次滚动的数值像素单位默认 40像素
advanced:{ updateOnBrowserResize:Boolean }：根据百分比为自适应布局调整浏览器上滚动条的大小值:true,false 设置 false 如果你的内容块已经被固定大小
advanced:{ updateOnContentResize:Boolean }：自动根据动态变换的内容调整滚动条的大小值:true,false 设置成 true 将会不断的检查内容的长度并且据此改变滚动条大小建议除非必要不要设置成 true 如果页面中有很多滚动条的时候它有可能会产生额外的移出你可以使用 update 方法来替代这个功能
advanced:{ autoExpandHorizontalScroll:Boolean }：自动扩大水平滚动条的长度值:true,false 设置 true 你可以根据内容的动态变化自动调整大小可以看Demo
advanced:{ autoScrollOnFocus:Boolean }：是否自动滚动到聚焦中的对象例如表单使用类似TAB键那样跳转焦点值:true false
callbacks:{ onScrollStart:function(){} }：使用自定义的回调函数在滚动时间开始的时候执行具体请看Demo
callbacks:{ onScroll:function(){} }：自定义回调函数在滚动中执行 Demo 同上
callbacks:{ onTotalScroll:function(){} }：当滚动到底部的时候调用这个自定义回调函数 Demo 同上
callbacks:{ onTotalScrollBack:function(){} }：当滚动到顶部的时候调用这个自定义回调函数 Demo 同上
callbacks:{ onTotalScrollOffset:Integer }：设置到达顶部或者底部的偏移量像素单位
callbacks:{ whileScrolling:function(){} }：当用户正在滚动的时候执行这个自定义回调函数
callbacks:{ whileScrollingInterval:Integer }：设置调用 whileScrolling 回调函数的时间间隔毫秒单位

下面是所有参数的列表和它们的默认值

$(".content").mCustomScrollbar({
	set_width:false,
	set_height:false,
	horizontalScroll:false,
	scrollInertia:550,
	scrollEasing:"easeOutCirc",
	mouseWheel:"auto",
	autoDraggerLength:true,
	scrollButtons:{
		enable:false,
		scrollType:"continuous",
		scrollSpeed:20,
		scrollAmount:40
	},
	advanced:{
		updateOnBrowserResize:true,
		updateOnContentResize:false,
		autoExpandHorizontalScroll:false,
		autoScrollOnFocus:true
	},
	callbacks:{
		onScrollStart:function(){},
		onScroll:function(){},
		onTotalScroll:function(){},
		onTotalScrollBack:function(){},
		onTotalScrollOffset:0,
		whileScrolling:false,
		whileScrollingInterval:30
	}
});

mCustomScrollbar 的使用方法

update

用法：$(selector).mCustomScrollbar(“update”);

调用 mCustomScrollbar 函数的 update 方法去实时更新滚动条当内容发生变化（例如通过 Javascript 增加或者移除一个对象、通过 ajax 插入一段新内容、隐藏或者显示一个新内容等）

下面是例子：

$(".content .mCSB_container").append("<p>New content here...</p>");
$(".content").mCustomScrollbar("update");

$(".content .myImagesContainer").append("<img src='myNewImage.jpg' />");
$(".content .myImagesContainer img").load(function(){
	$(".content").mCustomScrollbar("update");
});

$("#content-1").animate({height:800},"slow",function(){
  $(this).mCustomScrollbar("update");
});

当新内容完全加载或者动画完成之后，update 方法一直被调用。

scrollTo

用法：$(selector).mCustomScrollbar(“scrollTo”,position);

你可以使用这个方法自动的滚动到你想要滚动到的位置。这个位置可以使用字符串（例如 “#element-id”，“bottom” 等）描述或者是一个数值（像素单位）。下面的例子将会滚动到最下面的对象

$(".content").mCustomScrollbar("scrollTo","last");

scrollTo 方法的参数

$(selector).mCustomScrollbar(“scrollTo”,String);：滚动到某个对象的位置，字符串型的值可以是 id 或者 class 的名字
$(selector).mCustomScrollbar(“scrollTo”,”top”);：滚动到顶部（垂直滚动条）
$(selector).mCustomScrollbar(“scrollTo”,”bottom”);：滚动到底部（垂直滚动条）
$(selector).mCustomScrollbar(“scrollTo”,”left”);：滚动到最左边（水平滚动条）
$(selector).mCustomScrollbar(“scrollTo”,”right”);：滚动到最右边（水平滚动条
$(selector).mCustomScrollbar(“scrollTo”,”first”);：滚动到内容区域中的第一个对象位置
$(selector).mCustomScrollbar(“scrollTo”,”last”);：滚动到内容区域中的最后一个对象位置
$(selector).mCustomScrollbar(“scrollTo”,Integer);：滚动到某个位置（像素单位）

scrollTo 方法还有两个额外的选项参数

moveDragger: Boolean：滚动滚动条的滑块到某个位置像素单位，值：true，flase。例如：$(selector).mCustomScrollbar(“scrollTo”,200,{ moveDragger:true });
callback：Boolean：执行回调函数当 scroll-to 完成之后，值：true，false 例如：$(selector).mCustomScrollbar(“scrollTo”,200,{ callback:true });

disable

用法：$(selector).mCustomScrollbar(“disable”);

调用 disable 方法去使滚动条不可用。如果想使其重新可用，调用 update方法。disable 方法使用一个可选参数（默认 false）你可以设置 true 如果你想重新让内容区域滚动当 scrollbar 不可用时。例如：

$(".content").mCustomScrollbar("disable",true);

可以看一些使用 disable 的例子

destroy

用法：$(selector).mCustomScrollbar(“destroy”);

调用 destroy 方法可以移除某个对象的自定义滚动条并且恢复默认样式

可以看一些使用 destroy 的例子

mCustomScrollbar的原理

通过潜行者m对这些插件的使用，对这些插件的实现原理也做了一些分析。原理就是这样的：

首先获取要修改滚动条样式的内容区块，然后使用 CSS 隐藏掉默认滚动条，然后使用 Javascript 添加很多 HTML 结构，再配合 CSS 做出一个滚动条的效果。然后再使用 CSS 定义滚动条的样式，使用 Javascript 相应鼠标的滚动事件，产生滚动下滑的效果。

明白了这点，下面我们就可以看一下滚动条的结构，然后使用 CSS 对其进行定义了。

转载于:https://my.oschina.net/bibo/blog/712355

weixin_34377065

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
聊天窗口,新加的内容直接往上顶

为什么80%的码农都做不了架构师？>>> ...
复制链接

扫一扫

聊天窗口,新加的内容直接 往上顶

mCustomScrollbar 的参数介绍

mCustomScrollbar 的使用方法

mCustomScrollbar的原理

聊天窗口,新加的内容直接往上顶