Firefox中pointer-events:none导致滚动条无法点击的解决方案咨询

针对你遇到的tooltip被截断、点击区域失效、Firefox滚动条无响应的连锁问题，以下是几个经过验证的可行方案：

方案一：分离Tooltip与滚动容器（推荐） #

核心思路是让Tooltip脱离滚动容器的约束，从根源避免overflow裁剪和pointer-events冲突：

• 把Tooltip的DOM结构放在滚动容器外部（比如直接挂载在<body>下），初始设置为position: absolute; display: none; z-index: 999；
• 滚动容器正常设置overflow: auto，内部放置可点击元素；
• 通过JavaScript监听可点击元素的mouseenter/click事件，用getBoundingClientRect()获取元素的视口坐标，动态计算并设置Tooltip的top/left值后显示；
• 监听mouseleave事件隐藏Tooltip。

该方案兼容所有主流浏览器，完全规避了容器裁剪和交互冲突问题。

方案二：用clip-path替代overflow实现裁剪 #

如果Tooltip必须嵌套在滚动容器内，可通过clip-path替代overflow: auto实现内容裁剪，同时允许Tooltip突破裁剪范围：

• 滚动容器不设置overflow属性；
• 在滚动容器内部创建内容容器，设置height: 100%; overflow: auto，并给内容容器添加clip-path: inset(0 0 0 0)（可根据布局调整裁剪区域的上下左右值）；
• 将Tooltip放在滚动容器内、内容容器外，既不会被clip-path裁剪，也不影响内容容器的滚动条和内部元素的点击交互。

方案三：Firefox滚动条兼容补丁（针对pointer-events方案） #

如果坚持使用pointer-events: none的原有方案，可通过Firefox专属CSS修复滚动条点击问题：

/* Firefox专属滚动条交互修复 */
@-moz-document url-prefix() {
  .scroll-sidebar {
    pointer-events: auto;
  }
  .scroll-sidebar .tooltip {
    pointer-events: none;
  }
  .scroll-sidebar .clickable-item {
    pointer-events: auto;
  }
}

原理：在Firefox中让滚动容器本身恢复pointer-events: auto，单独给Tooltip保留none避免遮挡点击，同时给可点击元素明确设置auto，既解决滚动条无法点击的问题，又保留tooltip和点击区域的正常功能。

内容的提问来源于stack exchange，提问作者Sharcoux