弹出框 custombox.min.js 使用时候由于滚动条隐藏造成网页抖动变形的解决办法

custombox.min.js版本v3.0.2

使用custombox.min.js结合bootstrap实现的弹出框，每次弹出隐藏滚动条时候，网页内容总是会移动，感觉不好

 

打开custombox.min.js文件，定位到下边代码

a.classList.add("custombox-scrollbar"),document.body.appendChild(a);

这里的custombox-scrollbar是隐藏滚动条时候，替代填入的一个div,官方设置的宽度是50，感觉很大，在custombox.min.css中找到

.custombox-scrollbar{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll} 

修改为

.custombox-scrollbar{position:absolute;top:-9999px;width:17px;height:50px;overflow:scroll}

这样刚好是滚动条宽度，就不抖动了，可是万一没有滚动条时候，这个div的17宽度还是会填入，抖动又出现，这是继续修改custombox.min.js文件

定位到a.classList.add("custombox-scrollbar"),document.body.appendChild(a);

这里只需要判断下页面是否有滚动条，如果有滚动条就add("custombox-scrollbar"),没有的话就不增加

把a.classList.add("custombox-scrollbar"),document.body.appendChild(a);修改为

if ($.isHasScroll()) a.classList.add("custombox-scrollbar");document.body.appendChild(a);   
注意

这里的 if ($.isHasScroll())   是自己写的一个函数，如果有滚动条返回true,没有滚动条返回false,

还有,document.body.appendChild(a);   前边原来是逗号,  现在改为分号; 就是不管有没有滚动条，这里 document.body.appendChild(a); 都需要执行下，否则弹框不出来

下边是$.isHasScroll() 函数

//判断页面是否有滚动条
    $.isHasScroll = function () {
        return (document.documentElement.clientHeight < document.documentElement.offsetHeight - 4);
    }

——————————————————————————————————————————————————

以上方法只是解决了部分网页抖动，如果发现网页还有其他部分抖动，也可以在custombox.min.js中找到添加网页滚动条和关闭弹出框时候去掉滚动条的地方，找到了这两个地方，增加两个自己的函数

自己的函数就是设置站位div的地方，这个站位div或者li，平时时候隐藏，只有变形时候呈现，这样保持网页不变形

custombox.min.js中 添加滚动条在这里

document.body.appendChild(a);

改成document.body.appendChild(a);$.topbarliShow(); //$.topbarliShow() 这个函数可以把我自己定义的站空位的div或者li呈现

custombox.min.js中 隐藏滚动条在这里

remove:function(a){....} 这时候一个函数，里边的...是关闭弹框和隐藏滚动条，变成如下内容

remove:function(a){....$.topbarliHidden();} //这里$.topbarliHidden();是我自定义的一个函数，隐藏我的占位div或者li 就是在他们的这个remove函数执行完毕，最后在加上自定义的函数

这样在弹框时候，网页内容就不抖动了