信息滚动条

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;    //指定高度
    position: relative; 
    overflow: scroll;
    overflow-x: hidden;
    overflow-y: hidden;
}

JS引用

 function  prizeScroll(listNum) {

　　　　　　　　//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) {   //假定页面显示数据为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);
                
            },

信息滚动条

推荐阅读