您的位置：首页 > 其它

无缝滚动原理与具体实现

2015-12-08 22:46 295 查看

前提：

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航