先说个实话，iOS 上 H5 虚拟列表的橡皮筋回弹，那叫一个头疼。

我跟你讲，这事儿跟你在坐公交车上被司机突然刹车一样，直接把页面弹得七荤八素。

别急，我这儿有几招实战经验，帮你把这个坑给填平。咱们一步步来别慌。

iOS WebKit 的滚动机制和 Android 那套不太一样。

当页面里有两个嵌套的滚动容器时iOS 不会把内层的惯性动量交给外层。

于是手指滑到内层底部，内层弹了个橡皮筋，然后卡住——等它回弹完了你再继续滑才行。

这时候Ru果你的列表是虚拟化的，滚动位置一变，DOM 里被回收的节点可Neng正好是正在编辑的 input，焦点直接丢失，用户体验瞬间降到冰点。

hen多人第一反应就是在全局加个 CSS：

html,body{ overscroll-behavior:none; }

或者直接在 JavaScript 里阻止 touchmove 的默认行为：

document.addEventListener, {passive:false});

哈哈，这么干虽然Neng把橡皮筋关掉，但也顺带把页面本该有的滚动dou给拦住了。

结果就是：列表根本不Neng滑动，用户只好去刷别的页面。

说实话，这种「强制阻止滚动」的写法往往伴随大量 inline script 和 style，页面结构混乱。

搜索引擎爬虫在抓取时会因为 JS 报错或 CSS 冲突直接放弃索引，所以排名掉得hen惨。

核心思路其实hen简单：把列表内部的滚动关掉，让外层 .content 独挑大梁。

这里有两件事要搞定：

去掉内层的 max-height 与 overflow-y:auto

在外层开启 page‑mode并Zuo好焦点保护

/* 把虚拟列表当作普通块元素 */
.virtual-list{
    max-height:none !important;
    overflow:visible !important;
}
.content{
    overflow:auto;
    -webkit-overflow-scrolling:touch; /* iOS 惯性 */
}

// 判断是否 iOS
function isIOS{
    const ua=navigator.userAgent;
    if) return true;
    // iPadOS 会成 Macintosh，需要额外判断触摸点数
    if && navigator.maxTouchPoints>1) return true;
    return false;
}
// Vue 示例
export default{
    computed:{
        enableSingleScroll{ return isIOS; }
    },
    mounted{
        if{
            this.$nextTick=>this._bindFocusGuard);
        }
    },
    methods:{
        _bindFocusGuard{
            const el=this.$refs.virtualList.$el;
            if return;
            el.addEventListener;
            el.addEventListener('touchmove',e=>{
                const y=e.touches.pageY;
                const delta=Math.abs;
                if return; // 防抖
                const active=document.activeElement;
                if && el.contains){
                    active.blur; // 手势滑动时自动失焦
                }
            },{passive:true});
        }
    }
}

这样一来当用户在列表里滑动时Ru果正好聚焦着输入框，就会被自动 blur 掉，避免「回收后焦点错位」的问题。

a）手写桥接 getScroll 并写入 $el.scrollTop 的方案：

手写桥接方案覆写 getScroll, 并把 $el.scrollTop 桥接到 .content.scrollTop, 让补偿「真的生效」。代价是：每次补偿写dou会在动量滚动中途猛拽 .content.scrollTop, 与 iOS 原生惯性打架 → 不顺畅.

技术栈：Vue + 移动端 H5关键依赖：

Zui终方案：库原生 page-mode

A）去除 max-height/overflow 限制，让 .virtual-list 不再独立滚动；

B）手写 touchmove-blur 防止焦点丢失；

C）配置足够大的 buffer，确保渲染平滑；

D）CSS 中使用 overscroll-behavior:none 关闭橡皮筋；

#1 内容结构清晰： 使用语义化标签，不要把所有东西dou塞进一个巨大的

// script 部分
import { DynamicScroller } from 'vue-virtual-scroller';
import { isIOS } from '@/utils';
export default {
  components:{ DynamicScroller },
  data{
     return {
        listData:this.generateList,
        elementValue:{}
     };
  },
  computed:{
     isIOS{ return isIOS; }
  },
  mounted{
     if{
         this.$nextTick=>this._bindFocusGuard);
     }
  },
  methods:{
     generateList{
        const arr=;
        for{
           arr.push;
        }
        return arr;
     },
     _bindFocusGuard{
         const listEl=this.$refs.virtualList.$el;
         let startY=0;
         listEl.addEventListener('touchstart',e=>{
            startY=e.touches.pageY||0;
         },{passive:true});
         listEl.addEventListener('touchmove',e=>{
            const curY=e.touches.pageY||0;
            if<$10) return;//防抖
            const active=document.activeElement;
            if && listEl.contains){
               active.blur;
            }
         },{passive:true});
     }
   }
};

html,body{
   height:100%;
   margin:0;padding:0;
   overscroll-behavior:none!important/* 禁止所有方向回弹 */;
}
.page{
   display:flex;height:100vh;width:100%;flex-direction:column;background:#f9f9f9;
}
.header,.footer{
   flex:none;height:44px;background:#fff;border-bottom:1px solid #ddd;text-align:center;padding-top:10px;font-weight:bold;}
.content{
   flex:auto;width:100%;overflow:auto;-webkit-overflow-scrolling:touch;}
.virtual-list{
   width:100%;max-height:none!important/* 必须去掉 */;}
.item{
   padding:12px;border-bottom:1px solid #eee;background:#fff;}
.item input{
   width:100%;border:none;padding:8px;margin-top:4px;background:#fafafa;}
/* 为防止键盘弹起导致视口变化，引入安全区 */
@media {
   .footer{padding-bottom:max,10px);}
}