提示框 toastr.min.js 使用时候由于滚动条隐藏造成弹出框位置移动的解决办法

toastr.min.js使用很美观，不过有滚动条的页面，如果提示框用了自己设置的样式，比如让他居中left:50%，这样设置后，

 

比如我添加新记录，恰好我用了bootstrap的弹出框，这个弹出来不同于toastr,他会弹一个遮罩层，同时会隐藏右侧的滚动条，添加新记录完毕，这个滚动条又会重新出现

这样造成toastr在弹出时候没有考虑滚动条宽度，当添加新记录的弹出框关闭后，toastr还在呈现，而且还会向左移动一点，这是滚动条重新呈现造成的，

解决这个问题有一个简单不完善的办法

/* 提示框 toastr.css */
.toast-center-center {
  top: 37px;
  left: 780px;
  margin-top: -25px;
  margin-left: -150px;
}

上边创建css ，直接把左侧边距固定成780像素， 然后在js中写出如下行，把这个自定义的css类给toastr

toastr.options.positionClass = 'toast-center-center“”

不完美的地方上，在没有滚动条时候，还是固定左侧的，不能根据屏幕大小居中

 

还有一个更进步的办法

设置两个css类

/* 没有滚动条时候用，根据屏幕居中*/
.toast-center-center {
  top: 37px;
  left: 50%;
  margin-top: -25px;
  margin-left: -150px;
}
/* 有滚动条时候用*/
.toast-center-fix {
  top: 37px;
  left: 780px;
  margin-top: -25px;
  margin-left: -150px;
}

 

然后增加一个js函数

/* 提示框 toastr.min.js */
    $.toastrGetClass = function () {
        if ($.isHasScroll()) //如果有滚动条就用固定的左侧宽度
        {//有滚动条就固定左侧宽度
            return "toast-center-fix";
            
        } else {//没有滚动条就居中
            return "toast-center-center";
        }
    }

 

把这个函数应用到toastr.min.js 中，在toastr.min.js中定位到

.addClass(t.positionClass)

这里的t.positionClass就是增加css的类，把他换成

.addClass($.toastrGetClass()) //自定义函数，根据屏幕滚动条自动返回类

虽然还不完美，不过可以暂时用用