移动端导航失效、点击transition元素或input聚焦页面跳顶部问题求助

API 探路者

2026-10-13

问题根因定位

三个异常表现的核心诱因完全一致：你给 html、body 根元素设置了 height: 100% 或 overflow: hidden 规则，采用了自定义内部容器实现页面滚动，而非使用浏览器原生的文档滚动能力。移动端浏览器在元素触发重绘（transition 动画执行、input 获焦弹出软键盘）时，会错误识别滚动容器，直接将根滚动位置重置为 0，进而触发所有异常。
你之前尝试的保留滚动位置方案逻辑存在错误：你将滚动位置赋值给了当前点击的元素，而非实际承担滚动能力的容器，自然无法生效。

可行解决方案

优先采用方案1：移除 html、body 上的 height: 100%、overflow: hidden 相关样式规则，直接使用浏览器原生页面滚动能力，所有滚动逻辑交还给默认的 document 滚动容器，即可一次性修复所有异常，是兼容性最好的处理方式。
若业务逻辑必须保留自定义内部滚动容器，采用方案2：手动监听重绘触发时机，记录并回设滚动位置，正确实现代码如下：

let lastScrollTop = 0;
// 替换为你实际承担页面滚动的容器元素
const scrollContainer = document.documentElement; 

// 处理带transition元素的点击异常
document.querySelectorAll('[style*="transition"], [class*="transition"]').forEach(el => {
  el.addEventListener('click', () => {
    lastScrollTop = scrollContainer.scrollTop;
    setTimeout(() => scrollContainer.scrollTop = lastScrollTop, 0);
  });
});

// 处理input获焦异常
document.querySelectorAll('input').forEach(el => {
  el.addEventListener('focus', () => {
    lastScrollTop = scrollContainer.scrollTop;
    // 延迟匹配软键盘弹出时机，避免赋值被软键盘弹出逻辑覆盖
    setTimeout(() => scrollContainer.scrollTop = lastScrollTop, 100);
  });
});