前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >办法总比困难过系列

办法总比困难过系列

作者头像
名字是乱打的
发布2021-12-22 15:46:05
2690
发布2021-12-22 15:46:05
举报
文章被收录于专栏:软件工程软件工程

前端委实很麻烦啊...聊天界面的滚动栏,不靠谱的选择引入的一个小众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的一个即时在线聊天已经写完了,但是现在还有点丑,过两天美化好给大家看看

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020/3/6 下午,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档