聊天窗口,新加的內容直接往上頂

時間 2019-11-25

標籤聊天窗口內容直接往上简体版

原文原文鏈接

最新在寫聊天需求，遇到了個問題，就是當有新消息時，若是把老的消息頂上去。也就是把SCROLL一直在底部javascript

粘出簡單的DEMO測試代碼css

用了JS的mCustomScrollbar插件html

<!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>

下面是相關的文檔：java

mCustomScrollbar 的參數介紹

mCustomScrollbar 這個插件的功能巨大，因此參數也不少，參數值固然更多。在介紹參數的時候，我想先爲新手介紹兩種參數值的寫法，分別是直接的和合並的。jquery

咱們平時接觸的插件用的參數，都是直接跟着參數寫上參數值，這個比較直觀簡單。在這個插件中，參數值太多，因此把一些參數合併起來寫。例以下面要介紹到的 scrollButtons 這個參數，它又有四個子屬性：enable、scrollType、scrollSpeed、scrollAmount，這四個屬性也分別有本身的值，來實現相應的功能。若是再加上其餘的參數，那麼咱們應該這樣寫：ajax

$("#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 回調函數的時間間隔毫秒單位

下面是全部參數的列表和它們的默認值app

$(".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 對其進行定義了。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

聊天窗口,新加的內容直接 往上頂

mCustomScrollbar 的參數介紹

mCustomScrollbar 的使用方法

mCustomScrollbar的原理

聊天窗口,新加的內容直接往上頂