js实现通知滚动
实现通知滚动的方法
使用JavaScript实现通知滚动可以通过多种方式完成，以下介绍几种常见的方法：
使用CSS动画和JavaScript控制
通过CSS的@keyframes定义滚动动画，JavaScript动态添加内容到滚动容器中。示例代码：
<div class="notification-scroll" id="notificationContainer"></div>.notification-scroll {
overflow: hidden;
white-space: nowrap;
animation: scroll 10s linear infinite;
}
@keyframes scroll {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}const container = document.getElementById('notificationContainer');
container.textContent = '这是一条滚动通知内容，可以动态更新';使用setInterval实现手动滚动
通过定时器不断更新元素的scrollLeft属性实现滚动效果：
const element = document.getElementById('notificationContainer');
let scrollPos = 0;
setInterval(() => {
scrollPos += 1;
element.scrollLeft = scrollPos;
if (scrollPos >= element.scrollWidth - element.clientWidth) {
scrollPos = 0;
}
}, 20);使用Marquee标签（不推荐但简单）
HTML原生提供了<marquee>标签，虽然已废弃但某些场景仍可使用：
<marquee behavior="scroll" direction="left">
这是一条简单的滚动通知
</marquee>使用第三方库
考虑使用专门的通知库如Notyf或Toastr，它们内置了动画效果：
import { Notyf } from 'notyf';
const notyf = new Notyf({
duration: 3000,
position: {
x: 'right',
y: 'top',
},
ripple: true
});
notyf.success('这是一条会消失的通知');实现无限循环滚动
对于需要无限循环的通知列表，可以采用克隆节点的方式：
const container = document.getElementById('notificationContainer');
const content = container.innerHTML;
container.innerHTML += content;
function scroll() {
if (container.scrollLeft >= container.scrollWidth / 2) {
container.scrollLeft = 0;
} else {
container.scrollLeft += 1;
}
requestAnimationFrame(scroll);
}
scroll();响应式设计考虑
为确保在不同屏幕尺寸下正常显示，需要添加CSS媒体查询：
@media (max-width: 768px) {
.notification-scroll {
font-size: 14px;
animation-duration: 15s;
}
}
