已被HTML5废弃，现代方案用CSS @keyframes + overflow: hidden 实现无缝左滑滚动，兼容Jimdo、WordPress等平台，支持鼠标悬停暂停，无需JS依赖。
用
很多老教程还在教用 做新闻滚动，但现代浏览器（包括 Chrome、Edge、Safari 最新版）已不保证支持，Jimdo 等建站平台甚至直接禁用该标签。实际测试中， 在移动端常失效，且无法响应鼠标悬停暂停——这恰恰是新闻公告的核心交互需求。
替代方案必须满足三点：语义合规、CSS 可控、兼容主流 CMS 或静态站点。推荐用 @keyframes + overflow: hidden 组合实现无缝左滑，代码轻量、无 JS 依赖、可直接粘贴进 Jimdo 的“HTML 代码”模块或任意 HTML5 页面。
纯 CSS 实现单行新闻滚动，三步就能跑起来
下面这段代码在 2025 年底的 Jimdo Pro、WordPress 自定义 HTML 模块、甚至静态 HTML 文件中均验证通过：
关键点说明：
立即学习“前端免费学习笔记（深入）”；
-
animation时间值（如15s）越小滚动越快；若内容变长，需同步增大该值，否则会卡顿 - 所有
必须在同一行书写，换行会导致空格被渲染为可见间隙 - 若要鼠标悬停暂停，加一句
div:hover div { animation-play-state: paused; } - 不建议用
flex或grid替代inline-block，部分旧版 iOS Safari 对 flex 容器内动画支持不稳定
需要动态更新？绕开 JS，优先绑定数据库字段
手动改 HTML 代码维护成本高，尤其当网站已有 Jimdo 数据库、WordPress 自定义字段或 Headless CMS 后台时，硬编码滚动内容等于自找麻烦。
以 Jimdo 为例（Pro/Business 计划）：
- 新建一个名为
滚动公告的数据库，仅设一个公告文本字段（类型选“长文本”） - 在数据库里填入带分隔符的纯文本，例如：
【直播】19:00专家解读新《数据安全法》｜【征稿】2026年度行业白皮书启动征集｜ - 在 HTML 代码模块中直接写：
{{database:滚动公告:公告文本}}，Jimdo 会自动解析并注入内容
注意：该变量语法仅在 Jimdo 启用数据库功能且模板支持变量解析时生效；若用 WordPress，应改用 get_post_meta() 或 ACF 字段调用，而非拼接 JS 请求——避免跨域或 CSP 阻断。
滚动新闻加载更多？这不是“滚动”，是“无限加载”，得用 JS 控制
标题里说的“嵌入新闻列表”如果指带分页、点击跳转、图文混排的完整列表（非单行跑马灯），那本质是无限滚动（infinite scroll），和上面的 CSS 滚动不是一回事。
核心逻辑是监听容器 scroll 事件，判断是否接近底部再触发 AJAX 加载。参考代码片段：
$('#news-list').on('scroll', function() {
const $this = $(this);
if ($this.scrollTop() + $this.innerHeight() >= $this[0].scrollHeight - 50) {
if (!loading && page <= maxPage) {
loading = true;
$.get('/api/news?page=' + ++page, function(data) {
$('#news-list ul').append(data);
loading = false;
});
}
}
});容易忽略的坑：
- 没加
loading开关会导致快速滚动时重复请求，后端可能返回重复数据 -
maxPage必须由后端返回或预估，否则用户拉到底部会无限请求空数据 - 移动端 touch 事件需额外处理，
scroll在 iOS Safari 中有延迟，建议加{ passive: true }优化
真正难的不是让文字动起来，而是让“动”的节奏、内容来源、交互反馈三者对齐——滚动速度太快，用户读不完；太慢，显得卡顿；内容从数据库来，就得考虑字段长度限制和 XSS 过滤；鼠标悬停要暂停，但触摸屏没有 hover，得补上 touchstart/touchend 逻辑。这些细节，比写第一行 @keyframes 花的时间多得多。
