dom元素的自上而下自动滚动

dom元素的自上而下自动滚动
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 300px;
            height: 300px;
            overflow-y: auto;
            overflow-x: hidden;
        }
    </style>
</head>
<body>
<div id="box">
    <p>sdjfhjdshfjdshf</p>
</div>
</body>
</html>
<script>

    let interval = null; // 承载定时器对象
    /**
     *
     * @param element   dom
     * @param height    dom元素的高度
     * @param step      每次滚动步长
     * @param timeSpace 定时器时间间隔
     * @param delay     页面加载完成之后多久之后进行滚动
     * @param isAlways  当滚动到页面底部之后是否进行再次滚动
     * @param finishTime 完成滚动之后，若是允许多次滚动，设置延迟时间
     * @param isMouseenter 是否有鼠标划入操作
     */
    function startScroll(element, height, step, timeSpace, delay, isAlways, finishTime, isMouseenter) {
        let temp = delay;
        if (isMouseenter === true) {
            delay = 0;
        }
        setTimeout(() => {
            interval = setInterval(() => {
                // 当element.scrollTop小于element.scrollHeight - height时执行定时器
                if (element.scrollTop < element.scrollHeight - height) {
                    element.scrollTop = element.scrollTop + step;
                } else {
                    delay = temp;
                    if (isAlways === true) {
                        clearInterval(interval);
                        element.scrollTop = 0;
                        setTimeout(() => {
                            startScroll(element, height, step, timeSpace, delay, isAlways, finishTime);
                        }, finishTime)
                    } else {
                        clearInterval(interval);
                    }

                }

            }, timeSpace);
        }, delay);
    }

    function stopScroll() {
        clearInterval(interval);
    }

    window.onload = function () {
        let element = document.getElementById('box');
        for(let i=0; i<40; i++) {
            let str = document.createElement('p');
            str.innerHTML = 'jdsfhjdshfjdshfjdshfdjshf';
            element.appendChild(str);
        }
        startScroll(element, 300, 1, 20, 3000, true, 3000);
        element.onmouseenter = function () {
            stopScroll();
        };
        element.onmouseleave = function () {
            startScroll(element, 300, 1, 20, 3000, true, 3000, true);
        }
    }
</script>
dom元素的自上而下自动滚动

猜你喜欢
