js 垂直滚动、中奖列表滚动

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>垂直滚动</title>

    <style>
        #demo {
            list-style: none;
            height: 150px;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <ul id="demo">
        <li>180****1234 邀请5人提现100元</li>
        <li>180****1234 邀请4人提现100元</li>
        <li>180****1234 邀请7人提现100元</li>
        <li>180****1234 邀请4人提现100元</li>
        <li>180****1234 邀请21人提现100元</li>
        <li>180****1234 邀请12人提现100元</li>
        <li>180****1234 邀请13人提现100元</li>
        <li>180****1234 邀请2人提现100元</li>
        <li>180****1234 邀请9人提现100元</li>
        <li>180****1234 邀请6人提现100元</li>
        <li>180****1234 邀请5人提现100元</li>
        <li>180****1234 邀请8人提现100元</li>
        <li>180****1234 邀请1人提现100元</li>
        <li>180****1234 邀请9人提现100元</li>
        <li>180****1234 邀请11人提现100元</li>
        <li>180****1234 邀请10人提现100元</li>
        <li>180****1234 邀请16人提现100元</li>
        <li>180****1234 邀请9人提现100元</li>
        <li>180****1234 邀请4人提现100元</li>
    </ul>

    <script src="jquery.min.js"></script>
    <script>
        function customScroll(id, delay = 150) {
            if (!id) {
                throw new Error("选择器不存在");
            }

            let timer = null;
            
            let _elem = document.getElementById(id);

            let c = function(){
                if (timer) {
                    clearInterval(timer);
                }
                _elem.onmouseover = function () {
                    clearInterval(timer);
                }
                _elem.onmouseout = function () {
                    c();
                }
                
                if (_elem.scrollHeight >= _elem.offsetHeight) {
                    timer = setInterval(() => {
                        if(_elem.scrollTop >= _elem.scrollHeight){
                            _elem.scrollTop = 0;
                        } else {
                            if (_elem.scrollTop >= _elem.children[0].offsetHeight) {
                                _elem.append(_elem.children[0]);
                            }
                            _elem.scrollTop++;
                        }
                    }, delay);
                }
            }
            return c;
        }

        let callback = customScroll('demo');
        callback();
    </script>
</body>
</html>

 

效果展示

posted @ 2020-08-14 13:41  宋健安  阅读(1309)  评论(0)  编辑  收藏  举报