无缝滚动原理与具体实现

来源：互联网发布：steam数据扫号编辑：程序博客网时间：2024/06/06 00:13

前提：
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

实现原理：
这里写图片描述

tab1与tab2是tab块里两个完全相同的子块，自然当tab高度无法容纳这两个块时，就会出现滚动条。
而我们要做的事情就是让滚动条自己移动。
这里写图片描述

如图滚动条往下，tab1一部分移出，tab2一部分移入，移出的a等于滚动条移动的距离b,这就是tab.scrollTop的值。可通过console.log(tab.scrollTop);查看。
同样建议用console.log(); 查看 .offsetTop / .offsetHeight 等。

这里写图片描述
当滚动条移动到底时，显然我没要吧滚动条置为最开始的位置！

     // tab.scrollTop = tab1.offsetHeight;            //tab.scrollTop = 0;

这两条语句都可管用（#smile#）

最后setInterval（）让函数一直循环，效果就出来了。
当然也可以加上一些mouseover滚动停止，mouseout滚动继续的效果。

详细代码：
这是向上滚动的例子，

<!doctype html><html><head>    <meta charset="utf-8">    <title>无缝滚动</title>    <style>*{    padding: 0;    margin: 0;}        #demo{     overflow: hidden;;     width: 50%;     height: 72px;     outline: solid 1px #000; } #demo1{//outline: solid 1px #e12;     //background-color: antiquewhite;}#demo2{ // outline:slateblue solid 1px        }    </style></head><body><div id="demo">    <div id="demo1">        <p>1</p>        <p>2</p>        <p>3</p>        <p>4</p>    </div>    <div id="demo2"></div></div><script>    <!--向上滚动 -->    var speed = 30;//滚动的速度    var tab = document.getElementById("demo");    var tab1 = document.getElementById("demo1");    var tab2 = document.getElementById("demo2");    tab2.innerHTML = tab1.innerHTML;    function Marquee(){        if(tab2.offsetTop - tab.scrollTop <= 0 ){//当滚动条到达可见视图框底部的时候            //console.log(tab.scrollTop);            //console.log(tab1.offsetHeight);建议观察            tab.scrollTop = tab1.offsetHeight;//此语句与下一条被注释的语句都是为了将滚动置为最初位置            //tab.scrollTop = 0;        }        else{            tab.scrollTop++;//滚动条往下移动        }    }    var MyMar = setInterval(Marquee,speed);    tab.onmouseover = function(){ clearInterval(MyMar)};//清除循环    tab.onmouseout =  function(){MyMar = setInterval(Marquee,speed)};//恢复循环</script></body></html>

向下滚动的话（两处变动）
1、

tab.scrollTop=tab.scrollHeight//将滚动条拉到底

2、

tab.scrollTop--;//滚动条往上移动

往左往右滚动则是变动 scrollTop offsetTop offsetHeight
top -> left
height -> width

github:https://github.com/screamingColor/mygit/blob/master/scrolling.html

0 0