js 列表自动上下滚动, 开始自顶向下,到底后向上滚动 ,周而复始；

我开心就好o

已于 2022-03-10 19:50:15 修改

阅读量2.3k

点赞数

分类专栏：昨天不是才上过班吗?怎么今天又要上班? 文章标签： javascript 前端列表自动滚动自动滚动列表 JS滚动列表

于 2021-12-30 20:15:15 首次发布

本文链接：https://blog.youkuaiyun.com/qq_39051175/article/details/122244482

版权

昨天不是才上过班吗?怎么今天又要上班? 专栏收录该内容

100 篇文章

订阅专栏

本文介绍如何使用HTML和JavaScript创建一个动态效果，使右侧黑色滚动条自动滚动，实现在#ptwarn父元素下的.warnMsg子元素内容间无缝切换，每隔1秒执行一次滚动操作。

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

如图右侧黑色滚动条. 让滚动条自动滚动的效果
在这里插入图片描述

HTML

<div id="ptwarn">
		<div class="warnMsg">
				内容
		</div>					
</div>

window.onload = function(params) {
	setTimeout(function() {
		autoScroll('#ptwarn','.warnMsg')  //参数1是 需要上下移动内容的父元素   参数2 是 该父元素下的每个子元素; 参考上面的html即可
	}, 1000);
}



function autoScroll(father,children) {
	let isreset = false,
		scrollItem = $(father), //需要上下移动内容的父元素
		scrollItemchildren = 50, //每次移动的距离
		scrollTimeTnterval = 2000,  //滚动间隔, 单位毫秒      必须大于下面的 滚动动画的持续时间(超过的多一点好)  !!!!!!  否则会越滚越慢 (  $(father).scrollTop() 会慢慢变小的BUG )
		scrollAnimateTime = 1500,  //滚动动画的持续时间, 毫秒
 		istoBottom = true,
		innerHeight = $(father).innerHeight();

	function time() {
		if (isreset) {
			isreset = false;
			return
		}
		let a = scrollItem.scrollTop();
		// console.log(a,scrollItemchildren,scroll,istoBottom)
		if (istoBottom) {
			scrollItem.animate({
				scrollTop: a + scrollItemchildren
			}, scrollAnimateTime,'linear'); //滚动动画时间
		} else {
			scrollItem.animate({
				scrollTop: a - scrollItemchildren
			}, scrollAnimateTime,'linear'); //滚动动画时间
		}

		if (istoBottom) {
			if(scrollItem.scrollTop() + innerHeight >= $(father).prop("scrollHeight")){ 
				// console.log('到底了',scrollItem.scrollTop())
				isreset = true;
				istoBottom = false;
			}
		} else {
			if (scrollItem.scrollTop() <= 0) {
				// console.log('到顶了',scrollItem.scrollTop())
				istoBottom = true;
			}
		}
	}
	
	let sItval = setInterval(time, scrollTimeTnterval); //多久滚动一次


 // 下面这个有BUG , 等我有空在修复,  鼠标移上去会让定时器变快
	// scrollItem.mouseenter(function(a) {
	// 	sItval = clearInterval(sItval);
	// })
	// scrollItem.mouseleave(function(a) {
	// 	 clearInterval(sItval);
	// 		sItval = setInterval(time, 800);
		
	// })
}