js实现无缝滚动代码
实现无缝滚动的JavaScript代码
无缝滚动通常用于轮播图或新闻列表等场景，通过循环滚动内容实现无限播放效果。以下是两种常见的实现方式：
使用CSS动画结合JavaScript控制
// HTML结构示例
// <div class="scroll-container">
// <div class="scroll-content">需要滚动的内容</div>
// </div>
const container = document.querySelector('.scroll-container');
const content = document.querySelector('.scroll-content');
// 克隆内容实现无缝衔接
content.innerHTML += content.innerHTML;
let scrollPos = 0;
function autoScroll() {
scrollPos += 1;
if(scrollPos >= content.scrollWidth / 2) {
scrollPos = 0;
}
container.scrollLeft = scrollPos;
requestAnimationFrame(autoScroll);
}
autoScroll();使用transform实现性能更优的无缝滚动
const slider = document.querySelector('.slider');
const slides = document.querySelector('.slides');
const slideItems = document.querySelectorAll('.slide-item');
// 克隆第一组元素
slides.innerHTML += slides.innerHTML;
let currentPosition = 0;
const slideWidth = slideItems[0].offsetWidth;
const totalSlides = slideItems.length;
function animate() {
currentPosition -= 1;
if(Math.abs(currentPosition) >= slideWidth * totalSlides / 2) {
currentPosition = 0;
}
slides.style.transform = `translateX(${currentPosition}px)`;
requestAnimationFrame(animate);
}
animate();关键实现要点
- 内容需要克隆一份追加到原有内容后面，当滚动到克隆部分时立即重置位置
- 使用requestAnimationFrame实现平滑动画，比setInterval性能更好
- 计算元素宽度时要考虑边框和padding的影响
- 对于水平滚动使用scrollLeft或transform: translateX
- 对于垂直滚动使用scrollTop或transform: translateY
响应式注意事项
窗口大小改变时需要重新计算元素尺寸：
window.addEventListener('resize', () => {
slideWidth = slideItems[0].offsetWidth;
});暂停和继续控制
可以通过标志位控制动画暂停：
let isPaused = false;
function toggleScroll() {
isPaused = !isPaused;
if(!isPaused) {
animate();
}
}
