关于js中元素滚动到可视区域ScrollIntoView，谷歌浏览器不兼容多个区域同时滚动的解决

jack319317

已于 2024-03-22 22:56:58 修改

阅读量303

点赞数 3

文章标签： javascript 开发语言 ecmascript

于 2024-03-22 22:42:50 首次发布

本文链接：https://blog.csdn.net/qq_46083263/article/details/136953702

版权

使用for循环依次调用scrollIntoView如果加了动画效果，是不管用的，只能滚动一个，而且没有提供滚动完成的回调，这个就很难受了😵‍💫，所以只能挨个滚动，即上一个滚动完成之后下一个才开始滚动，直接上代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            height: 500px;
        }

        .a {
            background-color: blue;
        }

        .b {
            background-color: blueviolet
        }

        .c {
            background-color: burlywood
        }

        .d {
            background-color: cadetblue
        }

        .e {
            background-color: chartreuse
        }

        .f {
            background-color: aqua
        }
    </style>
</head>

<body>
    <div style="display: flex;overflow: auto;">
        <div class="scroll" style="width:15%;margin-left: 20px;height: 80vh;overflow: auto;">
            <div class="a"></div>
            <div class="b"></div>
            <div class="c"></div>
            <div class="d"></div>
            <div class="e"></div>
            <div class="f"></div>
        </div>
        <div class="scroll" style="width:15%;margin-left: 20px;height: 80vh;overflow: auto;">
            <div class="a"></div>
            <div class="b"></div>
            <div class="c"></div>
            <div class="d"></div>
            <div class="e"></div>
            <div class="f"></div>
        </div>
        <div class="scroll" style="width:15%;margin-left: 20px;height: 80vh;overflow: auto;">
            <div class="a"></div>
            <div class="b"></div>
            <div class="c"></div>
            <div class="d"></div>
            <div class="e"></div>
            <div class="f"></div>
        </div>
    </div>
    <button id="btn">滚动</button>
</body>
<script>
    //滚动操作
    const sleep = (k) => {
        let sc = false
        return new Promise(resolve => {
            k.querySelector('.e').scrollIntoView({
                behavior: 'smooth',
            });
            // **判断是否已经完成此次滚动，完成了就放行，可以进行下步操作
            k.onscroll = e => {
                sc = true
                clearTimeout(window.scrollEndTimer)
                window.scrollEndTimer = setTimeout(() => {
                    resolve()
                }, 100)
            }
            // 点击一段时间没滚动，说明当前已经在可视区域，直接放行
            setTimeout(() => {
                if(!sc){
                    resolve()
                }
            },100)
        })
    }

    let scrolls = document.querySelectorAll('.scroll')
    document.getElementById("btn").addEventListener("click", async function () {
        for (let h = 0; h < scrolls.length; h++) {
            //**完成此次滚动后，在进行下一次循环
            await sleep(scrolls[h])
        }
    })

</script>

</html>

加 * 号的就是解决问题的关键代码，欢迎各位大佬指点