原生消息轮播滚动

需求

  • 当消息超出内容区域时滚动显示

方法

  • 当消息内容超出总内容区域时添加一个与当前消息内容一摸一样的 dom 元素
  • 将总内容区域的 overflow 设置为 hidden，隐藏多余内容
  • 然后控制总内容区域的 scrollTop 来向上轮播
  • 然后当总内容区域的 scrollTop 大于第二个 dom 元素的 offsetTop
    • 证明第二个 dom 元素刚好滚动到第一个 dom 元素初始位置
  • 将总内容区域的 scrollTop 减去第一个元素的高度

扩展

offsetTop 距离上方或上层控件的位置，整型，单位像素
scrollTop 内容顶部（卷起来的）到它的视口可见内容（的顶部）的距离的度量
offsetHeight 一个元素的高度包括边框和填充，但不是边距

代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>消息滚动</title>
		<style type="text/css">
			#root {
				height: 100px;
				overflow: hidden;
			}

			ul {
				padding: 0;
				margin: 0;
			}

			.item {
				height: 20px;
			}
		</style>
	</head>

	<body>
		<div id="root">
			<ul class="content">
				<li class="item">
					滚动消息一
				</li>
				<li class="item">
					滚动消息二
				</li>
				<li class="item">
					滚动消息三
				</li>
				<li class="item">
					滚动消息四
				</li>
				<li class="item">
					滚动消息五
				</li>
				<li class="item">
					滚动消息六
				</li>
				<li class="item">
					滚动消息七
				</li>
			</ul>
		</div>
		<script>
		const root = document.getElementById('root'); // 获取外部容器
		console.log(root.offsetHeight,root.scrollTop)
		const content = document.getElementsByClassName('content')[0];  // 获取消息容器
		console.log(content.offsetHeight,content.scrollTop)
		const content2 = document.createElement("ul"); // 创建第二个消息内部容器
			setTimeout(() => {
				const speed = 80 // 速度
				// 当消息超出外部容器时
				if (root.offsetHeight < content.offsetHeight) {
					content2.innerHTML = content.innerHTML;
					root.append(content2);
				}

				function Marquee() {
					// content2.offsetTop 距离上方或上层控件的位置，整型，单位像素
					// root.scrollTop 内容顶部（卷起来的）到它的视口可见内容（的顶部）的距离的度量
					if (content2.offsetTop - root.scrollTop <= 0)
						root.scrollTop -= content.offsetHeight
					else {
						root.scrollTop++
					}
				}
				 setInterval(Marquee, speed)
			}, 1000)
		</script>
	</body>
</html>
posted @ 2021-07-08 14:37  懒惰ing  阅读(162)  评论(0)  编辑  收藏  举报