记一次临时改变样式禁用滚动条引发的bug

Demo预览:

https://sunzsh.github.io/vue-demos/#/img-viewer

代码 / 文件:

https://github.com/sunzsh/vue-el-demo/tree/master/src/mixins/MyImgViewer

前两天在封装这个组件的时候啊

无意间写了一个比较有意思的BUG

我先给大家描述一下啊

首先我封装出来的第一版是这样的

大家看!预览没问题

但是我放大缩小的时候

后边的内容也跟着滚动

这就不行了

所以呢我就想这也简单啊

我就直接在它放大的时候

把body的这个滚动条禁用掉就好了到

document.body.style.overflow = 'hidden'

然后呢我们在它关闭预览的时候

再给它恢复回来

这个恢复回来就有问题了

我就需要知道之前是什么对吧

所以呢我们需要在这做一个备份

我们需要把它备份起来

但是问题呀也就出现在这个地方了

我就习惯的用了这个

window.getComputedStyle

然后拿到他的overflow

然后做了备份

这个变量名在这我准备好了哈

就是:this._overflowBackup = ...

然后恢复的时候呢

我们用这个

好我们来试一下效果

放大、滚动,大家看没问题对吧

然后关闭就可以滚动了

这都没有问题

但是呢有一种情况我先刷新一下

假如我们这有一个抽屉组架

打开我这抽屉组架在展开的时候

然后他会给body加上一个样式

注意看这个class等于el-popup-parent-hidden 口误纠正:popup

我把它关掉它就没了

把它打开的时候它就有

那这个样式写的是什么呢

大家看,就是overflow等于hidden

所以在我们在抽屉组件里边

预览图片的时候

来看

我在这拿到的这个备份的值是什么其

其实是hidden,因为我用了window.getComputedStyle

所以当我们在

关闭这个预览组件的时候

他会把hidden再放回去

注意我把它关闭

大家看这overflow还是hidden

然后呢我们再关闭这个抽屉

这个时候就有问题了

整个这个页面就没法滚动了

所以啊解决这个问题有两个方案

第一个方案就是我们在备份的时候

就不要用getComputedStyle了

我们直接拿到他的

body点style点overflow就行了

这样的话他就不会受抽屉组件的影响

我们再来试一下

展开抽屉

然后呢

弹开预览,大家看 hidden

然后然后我们关闭预览

大家看overflow就没有了

然后再关闭抽屉

这样就可以了

那第二个方案呢

就是我们学习这个抽屉组件

给他加一个这个样式

我这个样式写好了就叫这个名字

然后呢

我们在这儿

就不要用这种方法

来禁用这个滚动条了

我们直接document.body.classList.add

用这个

然后呢

关闭的时候把这个给弄掉

我们再来试一下

预览

大家看这时候后边就不滚动了

关闭预览就可以了

抽屉组件呢也一样

它会多了两个样式

这两个样式都是为了禁用滚动条的

没关系大家看关闭它还是可以滚动

那这两个方案哪个更好一点呢

我个人比较倾向于class实现的这种

第二个方案

因为如果是第一个方案的话

一个组件还好

如果这个项目里

有多个这样的全局组件

大家都这样写就容易乱

最后更新于