JS div内容滚动条自动上下来回滚动

div滚动条内容自动上下来回滚动

例图:
在这里插入图片描述
代码:

		/*
        * stepLength:一次滚动步长
        * speed:滚动速度
        * delay:停留时间
        * element:Element对象
        * element.offsetHeight 元素的像素高度(包括边框和填充)
        * element.scrollTop 元素的内容垂直滚动的像素
        * element.scrollHeight 元素的高度(包括带滚动条的隐蔽的地方)
        */
        function autoScroll(stepLength, speed, delay, element) {
            let interval
            //let step = 1
            element.scrollTop = 0
            function start() {
                interval = setInterval(scrolling, speed)
                element.scrollTop += stepLength
            }
            function scrolling() {
                var sTop = element.scrollTop;
                element.scrollTop += stepLength;
                if (sTop === element.scrollTop || sTop == 0||element.scrollTop === (element.scrollHeight - element.offsetHeight)) {
                    stepLength *= -1 // 转换方向
                    clearInterval(interval)
                    setTimeout(start, delay)
                }
            }
            if (element.offsetHeight !== element.scrollHeight) { // 元素内容没有溢出时,不触发
                setTimeout(start, delay)
            }
        }

// 调用
const element = document.getElementById('dvBirthday');
autoScroll(5, 1000, 1500, element);
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小步快跑-

如有帮到您,给个赞赏(^.^)

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值