背景：

移动端H5开发的过程中，往往要考虑ios端和android端的兼容性处理，有些产品还需要兼容鸿蒙系统。为了提高用户的体验，开发会尽量做到样式和交互多端保持一致。下面就来详细介绍下移动端H5禁止ios橡皮筋回弹效果及点击回退按钮，回退到指定tab页面的解决方案，供大家参考。

实践：

问题一：

ios系统的橡皮筋效果，影响页面中其他固定定位的展示。

介绍：

ios的橡皮筋效果是一种在用户界面交互中常见的动画效果，它主要出现在滚动视图（如UIScrollView）中。当用户滚动到视图边界时，界面会产生一个回弹的效果，给用户一种物理反馈的感觉。这种效果不仅提升了用户体验，还使得滚动操作更加直观和有趣。但是，如果当页面中有些模块使用固定定位（fixed），当界面下拉的过程中，就会影响界面的布局，影响到体验效果。

解决方案：

关闭ios的橡皮筋效果：在开发的过程中，尝试了两种方案去解决。
第一种：将html、body设置成overflow: hidden;在需要滚动的元素上添加overflow-y: auto;

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

第二种：引入插件inobounce。

npm install inobounce -s

在App.vue中设置禁止橡皮筋效果。

onBeforeMount(() => {
   let u = navigator.userAgent
   if (u.indexOf('iPhone') > -1) {
     inobounce.enable()
   }
 })
 onUnmounted(() => {
   inobounce.disable()
 })

通过上述的设置后，即使设置overflow-y: auto;的元素也不能滚动了，还需要在滚动的元素中添加-webkit-overflow-scrolling: touch;属性，才能达到滚动效果。

问题二：

如果页面中有多个tab页，例如从第二个tab页跳转到其他页面，点击”返回“按钮，仍然回到第二个tab页。

解决方案：

在tab组件添加回调，每次切换tab页时，主动修改历史记录。

<template>
<van-tabs v-model:active="active" sticky @change="handleChange">
    <van-tab title="tab1">
        <ecs-tab v-if="active === 0" />
    </van-tab>
    <van-tab title="tab2">
        <security-group-tab v-if="active === 1" />
    </van-tab>
</van-tabs>
</template>
<script setup lang="ts">
const active = ref<number>(0)
// 保存当前tab状态
const saveTabState = (tabId: string | number) => {
   history.replaceState({ tabId: tabId }, '', '')
 }
// 标签页更改
const handleChange = (name: string | number) => {
  saveTabState(`${name}`)
}
</script>

监听回退函数，根据历史记录中保存的tabId，进行页面tab的渲染，注意：此处需要通过dom节点进行选中，通过定义的变量达不到选中效果。