记一次临时改变样式禁用滚动条引发的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实现的这种
第二个方案
因为如果是第一个方案的话
一个组件还好
如果这个项目里
有多个这样的全局组件
大家都这样写就容易乱
最后更新于
这有帮助吗?