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

这个问题在我身上出现过两次

使用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)  */
}

---

现在在jquerymobileframework中，当我单击从一个页面到另一个页面的转换时，我也遇到了这个抖动问题，在页面转换之后，背景图像会抖动，所以如果在windows桌面浏览器中查看它，它看起来很有问题

我想知道是否有人修复了在不同页面高度的jquery移动页面之间启动数据转换时，桌面浏览器中出现的jquery移动背景抖动问题

senario示例：

页面A：页面内容很长，所以当页面完全加载时有滚动条

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

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

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

触发器： 使用juqerymobile框架链接到 触发这些页面之间的数据转换=“***”：

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

页面B->页面D，出现抖动问题，因为大多数转换仍在进行中生成滚动条，因此您将看到三种状态：无滚动条页面转换：
1.无滚动条2.滚动条可见或滑动3.无滚动条

---

第A页->第C页，在动画过渡期间，滚动条始终存在，因此不会发生抖动

下面是我最近发现并测试的解决方案，用于消除桌面浏览器滚动条的显示和隐藏效果所造成的抖动效果。
这个解决方案看起来很简单，对我的项目很有效

修复代码示例

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

---

下面是我最近发现并测试的解决方案，用于消除桌面浏览器滚动条的显示和隐藏效果所造成的抖动效果。
这个解决方案看起来很简单，对我的项目很有效

修复代码示例

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

---

我也曾有过一个网页，当滚动条突然出现时，它经历了震动的效果。我的解决方案有点不同。我的容器的宽度是736px，因此在body元素的CSS中，我给它一个更大的宽度1200px，并指示overflow-x:hidden。这似乎很管用，但并不完美。所以我也指出了1200px的高度和隐藏的整体溢出。这一页现在不受任何震动的影响

以下是与的链接，其关键部分在样式中如下所示：

body {
  width:1200px;
  height:1200px;
  overflow:hidden;
}

#container {
  margin:auto;width:736px;
}

---

如果您注释掉body元素的CSS，那么当滚动条出现时，您将再次看到页面抖动。

我也有一个网页在滚动条突然出现时经历了抖动效果。我的解决方案有点不同。我的容器的宽度是736px，因此在body元素的CSS中，我给它一个更大的宽度1200px，并指示overflow-x:hidden。这似乎很管用，但并不完美。所以我也指出了1200px的高度和隐藏的整体溢出。这一页现在不受任何震动的影响

以下是与的链接，其关键部分在样式中如下所示：

body {
  width:1200px;
  height:1200px;
  overflow:hidden;
}

#container {
  margin:auto;width:736px;
}

---

如果您注释掉body元素的CSS，那么当滚动条出现时，您将再次看到页面抖动。

我遇到了一个类似的问题，在一些引导菜单动画期间，主体滚动条闪烁。与这里的其他一些解决方案类似，我修改了body scrollbar行为，使其始终显示：

body
{
    overflow-y: scroll; /* Fix Chrome jitter problem.*/
}

---

我有一个类似的问题，在一些引导菜单动画中，主体滚动条闪烁。与这里的其他一些解决方案类似，我修改了body scrollbar行为，使其始终显示：

body
{
    overflow-y: scroll; /* Fix Chrome jitter problem.*/
}

---

实际上，这个问题可以很容易地在jquery mobile transition演示页面中重现：　关闭对话框后，页面转换完全完成后，您将看到背景中的内容延迟抖动。（首先，您会看到页面主体没有滚动条，然后当转换完成时，滚动条会出现，您会在背景中看到轻微的抖动效果）实际上，这个问题可以很容易地在jquery mobile transition演示页面中重现：　关闭对话框后，页面转换完全完成后，您将看到背景中的内容延迟抖动。（首先你看到没有滚动条的页面主体，然后当转换完成时，滚动条出现，你在背景中看到轻微的抖动效果）非常感谢，经过多次努力搜索，它对我非常有效。很好的一天。非常感谢，经过多次努力搜索，它对我非常有效。天气真好。