MessageBox 弹框，存在滚动条时会引发布局抖动

项目有个需求是点击按钮，出现弹框让用户输入操作原因，发现由于存在滚动条的原因弹框出现时页面会发生抖动，实在是不太美观

尝试了以下几种方法：

  1. 查阅element文档发现MessageBox发现有个lockScroll配置，设置lockScroll，将其设置为false。


    lockScroll.png
frozen.png

自以为可以了，结果是年轻了，此方法对我来说未起作用😮💨

  1. 设置padding
    检查发现出现弹框时body的padding-right为13px，就想着一直保持padding-right为0
body {
  padding-right: 0px !important;
}

恩...怎么说呢还是不行

  1. 设置html以及body样式
html {
  width:100vw;
  overflow-x:hidden;
}
body {
  padding-right: 0px !important;
}

okk，拿捏了！测试多次暂未发现抖动现象。
写这篇文章时也查阅了网上提供的一些解决方法，发现前两种有的小伙伴使用了可以解决他的问题，所以各位可以都试下，根据实际情况来定。如果有小伙伴有新的解决方案也可以讲下哦

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容