JavaScript实现连续滚动

最新推荐文章于 2024-03-28 22:39:07 发布

qiujiaqun

最新推荐文章于 2024-03-28 22:39:07 发布

阅读量1.5k

点赞数 1

分类专栏：动态交互语言Ajax 文章标签： javascript function 文档 firefox 脚本 chrome

动态交互语言Ajax 专栏收录该内容

23 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的无缝连续滚动效果。该方法通过在滚动到内容尾部时将内容头部追加到尾部来避免空白期，同时解决了多次追加导致内存膨胀的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

灵活的无缝滚动，帖子：连续滚动

在经典论坛搜索“连续滚动”，有203条之多。叙述的问题大都是一样的，无论marquee还是用JavaScript模仿的类似滚动效果，当滚动到尾部的时候会出现一段真空期，也就是可见范围内看到了内容的尾巴，后面是一篇空白。而连续滚动就是要求不出现这种现象，当滚动到内容尾部的时候，紧接着出现文档开头的内容，出现头追尾巴的效果。

简单的看了一下以前的解决方案，基本上都是图片的连续滚动效果，或者说，需要在脚本中对元素具体的宽度和高度做出一些计算和判断，主要目的是拿元素宽度和当前已经滚动的距离做对比，从而做出一些文档结构上的改变。我希望能够写出一个适用于文本的、与所滚动的具体元素无关的无缝滚动效果。

刚开始想的时候想了很多方法，要么太复杂了，要么实现不了（以下省略半个多小时的痛苦过程），一点头绪也没有，不过最后灵光一现想到了一个非常“不错”的办法：

通常，我们滚动元素的时候都是使用element.scrollTop++的方法(横向滚动是scrollLeft)，当滚动到内容尾部的时候，我们会发现scrollTop由于“无内容可滚”而无法继续变大，从而可以判断出已经滚动到头。

我想到的方法就在这里，此时我们可以人为地让滚动容器的innerHTML+=innerHTML，这样内容的头部就接到了尾部，从而可以继续滚动，造成连续的视觉效果。测试了一下，基本完美。

但是这个看似“不错”的方法却有一个致命的缺陷，假设滚动时间较长或者是滚动速度较快，那么就会有多次“滚到头”的情况，每次滚到头都会让innerHTML*2，那么文档占用的内存会不断增大，尤其是滚动内容有大图片的时候。所以需要对脚本的性能做进一步的优化（其实是改正错误）。

思路如下：当我们复制了一次innerHTML之后，就已经有头尾相接的效果了，因此没有必要再修改文档结构了。此时只要重现“第一次滚到头”时候的效果就可以了。至于如何重现，只要在第一次到头的时候记录下来当前的scrollTop值，然后恢复这个值就可以了。效果如下：

连续滚动示例标题

实例新闻，可以添加任何想要滚动的内容。包括图片等等。

……

连续滚动示例标题

实例新闻，可以添加任何想要滚动的内容。包括图片等等。

……

在IE8，FireFox和Chrome下效果都不错，最终的JavaScript代码和注释如下：

<script type="text/javascript">
//添加事件响应函数的函数，与本效果无关
function addEventSimple(obj,evt,fn){
	if(obj.addEventListener){
		obj.addEventListener(evt,fn,false);
	}else if(obj.attachEvent){
		obj.attachEvent('on'+evt,fn);
	}
}
addEventSimple(window,'load',initScrolling);
//保存想要滚动的容器
var scrollingBox;
var scrollingInterval;
//用于记录是否“滚到头”过一次
var reachedBottom=false;
//记录第一次滚到头时候的scrollTop
var bottom;
//初始化滚动效果
function initScrolling(){
	scrollingBox = document.getElementById("scrollText");
	//样式设置，与滚动基本无关，应该用CSS设置。
	scrollingBox.style.height = "60px";
	scrollingBox.style.overflow = "hidden";
	//滚动
	scrollingInterval = setInterval("scrolling()",50);
	//鼠标划过停止滚动效果
	scrollingBox.onmouseover = over;
	//鼠标划出回复滚动效果
	scrollingBox.onmouseout = out;	
}
//滚动效果
function scrolling(){
	//开始滚动,origin是原来scrollTop
	var origin = scrollingBox.scrollTop++;
	//如果到头了
	if(origin == scrollingBox.scrollTop){
		//如果是第一次到头
		if(!reachedBottom){
			scrollingBox.innerHTML+=scrollingBox.innerHTML;
			reachedBottom=true;
			bottom=origin;
		}else{
			//已经到头过，只需回复头接尾的效果
			scrollingBox.scrollTop=bottom;
		}
	}
}
function over(){
	clearInterval(scrollingInterval);
}
function out(){
	scrollingInterval = setInterval("scrolling()",50);
}
</script>