移动端屏幕旋转后requestAnimationFrame滚动动画闪烁及失效问题求助

问题根源 #

1. 第三方代码的滚动到顶部行为会优先于自定义滚动动画触发，直接覆盖操作，导致第一次点击无动画、页面直接回顶部。
2. 屏幕旋转后页面布局重排，offsetTop 获取的是旧的元素位置，计算出的滚动距离不准确。
3. 第二次点击时，第三方滚动与自定义滚动先后执行，造成页面短暂闪烁。

具体修复方案 #

1. 替换位置计算方式，确保坐标准确 #

用getBoundingClientRect()替代offsetTop，它能直接获取元素相对于视口的实时位置，结合滚动容器的滚动距离计算目标位置，避免屏幕旋转后的布局偏差：

function scrollTo(element, timeMS=200, offset=0) {
    // 获取元素视口坐标 + 容器滚动距离 = 元素在容器内的绝对位置
    const elementRect = element.getBoundingClientRect();
    const elementPosition = scrollElementGlobal.scrollTop + elementRect.top;
    const startPosition = scrollElementGlobal.scrollTop;
    const scrollDist = (elementPosition + offset) - startPosition;
    const startTime = performance.now();

    function scrollStep(timestamp) {
        const currentTime = timestamp - startTime;
        const scrollProgress = Math.min(currentTime / timeMS, 1);
        scrollElementGlobal.scrollTop = startPosition + scrollDist * scrollProgress;
        if(scrollProgress < 1) {
            requestAnimationFrame(scrollStep);
        }
    }
    requestAnimationFrame(scrollStep);
}

2. 阻断第三方滚动触发路径 #

在点击事件中先阻止事件冒泡和默认行为，切断第三方代码的滚动触发逻辑，同时用requestAnimationFrame确保在布局重排后执行自定义滚动：

continue_button.addEventListener('click', function(event) {
    // 阻止第三方绑定的事件触发滚动到顶部
    event.preventDefault();
    event.stopPropagation();

    // 等待浏览器完成重绘，确保获取最新的元素位置
    requestAnimationFrame(() => {
        if(something_went_wrong) {
            scrollTo(element_that_went_wrong);
            return;
        }
        
        if(something_else_went_wrong) {
            scrollTo(other_element_that_went_wrong);
            return;
        }

        // 若没有错误，需手动触发第三方的后续逻辑（如表单提交）
        // 示例：可调用第三方暴露的提交方法，避免循环触发点击事件
    })
})

3. 监听窗口尺寸变化（可选） #

如果滚动容器是动态生成或尺寸随屏幕旋转变化，监听resize事件确保容器引用始终正确：

window.addEventListener('resize', () => {
    scrollElementGlobal = document.querySelector('你的滚动容器选择器');
});

关键说明 #

• getBoundingClientRect()不受父元素定位影响，能精准获取屏幕旋转后的元素实时位置。
• 阻止事件冒泡和默认行为可避免第三方滚动抢占控制权，但需注意保留必要的业务逻辑触发（如无错误时的表单提交）。
• requestAnimationFrame()确保代码在浏览器重绘后执行，避免获取旧布局信息导致的滚动偏差。

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