滚动Chatwindow在容器DIV元素中

Question

在我的代码中，我有一个容器<div>，其中<div>元素（聊天窗口）将动态添加。它检查<div>（聊天窗口）元素宽度的总数是否超过容器<div>，如果超过，则会出现上一个和下一个按钮并滚动容器<div>。但我无法弄清楚这个问题。任何帮助将不胜感激。

以下是我的代码：

现在更新了此代码。现在的问题是如何隐藏具有条件的下一个和上一个按钮。

＆＃13;

＆＃13;

var chatBoxes = new Array();
var chatboxtitle= 1;



$(document).ready(function () {
    
    $("#add").click(function(){
        
        $('#container').append($('<div/>')
		  .attr("id","chatbox_"+chatboxtitle)
		  .addClass("chatWin")
          .html("chatbox_"+chatboxtitle)
        );
		
		
		
		chatBoxes.push("chatbox_"+chatboxtitle);
		chatboxtitle++;
	
		chk();
		
    });

})

function chk()
{
	var i=0;
	for (x in chatBoxes) {
		i++;
	}
	
	if ((i*200) > 600) {
		$("#prev").show();
		$("#nxt").show();
	}
	
}




$(document).ready(function()
    {
      $('#prev').click(function()
      {
		
			var newMargin = parseInt($("#container").css("left"))+212;
            $("#container").animate({ left: newMargin }, 50);
		
      });
      


	 $('#nxt').click(function()
      {
		   var newMargin = parseInt($("#container").css("left"))-212;
            $("#container").animate({ left: newMargin }, 50);
      });
   
		

   });
   
   
   

＆＃13;

#chat{
border-right: 1px solid #bac0cd;
bottom:0px;
left: 15px;
font-family: "Lucida Grande",Verdana,Arial,"Bitstream Vera Sans",sans-serif;
font-size: 11px;
height: 29px;
position: fixed;
text-align: left;
z-index: 1028;
margin-top: 8px;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
width:98%;
}


#main{
  float:right;
  height: 29px;
  width: 636px;
  overflow: hidden;
  white-space: nowrap;
  display: block;
  direction: rtl;
  left:0px;
  position:relative;
}
#container {
  float:right;
  position:relative;
  left:0px;
}
.chatWin, #buddy {

	background:color:#f2f2f4;
	border-right:1px solid transparent;
	border-left:1px solid #bac0cd;
	color:#333;
	cursor:pointer;
	height:29px;
	padding-left:10px;
	padding-top:5px;
	z-index:1026;
	border-top:1px solid rgba(29, 49, 91, .3);
	-webkit-box-shadow:inset 0 1px rgba(255, 255, 255, .5);
	width: 200px;
	font-weight:bold;	
	display: inline-block;
	
}

#nxt{
	float:right;
	background-color:#f2f2f4;
	border-right:1px solid transparent;
	border-left:1px solid #bac0cd;
	color:#333;
	cursor:pointer;
	height:29px;
	position:relative;
	padding-top:5px;
	padding-left:2px;
	padding-right:2px;
	z-index:1026;
	border-top:1px solid rgba(29, 49, 91, .3);
	-webkit-box-shadow:inset 0 1px rgba(255, 255, 255, .5);
	font-weight:bold;	
	display:none;
	border-top-right-radius: 5px;
}
#prev{
	float:right;
	background-color:#f2f2f4;
	border-right:1px solid transparent;
	border-left:1px solid #bac0cd;
	color:#333;
	cursor:pointer;
	height:29px;
	position:relative;
	padding-top:5px;
	padding-left:2px;
	padding-right:2px;
	z-index:1026;
	border-top:1px solid rgba(29, 49, 91, .3);
	-webkit-box-shadow:inset 0 1px rgba(255, 255, 255, .5);
	font-weight:bold;	
	display:none;
	border-top-left-radius: 5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div style="height:900px">
		<div id="add">
			Add New
		</div>
	<div id="info"></div>
		
	</div>
	
	<div id="chat">
		
		<div id="buddy" style="float:right">Online User(0)</div>
		<div id="nxt">►</div>
		<div id="main">    
			<div id="container"></div>
		</div>
		<div id="prev">◄</div>
	
	</div>

＆＃13;

＆＃13;

＆＃13;