表格滚动

写在前面：360急速模式下scrollTop 和 scrollHeight 会有不兼容，此时需要给滚动的元素的相对根元素加 position:relative 定位，例如：给 html或者 ul1 或者 ul2 加

html

	<div class="exponent_box">
            <div class="exponent_box_title">
                <span>环境指数</span>
            </div>
            <div style="width: 100%;">
                <div class="realTimeData_head">城区环境空气质量实时数据</div>
                <ul class="realTimeData_head_ul">
                    <li>监测点位</li>
                    <li>AQI</li>
                    <li>PM2.5</li>
                    <li>PM10</li>
                    <li>NO<span style="vertical-align: sub;">2</span></li>
                    <li>SO<span style="vertical-align: sub;">2</span></li>
                    <li>CO</li>
                    <li>O<span style="vertical-align: sub;">3</span></li>
                </ul>
            </div>
            <div id="realTimeData_box">
                <ul id="comment1">
                    <li>
                        <span>监测点位</span>
                        <span>39</span>
                        <span>19</span>
                        <span>40</span>
                        <span>25</span>
                        <span>6</span>
                        <span>0.9</span>
                        <span>28</span>
                    </li>
                    <li>
                        <span>监测点位</span>
                        <span>39</span>
                        <span>19</span>
                        <span>40</span>
                        <span>25</span>
                        <span>6</span>
                        <span>0.9</span>
                        <span>28</span>
                    </li>
                    <li>
                        <span>监测点位</span>
                        <span>39</span>
                        <span>19</span>
                        <span>40</span>
                        <span>25</span>
                        <span>6</span>
                        <span>0.9</span>
                        <span>28</span>
                    </li>
                    <li>
                        <span>监测点位</span>
                        <span>39</span>
                        <span>19</span>
                        <span>40</span>
                        <span>25</span>
                        <span>6</span>
                        <span>0.9</span>
                        <span>28</span>
                    </li>
                    <li>
                        <span>监测点位</span>
                        <span>39</span>
                        <span>19</span>
                        <span>40</span>
                        <span>25</span>
                        <span>6</span>
                        <span>0.9</span>
                        <span>28</span>
                    </li>
                    <li>
                        <span>监测点位</span>
                        <span>39</span>
                        <span>19</span>
                        <span>40</span>
                        <span>25</span>
                        <span>6</span>
                        <span>0.9</span>
                        <span>28</span>
                    </li>
                    <li>
                        <span>监测点位</span>
                        <span>39</span>
                        <span>19</span>
                        <span>40</span>
                        <span>25</span>
                        <span>6</span>
                        <span>0.9</span>
                        <span>28</span>
                    </li>
                </ul>
                <ul id="comment2"></ul>
            </div>
        </div>

css

.exponent_box {width: 680px;height: 289px;float: left;}
.exponent_box_title {width: 100%;height: 38px;line-height: 38px;background: #eef6fd;border: 1px solid #e5f2fe;}
.exponent_box_title span {display: block;width: 100px;color: #357fd0;font-size: 16px;border-top: 2px solid #357fd0;text-align: center;font-weight: bold;}
.realTimeData_head {width: 100%;margin: 0 auto;height: 40px;color: #000000;text-align: center;line-height: 40px;font-size: 14px;font-weight: bold;letter-spacing: 1px;}
.realTimeData_head_ul {border-bottom: 1px solid #ddd;width: 680px;padding: 0;background: #E0F0FF;margin: 0 auto;}
.realTimeData_head_ul li {
    background: #eef6fd;
    padding: 6px 0;
    width: 85px;
    font-weight: bold;
    float: left;
    height: 30px;
    font-size: 14px;
    text-align: center;
    line-height: 30px;
}
#realTimeData_box {
    width: 100%;
    height: 190px;
    overflow: hidden;
    margin: 0 auto;
    text-align: center;
}
#comment1,realTimeData_box {
	position:relative;
}
#comment1 li span,#comment2 li span{
    width: 85px;
    float: left;
    height: 32px;
    font-size: 14px;
    text-align: center;
    line-height: 30px;
    color: #737373;
    border-bottom: 1px solid #eef6fd;
}

JS

	window.onload = roll(50);
    function roll(t) {
        var ul1 = document.getElementById("comment1");
        var ul2 = document.getElementById("comment2");
        var ulbox = document.getElementById("realTimeData_box");
        ul2.innerHTML = ul1.innerHTML;
        ulbox.scrollTop = 0; // 开始无滚动时设为0
        var timer = setInterval(rollStart, t); // 设置定时器，参数t用在这为间隔时间（单位毫秒），参数t越小，滚动速度越快
        // 鼠标移入div时暂停滚动
        ulbox.onmouseover = function () {
            clearInterval(timer);
        };
        // 鼠标移出div后继续滚动
        ulbox.onmouseout = function () {
            timer = setInterval(rollStart, t);
        }
    }
    // 开始滚动函数
    function rollStart() {
        // 上面声明的DOM对象为局部对象需要再次声明
        var ul1 = document.getElementById("comment1");
        var ul2 = document.getElementById("comment2");
        var ulbox = document.getElementById("realTimeData_box");
        // 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0
        if (ulbox.scrollTop >= ul1.scrollHeight) {
            ulbox.scrollTop = 0;
        } else {
            ulbox.scrollTop++;
        }
    }