信息滚动条

Posted 2020-07-23 浣花水榭

html样式

<div id="recoder_con">
    <div id="recoder_ul1"></div>
    <div id="recoder_ul2"></div>
</div>

父元素样式

.recoder-con{
    display: inline-block;
    width: 584px;     //指定宽度
    height: 280px;    //指定高度
    overflow: scroll;
    overflow-x: hidden;
    overflow-y: hidden;
}

JS引用

 function  prizeScroll(listNum) {
                var speed = 65,
                    wap = document.getElementById("recoder_con"),
                    ul1 = document.getElementById("recoder_ul1"),
                    ul2 = document.getElementById("recoder_ul2");

                ul2.innerHTML = ul1.innerHTML;
                var leftHeight;

                if (listNum > 4) {
                    leftHeight = 0;
                } else if (listNum == 4) {
                    leftHeight = 33;
                }

                function Marquee2() {
                    if (ul2.offsetTop - wap.scrollTop <= leftHeight) {
                        wap.scrollTop -= ul1.offsetHeight;
                    } else {
                        wap.scrollTop++;
                    }
                }
                var MyMar2 = setInterval(function () {
                    Marquee2();
                }, speed);
                
            },

　　其中 ： 参数 listNum为数据长度