Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

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

オープン
  • 何か問題がありますか？
#261 コメント 6 件 リアクション 3 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
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
平均マージ
14日 12時間
マージ済み PR（30日）
3

環境構築

このプロジェクトの環境構築ファイルはまだ確認していません。まず README を読み、一般的な手順ははじめてのコントリビューションガイドを参照してください。

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

react-component/util のほかの issue

react-component/util の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。