getScrollBarSize.tsx 中的方法getTargetScrollBarSize在Firefox 52.9及其以前版本中报错“NS_ERROR_NOT_AVAILABLE”

未关闭
#261 6 条评论 3 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

评估

难度
3/5
预计耗时
1-2 天
新手友好度
35/100
Issue 类型
缺陷
描述清晰度
基本清楚
活跃度
停滞
技术栈
typescript
领域
frontend

调研方向

从 src/getScrollBarSize.tsx 中的 getTargetScrollBarSize 开始，重点检查使用 ::-webkit-scrollbar 伪元素的 getComputedStyle 调用。在 Firefox 52.9 ESR 或更早版本中复现该问题，并检查现有的 ensureSize 路径。完成的标准是旧版 Firefox 错误不再发生，同时滚动条的宽度和高度仍可供调用方使用。

由索引模型根据 Issue 内容生成。

描述

2021.5.20的更新中加入的片段

环境：
windows xp 32位
firefox 52.9 esr 32位

Ref: https://github.com/react-component/util/blob/88be0cbf06d5190d5baa21fcfa9b36977a3796fd/src/getScrollBarSize.tsx#L57

function ensureSize(str: string) {
  const match = str.match(/^(.*)px$/);
  const value = Number(match?.[1]);
  return Number.isNaN(value) ? getScrollBarSize() : value;
}

export function getTargetScrollBarSize(target: HTMLElement) {
  if (typeof document === 'undefined' || !target) {
    return { width: 0, height: 0 };
  }

  const { width, height } = getComputedStyle(target, '::-webkit-scrollbar');  // 此行在Firefox中提示错误
  return {
    width: ensureSize(width),
    height: ensureSize(height),
  };
}

在firefox52.9（32位）及其以前版本（测试了51\47\46）会提示**"NS_ERROR_NOT_AVAILABLE"**的错误。
我想应该是getComputedStyle返回的CSSStyleDeclaration对象（浏览器中显示CSS2Properties）不可访问导致的。
如何修正这个问题？

主要语言
TypeScript
星标
670
派生
205
平均合并
15 天 17 小时
30 天内合并 PR
6

贡献指南

这个仓库没有索引到贡献指南

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

react-component/util 的其他 Issue

查看 react-component/util 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。