办法总比困难过系列

前端委实很麻烦啊...聊天界面的滚动栏,不靠谱的选择引入的一个小众ZUI.js和css,结果里面的各种参数太繁琐,注释也没有....

---

问题:我每次发送完消息没有自动滚动滚动栏到最下面,只能手动拖拽...

用了很多方法..包括对scrollTop啥玩意的赋值...结果都没有用
最后自己慢慢调试,发现对style的top赋值有作用!!!

但是呢,一堆命名我看不懂,而且没有注释,截取了一段大家看看

    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的一个即时在线聊天已经写完了,但是现在还有点丑,过两天美化好给大家看看