ext

最新推荐文章于 2024-09-23 17:12:42 发布

xiongjiuliang

最新推荐文章于 2024-09-23 17:12:42 发布

阅读量1k

点赞数

文章标签： function scroll div 咨询 border html

本文链接：https://blog.csdn.net/xiongjiuliang/article/details/6281882

版权

/初始化滚动栏
        var InitScrollBar = function (conf) {
            this.Container = Ext.get(conf.container);
            this.MaxScroll = conf.height ? 200 : conf.height;
            this.ScrollBox = Ext.get(conf.txtContainer);
            this.ScrollContent = Ext.get(conf.txtContent);
            this.ScrollTrack = conf.scrollBar ? conf.scrollBar : null;

            var ObjScroll = this;

            if(this.ScrollTrack) {
                this.ScrollBox.parent().createChild({
                    tag: "div",
                    id: "scrollbar",
                    cls: "slidebar",
                    html: "<div id=/"handle/" class=/"handle/"></div>"
                });
                this.ScrollTrack = Ext.get("scrollbar");
                this.ScrollHandle = Ext.get("handle");
                this.ScrollBox.setStyle("width", this.Container.getWidth() - this.ScrollTrack.getWidth() - 2 + "px");
            }

            //对象不存在
            if (!(this.ScrollBox && this.ScrollContent)) {
                return;
            }

            //是否内容超过指定高度
            this.ScrollAmount = this.ScrollContent.getHeight() / this.MaxScroll;

            if (this.ScrollAmount > 1) {
                if(this.ScrollTrack) {
                    this.ScrollHandle.on("mousedown", function(e) {
                        //拖动滚轴
                        dragScroll(e);
                    });
                    this.ScrollTrack.setStyle("height", this.MaxScroll + "px");
                    //设置滑块的默认位置
                    this.ScrollHandle.setStyle("margin-top", "0px");
                    //设置滑块的高度
                    this.ScrollHandle.setStyle("height", Math.floor(this.MaxScroll / this.ScrollAmount) + "px");
                }

                this.ScrollContent.on("mousewheel", function(e) {
                    //鼠标滚轴事件
                    wheelScroll(e);
                });

                //创建底部滑动块
                if(!this.BottomScroll) {
                    this.ScrollBox.parent().createChild({
                        tag: "div",
                        id: "bottombar",
                        cls: "bottombar",
                        html: "more"
                    });
                    this.BottomScroll = Ext.get("bottombar");
                    this.BottomScroll.setStyle("bottom", "0px");
                    this.BottomScroll.on("click", function() {
                        contentScroll(10);
                    });
                }

                this.ScrollBox.setStyle("height", (this.MaxScroll - 2) + "px");
                this.MaxLength = this.MaxScroll - Math.floor(this.MaxScroll / this.ScrollAmount);
                this.ScrollBox.parent().setHeight(this.ScrollBox.getHeight() + Ext.get("bottombar").getHeight());
            }
            else {
                this.ScrollTrack.hide();
            }

            //鼠标滚轮事件
            function wheelScroll(event) {
                //1表示向上滚动，-1表示向下滚动
                var wAmount = event.getWheelDelta() * 120;
                contentScroll(- wAmount / 12);
            }

            //内容滚动
            function contentScroll(num) {
                ObjScroll.ScrollBox.dom.scrollTop += num;

                if(ObjScroll.ScrollTrack) {
                    if (ObjScroll.ScrollBox.dom.scrollTop == 0) {
                        ObjScroll.ScrollHandle.setStyle("margin-top", "0px");
                    }
                    else if (ObjScroll.ScrollBox.dom.scrollTop == ObjScroll.ScrollContent.getHeight() - ObjScroll.MaxScroll) {
                        ObjScroll.ScrollHandle.setStyle("margin-top", ObjScroll.MaxLength + "px");
                    }
                    else {
                        var h = parseInt(parseInt(ObjScroll.ScrollHandle.getStyle("margin-top")) + Math.floor(num / ObjScroll.ScrollAmount)) + "px";
                        ObjScroll.ScrollHandle.setStyle("margin-top", h);
                    }
                    if (parseInt(ObjScroll.ScrollHandle.getStyle("margin-top")) > ObjScroll.MaxLength) {
                        ObjScroll.ScrollHandle.setStyle("margin-top", ObjScroll.MaxLength + "px");
                    }
                }

            }

            //拖动滚轴事件
            function dragScroll(event) {
                var clientPosition = event.getXY();
                var clientX = clientPosition[0];
                var clientY = clientPosition[1];
                var deltaY = clientY - parseInt(ObjScroll.ScrollHandle.getStyle("margin-top"));
                Ext.getDoc().on("mousemove", moveHandler);
                Ext.getDoc().on("mouseup", upHandler);
                Ext.getDoc().on("mouseout", outHandler);

                if (Ext.getDoc()) ObjScroll.ScrollHandle.dom.setCapture();

                //鼠标拖动事件
                function moveHandler(e) {
                    var moveY = e.getXY()[1];
                    ObjScroll.ScrollHandle.setStyle("margin-top", (moveY - deltaY) + "px");
                    if ((moveY - deltaY) < 0) {
                        ObjScroll.ScrollHandle.setStyle("margin-top", 0 + "px");
                    }
                    else if ((moveY - deltaY) > ObjScroll.MaxLength) {
                        ObjScroll.ScrollHandle.setStyle("margin-top", ObjScroll.MaxLength + "px");
                    }
                    else {
                        ObjScroll.ScrollBox.dom.scrollTop = Math.floor((moveY - deltaY) * ObjScroll.ScrollAmount);
                    }
                }
                //鼠标释放
                function upHandler(e) {
                    Ext.getDoc().un("mousemove", moveHandler);
                    Ext.getDoc().un("mouseup", this);
                    Ext.getDoc().un("mouseout", outHandler);
                    if (Ext.getDoc()) {
                        ObjScroll.ScrollHandle.dom.releaseCapture()
                    };
                }
                //鼠标移开
                function outHandler(e) {
                    Ext.getDoc().un("mousemove", moveHandler);
                    Ext.getDoc().un("mouseup", upHandler);
                    Ext.getDoc().un("mouseout", this);
                    if (Ext.getDoc()) {
                        ObjScroll.ScrollHandle.dom.releaseCapture()
                    };
                }
            }
        };

        Ext.onReady(function() {
             InitScrollBar({
                height:         200,
                container:      "container",
                txtContainer:   "scroll",
                txtContent:     "content",
                scrollBar:      false
             });
        });

需要用到的样式：

涉及的HTML如下：

<div id="container">
    <div class="scrollbox" id="scroll">
        <div id="content">
            本报讯（记者周方通讯员陈伟秋、李国祥）为正确处理电力设施建设与城市环境的关系，科学分析电磁辐射对人体健康的影响，实现科学决策，市政府昨日召开了“电力设施建设与城市环境专家咨询会议”，邀请了全国各地环保、医学、经济、城建与城市规划等领域的20位著名专家，就电力设施建设与城市环境保护问题进行咨询。副市长甘新和市有关部门负责人参加了会议。
            <br />
            广州现在的电网结构已远远不能满足电力供应需求，面临的严重缺电局面已影响到城市发展和市民日常生活。但是，在电力建设过程中，遇到了很多困难和来自社会的压力。虽然市民普遍对电力建设表示支持，但一涉及到具体项目，仍有一些市民对电力基础设施建设是否影响身体健康心存疑虑。
            <br />
            对我市电力设施建设与城市环境的问题，市委、市政府高度重视，按照市长张广宁的要求，市政府从广大市民的根本利益出发，邀请来自全国各地的专家进行决策咨询，结合我市经济、社会、环境发展现状和趋势，对电力建设、城市规划和城市环境问题进行深入的探讨和研究，一方面为政府决策提供技术支持，另一方面也是从科学的角度解决市民的疑惑。
            <br />
            参加此次咨询会的20位专家都是国内在环保、医学、经济、城市建设和规划方面的资深专家，很多是学科研究的带头人，在国内外享有非常高的学术声誉。包括国家环保总局科技顾问委员会委员、国家环境保护总局核安全中心研究员、原国家环境保护总局核环境与辐射环境管理司司长赵亚民等7
            位环保方面的专家；中山大学城市与区域研究中心教授、博士生导师魏清泉等3位经济方面的专家；华东电力试验研究院研究员杨新村等7位电力方面的专家；广东省城乡规划设计院总工程师马向明等3位规划方面的专家。
            <br />
            会议期间，专家们详细了解我市经济、规划和电力建设等方面的情况，对我市的电力设施建设与城市环境等问题进行深入细致的分析，就电网建设对保障经济持续发展及促进居民生活水平提高的重要性和影响关系、城市中心区建设变电站的必要性、如何从城市规划各个层次保障电力设施建设、变电站和高压线产生的工频电场、工频磁场是否对人体健康造成危害等政府和市民关注的问题进行了探讨，为推动我市电力设施建设、保持社会稳定、建设和谐社会提供了科学、权威的意见和建议。
            <br />
            市政府将本着以人为本、执政为民的科学态度，高度重视专家们的宝贵建议和意见，并作为我市落实科学发展观，指导经济社会发展科学决策的权威依据。
        </div>
    </div>
</div>