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，拿捏了！測試多次暫未發現抖動現象。
寫這篇文章時也查閱了網上提供的一些解決方法，發現前兩種有的小伙伴使用了可以解決他的問題，所以各位可以都試下，根據實際情況來定。如果有小伙伴有新的解決方案也可以講下哦

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容