如何解决桌面浏览器上由具有不同页面内容高度的页面之间的滚动条切换触发的背景内容抖动问题？

Question

这个问题我出现过两次

使用Bootstrap 3模态框时，弹出模态框时，chrome桌面出现浏览器滚动条，导致背景内容晃动约0.5秒后再次静止。然而，在移动设备中，由于移动浏览器不像 Windows Chrome 那样显示滚动条，因此在这些浏览器中查看的人不会看到此问题。

我发现针对引导模式问题的有效破解方法是应用 css 覆盖，如下所示：

.modal-open {
overflow: hidden;
width: calc(100% - 17px);/* for chrome/safari*/
width: -moz-calc(100% - 16px); /*for firefox*/
/*width: -ms-calc(100% - XXpx)  */
}

---

现在在 jquery-mobile 框架中，当我单击从一个页面到另一个页面的转换时，我也遇到了这个抖动问题，页面转换后背景图像会抖动，因此如果您在 Windows 桌面浏览器中查看它，它看起来相当有问题。

我想知道是否有人修复了当不同页面高度的 jquery-mobile 页面之间触发数据转换时桌面浏览器中也出现 jquery mobile 背景抖动问题的 css。

塞纳里奥示例：

页面A：页面内容较长，因此页面完全加载时有滚动条。

B页：页面内容较短，即使完全加载也不会产生滚动条。

C页：同A页（内容高度有滚动条）；

D页：与B页相同（无滚动条）；

触发器： 使用 juqerymobile 框架链接来触发这些页面之间的 data-transition="***"：

A页->B页或C页->D页，出现晃动问题。

B页->D页，出现晃动的问题，因为大多数转换过程中仍然会产生滚动条，所以在无滚动条页面转换之间你会看到三种状态：
1.无滚动条 2.滚动条可见或滑动 3.无滚动条

A页->C页 ，动画过渡期间滚动条全程存在，无晃动。

Answer 1

下面是我最近发现并测试的解决方案，用于消除桌面浏览器滚动条的显示和隐藏效果引起的晃动效果。
该解决方案看起来非常简单，非常适合我的项目。

修复代码示例

/* for chrome hidding scrollbar  */
::-webkit-scrollbar { 
  width: 0px!important;
}