首页 前端知识 解决窗口滚动条消失而导致的页面内容抖动的问题

解决窗口滚动条消失而导致的页面内容抖动的问题

2024-08-20 09:08:57 前端知识 前端哥 151 720 我要收藏

前言

今天在项目中遇到了这样一个问题,点击按钮出现遮罩层和弹窗,不过弹窗出现后还是可以滚动底部的页面,于是写了一段js使弹窗出来后使底部页面增添overflow: hidden的样式解决了这个问题,但是还有一个细节问题就是页面的滚动条也占据宽度,滚动条消失后会有一个抖动的效果,给人体验很不好

正文

尝试了几个办法,以下是个人认为比较好的解决办法:

首先获取窗口文档显示区的宽度和DOM文档的根节点html元素对象的宽度,前者减去后者计算出滚动条的宽度

// 滚动条宽度
let scrollWidth = window.innerWidth - document.documentElement.offsetWidth;

弹窗打开时,滚动条消失先给body元素设置overflow:hidden防止底部页面滚动,然后再给底部页面右侧的padding 设置scrollWidth的值来模拟滚动条存在时底部页面内容的位置

document.body.style.overflow = 'hidden';
this.$refs.index.style.paddingRight = scrollWidth + 'px';

弹窗关闭时,body元素设置overflow:auto,因为弹窗关闭时弹窗又恢复了,重新获取 scrollWidth 的值设置padding为0,这样底部页面的内容就不会在抖动啦,以下为完整代码(不是一个组件的方法,主要逻辑就是上面的代码)

show() {
      this.isShow = !this.isShow;
      // 滚动条宽度
      let scrollWidth = window.innerWidth - document.documentElement.offsetWidth;
      document.body.style.overflow = 'hidden';
      this.$refs.index.style.paddingRight = scrollWidth + 'px';
}
close() {
      this.isShow = false;
      this.$parent.show();
      document.body.style.overflow = 'auto';
}

结语

以上就是问题的解决方法,实际上并没有多难的东西,这是我第一次写博客(感觉心里想的东西能写明白还挺费劲的)写了半天哈哈哈,希望能为你们解决一点问题,有更好的方法欢迎各位大佬指点。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/16272.html
标签
评论
发布的文章

在线OJ项目

2024-08-27 21:08:43

JSON2YOLO 项目教程

2024-08-27 21:08:42

Redis 实现哨兵模式

2024-08-27 21:08:22

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!