移动端浏览器箭头旋转与滚动重置异常问题排查

核心原因 #

1. 滚动位置精度不匹配：移动端浏览器的window.scrollY可能返回浮点数（比如平滑滚动、像素密度适配导致的小数），但代码中用===做严格全等判断，要求scrollY必须完全等于position_bottom - window.innerHeight的整数值，导致滚动到底部时条件无法触发，destination未更新为0，箭头方向错误。
2. 视口高度计算不稳定：移动端浏览器的地址栏、工具栏会动态显示/隐藏，window.innerHeight的值会随之变化，导致position_bottom - window.innerHeight的计算值不准确。
3. 防抖延迟的滞后性：100ms的防抖会延迟滚动事件的处理，可能滚动到底部后，判断逻辑还未触发，用户已经看到错误的箭头状态。

代码修改建议 #

以下是针对性修复后的代码，关键改动已标注注释：

// Initial position values
let position_top = 0;
let position_bottom; // 先初始化，在update_scroll_height中赋值
let destination = 1; // 1 indicates scrolling down, 0 indicates scrolling up
let prevScrollPos = window.scrollY; // Store the previous scroll position
let element_rota = document.getElementById('rotaid'); // Get the HTML element with the ID 'rotaid'

/*
    Function to smoothly scroll to the top or bottom of the page based on the destination variable.
*/
function move_to() {
    window.scroll({
        top: destination === 1 ? position_bottom : position_top,
        behavior: 'smooth'
    });
}

/*
    Function to rotate the arrow based on the scrolling direction.
*/
function tri_points_to(destination) {
    console.log("Arrow points to: " + destination);
    destination === 1 ? rotate_tri_bot() : rotate_tri_top();
}

/*
    Function to add and remove classes for arrow rotation.
*/
function rotate_triangle(removeClass, addClass) {
    element_rota.classList.remove(removeClass);
    element_rota.classList.add(addClass);
}

/*
    Function to rotate the arrow downward.
*/
function rotate_tri_bot() {
    rotate_triangle("pointing_up", "pointing_down");
}

/*
    Function to rotate the arrow upward.
*/
function rotate_tri_top() {
    rotate_triangle("pointing_down", "pointing_up");
}

/*
    Function to update the destination based on scroll position.
*/
function change_destination() {
    const currentScrollPos = window.scrollY;
    // 计算准确的最大滚动距离：文档总高度 - 视口可见高度
    const maxScrollPos = document.documentElement.scrollHeight - document.documentElement.clientHeight;

    if (currentScrollPos <= 5) { // 允许顶部5px的误差范围
        console.log("Arrived at the destination top: " + destination);
        destination = 1;
    }

    if (currentScrollPos >= maxScrollPos - 5) { // 允许底部5px的误差范围
        console.log("Arrived at the destination bottom: " + destination);
        destination = 0;
    }

    console.log("New destination: " + destination);
    tri_points_to(destination);
}

/*
    Function to handle scroll events and update the arrow rotation and destination.
*/
function handleScroll() {
    const currentScrollPos = window.scrollY;

    // Check the scroll direction and update the destination
    if (currentScrollPos > prevScrollPos) {
        console.log("Scrolling down");
        destination = 1;
    } else if (currentScrollPos < prevScrollPos) {
        console.log("Scrolling up");
        destination = 0;
    }

    // Note the last scroll value
    prevScrollPos = currentScrollPos;

    // 先执行位置判断，避免滚动方向判断覆盖顶部/底部的状态
    change_destination();
}

/*
    Function to update the scroll height on window resize.
*/
function update_scroll_height() {
    // 计算准确的滚动到底部时的scrollTop值
    position_bottom = document.documentElement.scrollHeight - document.documentElement.clientHeight;
}

// Debounce function to limit the frequency of function calls
function debounce(func, delay) {
    let timeout;
    return function () {
        const context = this;
        const args = arguments;
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(context, args), delay);
    };
}

// Debounced scroll event listener
window.addEventListener('scroll', debounce(handleScroll, 50)); // 缩短防抖延迟，提升响应速度
// 监听scrollend事件，确保滚动停止后强制校验一次位置（现代浏览器支持）
window.addEventListener('scrollend', change_destination);
// Debounced resize event listener
window.addEventListener('resize', debounce(update_scroll_height, 50));

// Initial call to update scroll height
update_scroll_height();

关键改动说明 #

• 替换严格相等为范围判断：用<=5和>=maxScrollPos-5兼容移动端滚动的精度偏差，避免因浮点数导致判断失效。
• 准确计算最大滚动距离：使用document.documentElement.scrollHeight - document.documentElement.clientHeight，避开window.innerHeight受移动端工具栏动态变化的影响。
• 优化事件响应：缩短防抖延迟到50ms提升实时性，新增scrollend事件监听，确保滚动停止后强制触发位置校验。
• 调整逻辑顺序：先执行位置判断再更新箭头方向，避免滚动方向的临时判断覆盖顶部/底部的最终状态。

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