JavaScript踩坑记录（一）

1、隐藏滚动条使滚动条不显示并不占据空间参考博文

在css中添加以下样式

::-webkit-scrollbar {
  display: none;
}

2、easyui布局自适应

只要在加上 easyui-layout data-options="fit:true"即可实现其区域的布局自适应

3、设置拖拽改变物体的宽高

原本是为了解决菜单收缩问题

方案一：添加第三个元素，通过移动第三个元素来改变菜单和内容布局

其中，可以用添加监听或者直接鼠标事件，但是会卡顿，而且拖动过程中当拖动过快超出第三元素范围则会是onmouseup事件失效导致拖拽出错

$('body').on('mousedown','#striyline',function(e){
            console.log( $("#striyline").offsetLeft);

            var startX = e.clientX;
            $(this).left = $(this).offsetLeft;
            var resize=$("#striyline");
            var box = $('.layui-layout-admin');
            var left =$('.layuimini-menu-left')[0];
            console.log($('.layuimini-menu-left')[0]);
            var right = $('.layui-body')[0];
            console.log(startX);
            document.onmousemove = function(e){
                var endX = e.clientX;
                console.log("start:"+startX+" end:"+endX+" resizeleft:"+resize.left);

                var moveLen = resize.left + (endX - startX);
                var maxT = box.clientWidth - resize.offsetWidth;
                if(moveLen<59) moveLen = 59;
                if(moveLen>maxT-500) moveLen = maxT-500;

                resize.style.left = moveLen;
                left.style.width = moveLen + "px";
                right.style.width = (box.clientWidth - moveLen - 5) + "px";
            }
            document.onmouseup = function(evt){
                evt.stopPropagation()
                document.onmousemove = null;
                document.onmouseup = null;
                resize.releaseCapture && resize.releaseCapture();
            }
            resize.setCapture && resize.setCapture();
            return false;
        });

方案二：也是添加一个元素，不过只改变菜单的大小，另一侧采用自适应，这个会比较流畅，但是鼠标事件问题仍存在（参考）

window.onload = function () {
            // 1. 获取两个大小div
            var oPanel = document.getElementById('leftmenu');
            var oDragIcon = document.getElementById('striryLine');
            var oBody=$(".layui-body")[0];
            var oLogo=document.getElementById('toplogo');
            var openIcon=document.getElementById('openIcon');
            var openIconLeft=openIcon.getBoundingClientRect().left-200;
            var oItem=$('.layui-nav-tree')[0];
            // 定义4个变量
            var disX = 0;//鼠标按下时光标的X值
            var disW = 0; //拖拽前div的宽
            oPanel.onmouseover=function (e) {
                if(e.clientX<=oPanel.offsetWidth && e.clientX>=oPanel.offsetWidth-10){//设置显示可拖动光标的范围
                    $(this).css('cursor','e-resize');

                }else{
                    $(this).css('cursor','default');
                }
            }
            //3. 给小div加点击事件
            oDragIcon.onmousedown = function (ev) {
                var ev = ev || window.event;
                disX = ev.clientX; // 获取鼠标按下时光标x的值
                disW = oPanel.offsetWidth; // 获取拖拽前div的宽
                document.onmousemove = function (ev) {
                    var ev = ev || window.event;
                    //拖拽时为了对宽和高 限制一下范围，定义两个变量
                    var W = ev.clientX - disX + disW;
                    if(W<200){
                        W = 200;
                    }
                    if(W>400){
                        W =400;
                    }
                    oPanel.style.width =W +'px';// 拖拽后物体的宽
                    $('.layui-nav-tree')[0].style.width=W - 10 + 'px';
                    oDragIcon.style.left = W - 10 +'px';
                    oBody.style.left = W +'px';
                    oLogo.style.width =W +'px';
                    openIcon.style.left=openIconLeft+W+'px';
                }
                document.onmouseup = function () {
                    document.onmousemove = null;
                    document.onmouseup = null;
                };
                return false;
                // document.onmouseleave=function () {
                //     document.onmousemove = null;
                //     document.onmouseup = null;
                // }
            }
        }

方案三：采用easyui自带布局，因此需要改变布局，并且对菜单收缩按钮进行重写（因为是layui的菜单收缩按钮）（果然还是现成的最好用）

<div class=" content easyui-layout" data-options="fit:true"  style="width: 100%;height: 100%">
    <div data-options="region:'center'"style="width: 100%;height: 100%">
        <div class="easyui-layout" data-options="fit:true" style="   height: 100%;  width: 100%;">
            <!--左侧菜单+logo-->
            <div id="westMenu" data-options="region:'west',collapsed:false,split:true"  style="width:205px;border:none; background-color: rgb(57, 61, 73); min-width:200px;max-width: 400px;">
                <div class="right_content" >
                    
                </div>
            </div>
 
            <!--右侧内容-->
            <div id="eastPanel" data-options="region:'center'" style="margin-top: 51px;z-index: 1000;">
                <div class="left_content layui-layout" >
                </div>
            </div>
        </div>
    </div>
</div>