前端委实很麻烦啊...聊天界面的滚动栏,不靠谱的选择引入的一个小众ZUI.js和css,结果里面的各种参数太繁琐,注释也没有....
问题:我每次发送完消息没有自动滚动滚动栏到最下面,只能手动拖拽...
用了很多方法..包括对scrollTop啥玩意的赋值...结果都没有用
最后自己慢慢调试,发现对style的top赋值有作用!!!
但是呢,一堆命名我看不懂,而且没有注释,截取了一段大家看看
代码语言:javascript复制 var iTop = parseInt(jqChild.css("top"));
var iTop = iTop opts.iWheelStep*iWheelDelta;
iTop = iTop > 0 ? 0 : iTop;
iTop = iTop < iMinTop ? iMinTop : iTop;
jqChild.css("top",iTop);
fnScrollContent(jqThis,jqChild,jqScrollBox,jqScrollBar,0,opts.iTop);
}
//记录添加事件
jqThis.data($.zUI.panel.sEventName,oEvent);
//跟随滚动函数
function fnScrollContent(jqWrapper,jqContent,jqFollowWrapper,jqFlollowContent,iOffset1,iOffset2){
var opts = jqThis.data($.zUI.panel.sOptsName);
var rate = (parseInt(jqContent.css("top"))-iOffset1)/(jqContent.outerHeight()-jqWrapper.innerHeight())//卷起的比率
var iTop = (jqFlollowContent.outerHeight()-jqFollowWrapper.innerHeight())*rate iOffset2;
jqFlollowContent.css("top",iTop);
}
//刷新滚动条
function fnFreshScroll(){
var opts = jqThis.data($.zUI.panel.sOptsName);
var iScrollBoxHeight = jqThis.innerHeight()-2*opts.iTop;
var iRate = jqThis.innerHeight()/jqChild.outerHeight();
var iScrollBarHeight = iScrollBarHeight = Math.round(iRate*iScrollBoxHeight);
//如果比率大于等于1,不需要滚动条,自然也不需要添加拖拽事件
if(iRate >= 1){
jqScrollBox.css("height",0);
jqScrollBar.css("height",0);
return;
}
jqScrollBox.css("height",iScrollBoxHeight);
jqScrollBar.css("height",iScrollBarHeight);
//计算拖拽边界,添加拖拽事件
var oBoundary = {iMinTop:opts.iTop};
oBoundary.iMaxTop = iScrollBoxHeight - Math.round(iRate*iScrollBoxHeight) opts.iTop;
oBoundary.iMinLeft = jqThis.innerWidth() - opts.iWidth - opts.iRight;
oBoundary.iMaxLeft = oBoundary.iMinLeft;
fnScrollContent(jqThis,jqChild,jqScrollBox,jqScrollBar,0,opts.iTop);
jqScrollBar.draggable({oBoundary:oBoundary});
最后打开F12自己设置断点,一点点的记录js里各个参数的值,记录在本子上,找出规律......
websocket netty的一个即时在线聊天已经写完了,但是现在还有点丑,过两天美化好给大家看看