js实现时间滚动
实现时间滚动的方法
使用requestAnimationFrame实现平滑滚动
通过requestAnimationFrame实现平滑的时间滚动效果，适用于需要动态更新时间的场景。
let startTime = Date.now();
function updateTime() {
const currentTime = Date.now();
const elapsed = currentTime - startTime;
document.getElementById('time-display').textContent = new Date(elapsed).toISOString().substr(11, 8);
requestAnimationFrame(updateTime);
}
updateTime();使用CSS动画实现视觉滚动
结合CSS的@keyframes和transform属性创建视觉上的时间滚动效果。
.time-roller {
animation: scrollTime 10s linear infinite;
}
@keyframes scrollTime {
from { transform: translateY(0); }
to { transform: translateY(-100%); }
}基于setInterval的定时更新
通过定时器实现时间数字的递增效果，适合需要显示秒数变化的场景。
let seconds = 0;
setInterval(() => {
seconds++;
document.getElementById('counter').textContent =
`${Math.floor(seconds/3600)}:${Math.floor(seconds/60)%60}:${seconds%60}`;
}, 1000);使用Web API的IntersectionObserver
当时间元素进入视口时触发滚动动画，实现懒加载式的时间滚动效果。
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animate-time');
}
});
});
document.querySelectorAll('.time-element').forEach(el => observer.observe(el));实现日期选择器的滚动效果
创建自定义日期选择器时，通过触摸事件实现月份/年份的滚动选择。
const picker = document.getElementById('date-picker');
let startY;
picker.addEventListener('touchstart', (e) => {
startY = e.touches[0].clientY;
});
picker.addEventListener('touchmove', (e) => {
const deltaY = e.touches[0].clientY - startY;
picker.scrollTop -= deltaY;
startY = e.touches[0].clientY;
});使用第三方库实现高级效果
对于复杂的时间轴滚动需求，可以考虑使用专用库如：
fullPage.js实现全屏时间轴滚动ScrollMagic实现基于滚动的动画触发Day.js或Moment.js处理时间格式转换
性能优化注意事项
避免在滚动事件中直接进行DOM操作，建议使用requestAnimationFrame进行节流处理。对于移动端设备，注意添加passive: true的事件监听器选项以提高滚动性能。
