js 实现列表向上无限滚动新闻列表

最新推荐文章于 2024-08-24 08:58:17 发布

路西

最新推荐文章于 2024-08-24 08:58:17 发布

阅读量622

点赞数 1

文章标签： html 列表 javascript dom

本文链接：https://blog.csdn.net/weixin_43720534/article/details/109164177

版权

效果展示

（鼠标移入，滚动停止；鼠标移出，滚动继续）
在这里插入图片描述
html:>>

<div class="boxbig">
	<ul class="ul"></ul>
	<ul class="con"></ul>
</div>

css:>>

			* {
				 margin: 0;
				 padding: 0;
				 box-sizing: border-box;
			}

			.boxbig {
				overflow: hidden;
				border: 1px solid green;
				width: 200px;
				height: 200px;
				cursor: pointer;
			}

			li {
				list-style: none;
			}

			ul {
				list-style: none;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}

			body {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100vh;
			}

			li {
				font-size: 20px;
				letter-spacing: 4px;
				border-bottom: 1px solid green;
				margin: 5px 0;
			}

js:>>

const con = document.querySelector(".con")
const boxbig = document.querySelector(".boxbig")
const ul = document.querySelector(".ul")
let data = ['1111111', '22222222', '333333333', '33333333333', '555555555555', '122112122112']
let str = '',time = null
data.forEach(v => {
	str += `<li>${v}</li>`
})
ul.innerHTML = str

function scrollUp(speed) {
	if (ul.offsetHeight >= con.offsetHeight) {
	con.innerHTML = ul.innerHTML
	ime = setInterval(scrol, speed)
	boxbig.addEventListener('mouseover',()=>{
		clearInterval(time)
	})
	boxbig.addEventListener('mouseleave',()=>{
		time = setInterval(scrol, speed)
	})
					
	function scrol() {
		if (boxbig.scrollTop >= ul.scrollHeight) {
			boxbig.scrollTop = 0
		} else {
			boxbig.scrollTop++
		}
		if (boxbig.scrollTop % 25 == 0) {
			clearInterval(time)
			setTimeout(() => {
				time = setInterval(scrol, speed)
				}, 1)
			}
		}
	}
}
					
scrollUp(100)