移动端解决fixed滚动出现抖动的问题

在移动端，当使用fixed定位元素时，滚动页面会出现抖动的问题。这是由于移动设备的浏览器在滚动时会对fixed元素重新定位，从而导致抖动。为了解决这个问题，可以采用以下几种方法：

1. 使用CSS属性-webkit-overflow-scrolling:touch，设置overflow元素为scroll或auto，并为其父元素设置该属性。这可以让页面在滚动时平滑滑动，同时固定元素不会抖动。

2. 使用position:sticky，而不是fixed，对于支持sticky的浏览器，它会在页面滚动时保持元素的位置，并且不会产生抖动。

3. 使用JavaScript，通过监听滚动事件，在滚动时实时更新固定元素的位置，从而避免抖动。

综上所述，以上方法都可用于解决移动端fixed元素滚动出现抖动的问题，具体应该根据实际情况选择最适合的方法。

相关问题

移动端vue弹窗滚动底层页面不滚动

在移动端使用 Vue 弹窗时，如果弹窗出现后滚动弹窗的内容，底层页面也会跟着滚动，这是因为移动设备上的滚动机制和 PC 端不同，需要特殊处理。

一种解决方法是，给弹窗容器添加以下 CSS 样式：

.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

其中 `position: fixed;` 可以固定弹窗的位置，`overflow-y: auto;` 可以使弹窗内容超出容器部分出现滚动条，`-webkit-overflow-scrolling: touch;` 可以启用 iOS 设备的滚动优化。

这样设置后，弹窗容器内的内容可以滚动，但是底层页面不会跟着滚动。

vant 开发移动端 里面的tabbar适配问题 设置固定fixed还是出现机型不适配 浏览器滑动回退高度会改变

针对vant开发移动端中tabbar适配问题，如果设置固定fixed出现机型不适配的情况，可以考虑使用flex布局来解决。具体来说，可以将tabbar设置为flex布局中的一个子项，通过设置flex-grow属性来使其占据剩余空间，同时可以使用flex-shrink属性控制其在空间不足时的缩小比例。这样可以保证tabbar在不同机型上都能够适配。

至于浏览器滑动回退高度会改变的问题，可以考虑使用一些CSS技巧来解决。比如可以使用viewport单位来设置页面高度，或者使用position:fixed属性来固定页面高度。另外，如果涉及到页面滚动时高度变化的情况，可以使用JavaScript来监听滚动事件，根据滚动的距离来动态调整页面高度。