下面是一个使用原生JavaScript实现无间缝滚动的简单示例。这个示例中，我们将创建一个包含多个子元素的容器，并让这些子元素在水平方向上无间缝滚动。
HTML部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>无缝滚动示例</title>
<style>
#scrollContainer {
width: 100%;
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
}
.scrollItem {
display: inline-block;
width: 100px; /* 假设每个滚动项宽度为100px */
height: 100px; /* 假设每个滚动项高度为100px */
background-color: lightblue;
margin-right: 10px; /* 间隔 */
text-align: center;
line-height: 100px; /* 垂直居中 */
}
</style>
</head>
<body>
<div id="scrollContainer">
<div class="scrollItem">1</div>
<div class="scrollItem">2</div>
<div class="scrollItem">3</div>
<!-- 复制前面的元素以实现无缝滚动 -->
<div class="scrollItem">1</div>
<div class="scrollItem">2</div>
<div class="scrollItem">3</div>
</div>
<script>
// JavaScript代码将放在这里
</script>
</body>
</html>
JavaScript部分：
document.addEventListener('DOMContentLoaded', function() {
const scrollContainer = document.getElementById('scrollContainer');
let scrollLeft = 0;
function scrollAnimation() {
// 计算滚动距离，确保无缝
const totalWidth = scrollContainer.scrollWidth - scrollContainer.clientWidth;
if (scrollLeft >= totalWidth) {
scrollLeft = 0; // 重置滚动位置
}
scrollContainer.scrollLeft += 1; // 每次滚动1px
scrollLeft = scrollContainer.scrollLeft;
// 使用requestAnimationFrame来平滑滚动
requestAnimationFrame(scrollAnimation);
}
// 开始滚动
scrollAnimation();
});
在这个示例中，我们创建了一个`#scrollContainer`容器，里面放置了若干`.scrollItem`元素，并在末尾复制了前面的元素以实现无缝滚动。JavaScript部分通过`requestAnimationFrame`函数来不断改变`#scrollContainer`的`scrollLeft`属性，从而实现平滑的无缝滚动效果。
请注意，这个示例是基于水平滚动的。如果你需要垂直滚动，可以相应地调整CSS和JavaScript代码。