常用页面中上下无缝滚动效果

常用web页面中设置上下无限滚动效果；（左右滚动类同）

代码如下：

                                <div id="colee_left" class="news-right-cont" style="touch-action:none;height: 360px;overflow-y: hidden;">
                                    <ul id="colee_left1">
                                        <li>
                                            <h5>电泳涂装手动线设备</h5>
                                            <p>电泳涂装的电压，主要取决于电泳涂料的品种。另外，还......</p>
                                        </li>
                                        <li>
                                            <h5>电泳涂装手动线设备</h5>
                                            <p>电泳涂装的电压，主要取决于电泳涂料的品种。另外，还......</p>
                                        </li>
                                        <li>
                                            <h5>电泳涂装手动线设备</h5>
                                            <p>电泳涂装的电压，主要取决于电泳涂料的品种。另外，还......</p>
                                        </li>
                                        <li>
                                            <h5>电泳涂装手动线设备</h5>
                                            <p>电泳涂装的电压，主要取决于电泳涂料的品种。另外，还......</p>
                                        </li>
                                        <li>
                                            <h5>电泳涂装手动线设备</h5>
                                            <p>电泳涂装的电压，主要取决于电泳涂料的品种。另外，还......</p>
                                        </li>
                                        <li>
                                            <h5>电泳涂装手动线设备</h5>
                                            <p>电泳涂装的电压，主要取决于电泳涂料的品种。另外，还......</p>
                                        </li>
                                        <li>
                                            <h5>电泳涂装手动线设备</h5>
                                            <p>电泳涂装的电压，主要取决于电泳涂料的品种。另外，还......</p>
                                        </li>
                                        <li>
                                            <h5>电泳涂装手动线设备</h5>
                                            <p>电泳涂装的电压，主要取决于电泳涂料的品种。另外，还......</p>
                                        </li>
                                    </ul>
                                    <ul id="colee_left2"></ul>
                                </div>
                                <script>
                                    //使用div时，请保证colee_left2与colee_left1是在同一行上. 
                                    var speed = 30//速度数值越大速度越慢 
                                    var colee_left2 = document.getElementById("colee_left2");
                                    var colee_left1 = document.getElementById("colee_left1");
                                    var colee_left = document.getElementById("colee_left");
                                    colee_left2.innerHTML = colee_left1.innerHTML
                                    /**
                                     * offsetHeight // 可视高，
                                     * scrollTop // 上下滚动设置 顶部距离
                                     * offsetWidth // 可视宽
                                     * scrollleft // 左右滚动设置左右距离
                                     * */
                                    function Marquee3() {
                                        if (colee_left2.offsetHeight - colee_left.scrollTop <= 0)//offsetWidth 是对象的可见宽度 
                                            colee_left.scrollTop -= colee_left1.offsetHeight//scrollWidth 是对象的实际内容的宽，不包边线宽度 
                                        else {
                                            colee_left.scrollTop++
                                        }
                                    }
                                    var MyMar3 = setInterval(Marquee3, speed)
                                    colee_left.onmouseover = function () { clearInterval(MyMar3) }
                                    colee_left.onmouseout = function () { MyMar3 = setInterval(Marquee3, speed) }
                                </script> 

以上内容仅供参考；