<div id="scroll">
    <div id="con1">
        <p style="color: red;">文字1111111</p>
        <p>文字22222</p>
        <p>文字33333</p>
        <p>文字44444</p>
        <p>文字55555</p>
        <p>文字66666</p>
        <p>文字77777</p>
        <p>文字88888</p>
        <p>文字99999</p>
        <p>文字101010</p>
    </div>
    <div id="con2"></div>
</div>
<style>
#scroll{
    width: 300px;
    height: 210px; /*这个高度要保证小于等于con1的高度*/
    overflow: hidden;
}
</style>


<script>
        var time = 60; // 滚动间隙
        var box = document.getElementById('scroll'); // 获取父元素
        var con1 = document.getElementById('con1');
        var con2 = document.getElementById('con2');
        con2.innerHTML = con1.innerHTML;
        function Up() {
            if (box.scrollTop >= con1.offsetHeight) {
                box.scrollTop = 0;
            } else {
                box.scrollTop+=1;
            }

        }
        var setlId = setInterval(Up, time);
        //鼠标移上父元素时清除定时器
        box.onmouseover = function() {
                clearInterval(setlId);
            }
            //鼠标离开父元素时触发事件
        box.onmouseout = function() {
            setlId = setInterval(Up, time);
        }
</script>