viewerjs 打开时页面抖动

问题描述

viewerjs 在图片预览弹框打开和关闭时页面会抖动一下，这是什么原因呢，该如何修复？

原因

在说明原因之前，先说明我使用的版本为 1.11.6，已经是相当新的版本。

viewerjs 在图片预览弹框打开和关闭时页面之所以会抖动是因为 open 时会给 body 加一个 padding-right，这个 padding-right 正好是滚动条的宽度，至于为什么作者会给 body 元素加一个 padding-right 无从知晓。导致页面抖动的相关代码如下：

open: function open() {
  var body = this.body;
  addClass(body, CLASS_OPEN);
  if (this.scrollbarWidth > 0) {
    body.style.paddingRight = "".concat(this.scrollbarWidth + (parseFloat(this.initialBodyComputedPaddingRight) || 0), "px");
  }
},
close: function close() {
  var body = this.body;
  removeClass(body, CLASS_OPEN);
  if (this.scrollbarWidth > 0) {
    body.style.paddingRight = this.initialBodyPaddingRight;
  }
}

修复方法

这个抖动问题由来已久，早在 2018，就有人提出 issue。在评论区有人提出了解决方案。由于是 open 方法增加了 padding-right，close 方法恢复 padding-right，因此只需要把这两个方法覆盖即可。

let viewer = new Viewer(document.querySelector("#image"), {} });
//here
viewer.close = function(){}
viewer.open = function(){}