Vue3+Vuetify3移动端Web应用滚动失效问题求助

项目环境：Vue3（^3.2.13）+ Vuetify3（^3.0.0）
问题现象：包含<input>标签与v-text-field的特定页面偶尔出现滚动卡顿，表现为几秒内无法滚动，之后恢复正常
复现环境：iOS WebKit（iOS15及以上）、Chrome移动端模拟环境
当前滚动实现：滚动区域使用vh设置高度，搭配overflow:auto/-x/-y，仅.car_input-inner区域可滚动，其余部分为固定定位

具体解决方案 #

• 替换vh单位为动态计算高度
  iOS WebKit中vh会因地址栏/工具栏变化触发布局重排，进而引发滚动卡顿。优先使用CSS原生动态视口单位（iOS15+支持）：

  .car_input-inner {
    /* 替换原vh设置 */
    height: 100dvh;
    overflow-y: auto;
  }
  

  若需兼容更低版本iOS，可在组件中动态计算高度：

  mounted() {
    const updateScrollHeight = () => {
      const scrollContainer = document.querySelector('.car_input-inner');
      if (scrollContainer) scrollContainer.style.height = `${window.innerHeight}px`;
    };
    updateScrollHeight();
    window.addEventListener('resize', updateScrollHeight);
    this.$once('hook:beforeUnmount', () => window.removeEventListener('resize', updateScrollHeight));
  }
  

• 添加WebKit滚动优化样式
  针对iOS WebKit的滚动特性，给滚动区域添加专属优化：

  .car_input-inner {
    -webkit-overflow-scrolling: touch; /* 启用原生触摸滚动优化 */
    will-change: scroll-position; /* 提示浏览器提前优化滚动逻辑 */
    transform: translateZ(0); /* 触发硬件加速减少重绘 */
  }
  

  注意：-webkit-overflow-scrolling: touch需确保滚动区域无嵌套复杂定位元素，避免引发新布局问题。

• 规避输入框聚焦的滚动干扰
  iOS WebKit在输入框聚焦时会自动调整视口，可能打断滚动逻辑。可手动控制聚焦行为：

  // 给input/v-text-field绑定原生聚焦事件
  methods: {
    handleInputFocus() {
      // 阻止浏览器自动滚动聚焦，保持当前滚动位置
      document.activeElement?.scrollIntoView({ behavior: 'instant', block: 'nearest' });
      // 临时禁用滚动优化，聚焦后恢复
      const scrollContainer = document.querySelector('.car_input-inner');
      if (scrollContainer) {
        scrollContainer.style.webkitOverflowScrolling = 'auto';
        setTimeout(() => scrollContainer.style.webkitOverflowScrolling = 'touch', 300);
      }
    }
  }
  

  对于v-text-field，使用@focus.native绑定事件。

• 优化Vuetify组件渲染性能
  v-text-field内部DOM结构复杂，易引发重排卡顿：

  • 添加lazy属性延迟非必要渲染：<v-text-field lazy></v-text-field>
  • 大量输入框场景改用v-virtual-scroll虚拟滚动
  • 用hide-details="auto"减少冗余DOM节点

• 排查滚动事件冲突
  检查页面中自定义滚动监听或第三方库是否与原生滚动冲突：

  • 给滚动监听添加passive: true优化性能：

    window.addEventListener('scroll', () => { /* 处理逻辑 */ }, { passive: true });
    

  • 确保固定定位元素未覆盖滚动区域，导致滚动事件无法触发

内容的提问来源于stack exchange，提问作者Spencer