解决滚动条消失和水平居中跳动变化的问题_滚动条显示与隐藏会引起内容的宽度变化

在设计web网页的时候，若是要设置网页不可滚动一般用的方法都是
js:document.body.style.overflow = "hidden";和document.body.style.overflow = "hidden";
或者
Jquery:$("body").css("overflow","hidden");和$("body").css("overflow","auto");
将滚动条隐藏以达到目。

然而这样做会有一个问题，就是网页整体的宽度会随之改变，就我的Google浏览器的滚动条宽度来说是17px，通常在设置网页整体样式的水平宽度时候都是用百分比控制的，在滚动条消失的时候整体的宽度会变大从而使用百分比控制的水平宽度变大，这时候网页会出现跳动，这种跳动让人看着很不舒服。

解决这个问题的思路很简单，只要设置网页的body和右边的边距就好了。

我是使用vue2.0去实现的。Vue2.0有个重要的属性叫做数据绑定，即我在方法外定义的参数在方法内可以直接引用，在方法内改变该参数的值作用会作用于全局，所以我的方法不会有任何传参传参和返回任何值的操作，但是整体的思路是一样的。

首先我得先说明一下，以下这段代码不是我写的，是我百度后从http://www.haorooms.com/post/js_scroll_width拷走同时小小修改了一下的代码。这段代码的作用是获取滚动条的宽度。为了适应不同的浏览器不同的情况下的滚动条的宽度可能不是17px的情况。

      getScrollbarWidth() {
        var oP = document.createElement('p'),
            styles = {
                width: '100px',
                height: '100px',
                overflowY: 'scroll'
            }, i;
        for (i in styles) oP.style[i] = styles[i];
        document.body.appendChild(oP);
        this.scrollbarWidth = oP.offsetWidth - oP.clientWidth;
        oP.remove();
      },

当我们获取宽度的时候，只需要在你要隐藏滚动条的时候同时调用$("body").css("padding-right",this.scrollbarWidth);这句话便可在滚动条隐藏网页水平宽度增加的时候，使得整个网页的往左移动滚动条的宽度从而使网页保持在原来的位置(就是不会出现网页略微右移动的效果)。

当然，假设你是要做一个弹框。那么你使用left:50%来设置居中，50%针对的是整个网页的宽度，你会发现将这个框框向左移动貌似没有效果。解决思路我想了很久。最后用一个比较麻烦的方法去解决了：只要将百分比换成定死的长度就OK ，但是这样会降低网页在各种情况下的适应性。所以我用动态改变的长度去替代百分比从而解决了这个问题。
公司项目改需求了，等完成项目后再继续更新T T。。。

直接粘上代码吧

      //动态设置弹出框所在位置并隐藏滚动条(适应任何宽度)
      setDialog(){
        this.getScrollbarWidth();
        var s = (window.outerWidth - this.scrollbarWidth)/2;
        $(".succ-pop").css("left",s);
        $("body").css("overflow","hidden");
        $("body").css("padding-right",this.scrollbarWidth);
      }

这个思想是计算水平宽度的一半然后再用jquery方法设置css样式

        //这几句话才是核心，调用的getScrollbarWidth()方法在上面，目的是获取滚动条的宽度
        this.getScrollbarWidth();
        var s = (window.outerWidth - this.scrollbarWidth)/2;
        $(".succ-pop").css("left",s);