禁用滚动文字选中变色需对滚动容器设置user-select: none；若含可交互子元素须单独设auto；marquee标签需外层包裹并设样式，不可直接作用于marquee自身。

滚动文字被选中变色是浏览器默认行为

HTML5 中用 <marquee> 或 CSS animation 实现的滚动文字，只要内容可聚焦、可交互（比如在文本节点里），用户鼠标拖拽或双击就可能触发选中态，背景色随之变蓝（或其他系统高亮色）。这不是 bug，是浏览器对可选中文本的正常响应。

禁用它的核心思路不是“阻止滚动”，而是“告诉浏览器这段文字不参与用户选中”：

• user-select: none 是最直接有效的 CSS 属性，兼容现代所有主流浏览器（Chrome 54+、Firefox 69+、Safari 15.4+、Edge 79+）
• 必须作用于滚动容器本身（如 <div class="scroll-text">），而不是其父级或子级文本节点
• 如果用了 <marquee> 标签（已废弃但仍有使用），它内部文本无法通过 CSS 继承 user-select，得额外加一层包裹并设样式

给滚动容器加 user-select: none 就够了

多数场景下，一行 CSS 就能解决。重点在于加在哪、怎么写：

Wjs Localizing Video

用于端到端视频本地化流程的轻量编排器，路由至四个专注子技能——/wjs-transcribing-audio、/wjs-translating-subtitles...

下载

• 推荐写在滚动元素的类选择器里，例如：

  .scroll-text { user-select: none; }

• 不要只写 -webkit-user-select: none —— 现代浏览器已不需要前缀，单写标准属性更简洁可靠
• 如果滚动区域还包含按钮、输入框等需交互的子元素，它们会继承 none，导致无法点击/输入；此时要单独重置：

  .scroll-text input, .scroll-text button { user-select: auto; }

用 <marquee> 时容易漏掉包裹层

<marquee> 是内联替换元素，内部文本不响应父级的 user-select，直接写 <marquee style="user-select:none">文字</marquee> 无效。

立即学习“前端免费学习笔记（深入）”；

• 必须在外层包一个 <div> 或 <span>，把样式加在包裹层上
• 示例结构：

  <div class="marquee-wrapper">
    <marquee>正在滚动的文字</marquee>
  </div>

• 对应 CSS：

  .marquee-wrapper { user-select: none; }

• 注意：部分旧版 Safari 对 <marquee> 内部文本的选中控制不稳定，优先改用 CSS 动画方案

禁用选中后要注意的交互退化

user-select: none 本质是移除文本的可选性，但它不影响 focus、click、pointer-events，所以视觉上“点不动”往往另有原因。

• 如果点击失效，先检查是否误加了 pointer-events: none 或 opacity: 0 类似干扰样式
• 双击缩放（iOS Safari）、长按复制（Android）也会被一并禁用，若产品需要保留这些能力，就不能全局关选中，得改用 JS 拦截 selectstart 事件（不推荐，兼容性和维护成本高）
• 无障碍方面：user-select: none 不影响屏幕阅读器读取文本，但会阻止键盘用户用 Shift+方向键选中文本——这对纯展示型滚动字幕通常无影响

真正要小心的是“以为加了就万事大吉”，结果发现子元素交互失灵，或者在某个 iOS 版本里依然能双击出光标。多在真机上点两下，比看文档管用。