实现可上下双向滚动的无限画廊时自动滚动触顶触底卡顿求助

滚动卡住的核心原因 #

• 你同时使用了window.scrollTo修改页面滚动位置、以及手动修改scrollable元素的transform: translateY偏移，两套滚动逻辑冲突，且触发了window.onscroll事件的死循环
• 滚动边界判断逻辑存在漏洞：当target跳到边界值后，requestAnimationFrame的下一帧会直接读取修改后的window.scrollY，和onscroll的滚动方向检测逻辑互相覆盖，导致reverse值反复横跳，最终卡住
• 你用了两份滚动状态管理：scroll函数里的target和scrollDetect里的lastScroll状态不同步，边界跳转后两个变量的值差会导致方向判断完全错误

修复方案 #

统一滚动逻辑，不要同时用原生滚动和transform偏移，选transform做自动滚动、原生滚动只检测用户手动滑动方向即可，同时新增边界跳转标记避免方向误判，同步两份滚动状态。修改后可运行代码如下：

let target = 1;
let reverse = false;
let isJumping = false; // 边界跳转标记，避免方向误判
const content = document.getElementById('content');
const scrollable = document.getElementById('scrollable');
let lastScroll = 0;

function autoScroll() {
    // 边界判断直接修改target，不操作window.scrollTo避免触发滚动事件
    if(target <= 0){
        isJumping = true;
        target = (content.offsetHeight / 2) - 10;
        document.getElementById("scrollLoct").innerHTML = "target UP";
        // 同步更新lastScroll避免方向误判
        lastScroll = target;
        setTimeout(() => isJumping = false, 50);
    }else if( target >= content.offsetHeight / 2){
        isJumping = true;
        target = 10;
        document.getElementById("scrollLoct").innerHTML = "target DOWN";
        lastScroll = target;
        setTimeout(() => isJumping = false, 50);
    }

    reverse ? target-- : target++;
    // 只通过transform控制滚动，不修改window.scrollY
    scrollable.style.transform = `translateY(-${target}px)`;
    requestAnimationFrame(autoScroll)
}
autoScroll();

window.onscroll = function() {
    // 边界跳转时暂时不检测方向
    if(isJumping) return;
    let currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
    if (currentScroll > 0 && lastScroll <= currentScroll){
      reverse = false;
      lastScroll = currentScroll;
      document.getElementById("scrollLoc").innerHTML = "Scrolling DOWN";
    }else{
      reverse = true;
      lastScroll = currentScroll;
      document.getElementById("scrollLoc").innerHTML = "Scrolling UP";
    }
};

内容的提问来源于stack exchange，提问作者Danijel J.