js实现无缝滚动
实现无缝滚动的思路
无缝滚动的核心是通过动态调整内容位置或克隆元素，使内容在视觉上形成无限循环的效果。常见方法包括利用CSS动画、JavaScript动态计算或结合两者实现。
水平无缝滚动实现
通过克隆滚动内容并动态调整位置实现循环滚动效果。以下是一个基础实现示例：
const container = document.querySelector('.scroll-container');
const content = document.querySelector('.scroll-content');
const clone = content.cloneNode(true);
container.appendChild(clone);
let position = 0;
const speed = 2;
function animate() {
position -= speed;
if (position <= -content.offsetWidth) {
position = 0;
}
container.style.transform = `translateX(${position}px)`;
requestAnimationFrame(animate);
}
animate();垂直无缝滚动实现
修改Y轴坐标即可实现垂直方向滚动。关键点在于重置位置的判断条件：
let position = 0;
const speed = 1;
function animate() {
position -= speed;
if (position <= -content.offsetHeight) {
position = 0;
}
container.style.transform = `translateY(${position}px)`;
requestAnimationFrame(animate);
}使用CSS动画的简化方案
结合CSS动画可以降低JavaScript计算开销：
@keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.scroll-container {
animation: scroll 10s linear infinite;
}性能优化建议
- 使用
transform代替left/top属性变更，避免触发重排 - 对静态内容使用
will-change: transform提示浏览器优化 - 在移动端考虑使用
requestAnimationFrame的polyfill - 对于复杂内容，使用硬件加速：
transform: translateZ(0)
响应式处理
监听容器尺寸变化时需重新计算阈值：
const resizeObserver = new ResizeObserver(() => {
threshold = content.offsetWidth;
});
resizeObserver.observe(container);暂停与继续控制
通过操作动画状态实现交互控制：
let isPaused = false;
container.addEventListener('mouseenter', () => isPaused = true);
container.addEventListener('mouseleave', () => isPaused = false);
function animate() {
if (!isPaused) {
position -= speed;
// 位置计算逻辑
}
requestAnimationFrame(animate);
}
