移动端轮播切换时页面自动滚动至轮播区域问题求助

我在网站中使用了一个非交互式轮播组件，在Chrome浏览器响应式模式下测试时发现，不管页面滚动到哪个位置，轮播切换图片时都会自动滚动到轮播组件所在的位置。我是编程新手，附上相关代码：

原代码 #

HTML #

<div class="slider-container">
    <div class="slider" id="slider">
        <div class="slider__section">
            <img class="slider__img" src="/Muestra/rerereressssss.png" alt="">
        </div>
        <div class="slider__section">
            <img class="slider__img" src="/Muestra/Mumbai-restaurant-COVID-19-1366x7689.png" alt="">
        </div>
        <div class="slider__section">
            <img class="slider__img" src="/Muestra/fenaceeooswww.png" alt="">
        </div>
    </div>
</div>

CSS #

.slider-container{
    height: 100vh;
    top: 0;
}

.slider {
    display: flex;
    position: relative;
    width: 300%;
    height: 100vh;
    margin-left : -100%;
    position: absolute;
    overflow-x: hidden;
    top: 0;
    z-index: 0;
}

.slider__section {
    width: 100%;
    overflow: hidden;
}

.slider__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
}

JS #

const slider = document.getElementById("slider");
let sliderSection = document.querySelectorAll(".slider__section");
let sliderSectionLast = sliderSection[sliderSection.length -1];

slider.insertAdjacentElement('afterbegin',sliderSectionLast);

function moveRight() {
    let sliderSectionFirst = document.querySelectorAll(".slider__section")[0];
    
    slider.style.marginLeft = "-200%";
    slider.style.transition = "all 0.5s";
    setTimeout(function(){
        slider.style.transition = "none";
        slider.insertAdjacentElement('beforeend',sliderSectionFirst);
        slider.style.marginLeft = "-100%";
    }, 500 );
}

function moveLeft() {
    let sliderSectionLast= document.querySelectorAll(".slider__section")[3];
    slider.style.marginLeft = "0";
    slider.style.transition = "all 0.5s";
    setTimeout(function(){
        slider.style.transition = "none";
        slider.insertAdjacentElement('afterbegin',sliderSectionLast);
        slider.style.marginLeft = "-100%";
    }, 500 );
}

setInterval(function(){
    console.log(sliderSectionLast);
},4500 );

setInterval(function(){
    moveRight();
},4500 );

问题原因 #

这个滚动问题是因为Chrome响应式模式下，每次用insertAdjacentElement移动DOM元素时，浏览器会自动聚焦到新插入的元素，触发页面滚动到轮播组件位置。另外你的JS里还存在索引错误（moveLeft中取了索引3，但实际只有3个轮播项，索引最大是2）。

修复步骤 #

1. 调整CSS #

给容器添加溢出隐藏，给轮播禁用平滑滚动，同时清理重复的定位属性：

.slider-container{
    height: 100vh;
    top: 0;
    overflow: hidden; /* 阻止容器内元素触发页面滚动 */
    position: relative; /* 确保内部绝对定位元素以它为参照 */
}

.slider {
    display: flex;
    position: absolute;
    width: 300%;
    height: 100vh;
    margin-left : -100%;
    overflow-x: hidden;
    top: 0;
    z-index: 0;
    scroll-behavior: auto; /* 禁用自动平滑滚动，避免聚焦触发滚动 */
}

2. 优化JS代码 #

修正索引错误，移除无用的定时器：

const slider = document.getElementById("slider");
let sliderSection = document.querySelectorAll(".slider__section");
let sliderSectionLast = sliderSection[sliderSection.length -1];

slider.insertAdjacentElement('afterbegin',sliderSectionLast);

function moveRight() {
    let sliderSectionFirst = document.querySelectorAll(".slider__section")[0];
    
    slider.style.marginLeft = "-200%";
    slider.style.transition = "all 0.5s";
    setTimeout(function(){
        slider.style.transition = "none";
        slider.insertAdjacentElement('beforeend',sliderSectionFirst);
        slider.style.marginLeft = "-100%";
    }, 500 );
}

function moveLeft() {
    // 正确获取最后一个轮播项
    let sliderSectionLast = document.querySelectorAll(".slider__section")[sliderSection.length - 1];
    slider.style.marginLeft = "0";
    slider.style.transition = "all 0.5s";
    setTimeout(function(){
        slider.style.transition = "none";
        slider.insertAdjacentElement('afterbegin',sliderSectionLast);
        slider.style.marginLeft = "-100%";
    }, 500 );
}

// 只保留轮播切换的定时器
setInterval(moveRight, 4500);

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