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

Question

这个问题我遇到过两次，

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

我发现的针对 Bootstrap 模式问题的有效破解方法是像下面这样应用 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 移动背景抖动问题的 css。

senario 示例:

页面A:页面内容较长，所以当页面完全加载时有滚动条。

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

C页:同A页(内容高度有滚动条)；

D页:同B页(无滚动条)；

触发器: 使用 juqerymobile 框架链接到 在这些页面之间触发 data-transition="***":

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

B页->D页，出现抖动问题，因为大多数transition在进行中还是会产生滚动条，所以你会看到无滚动条页面transition之间的三种状态:
1.no-scrollbar 2.scrollbar可见或滑动 3.no-scrollbar

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

Answer 1

以下是我最近找到并测试的解决方案，用于消除桌面浏览器滚动条显示和隐藏效果引起的抖动。
该解决方案看起来非常简单，适用于我的元素。

示例修复代码

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