React-window: CSS位置がスティッキーなグリッドヘッダーを修正

こんにちは@bvaughn 、

あなたはこのリクエストに本当にうんざりしていると思い、ここでのコメントによると、私はあなたが検討するのに十分な軽量の解決策があるかもしれないと思います。

このソリューションは、ブラウザーネイティブのスクロールを維持し、ScrollSync風の動作を必要とせず、 createGridComponentレンダリングメソッドにいくつかの変更を加えるだけで済みます。 ただし、IE11はサポートされていません。 ドキュメントで明示的に呼び出されている限り、これは問題ないと思います。

ここでデモを見ることができます： https ：

これは私がプロトタイプとしてローカルに持っているものです-これのPRに興味があるなら、いくつかのことがハードコーディングされているので、やらなければならないことが間違いなくあります。 私はここで仕事をすることができますが、いくつかのガイダンスをいただければ幸いです。

これを追加したくない場合は完全に理解しています-最悪の場合、この問題は少なくとも他の人のためのアプローチを文書化することができます。

私の変更の概要：

まず、 items生成するときに、行== 0と列== 0をスキップします（Math.max（）呼び出し）。 また、可視範囲のleftStickyItemsとtopStickyItemsにプッシュします。 ここでの変更はこれらだけです。

const items = [];
const topStickyItems = [];
const leftStickyItems = [];

if (columnCount > 0 && rowCount) {
  for (
    let columnIndex = Math.max(1, columnStartIndex); // Skip column 0
    columnIndex <= columnStopIndex;
    columnIndex++
  ) {
    topStickyItems.push(
      createElement(children, {
        columnIndex,
        data: itemData,
        isScrolling: useIsScrolling ? isScrolling : undefined,
        key: itemKey({ columnIndex, data: itemData, rowIndex: 0 }),
        rowIndex: 0,
        style: this._getItemStyle(0, columnIndex),
      })
    );
  }

  for (
    let rowIndex = Math.max(1, rowStartIndex); // Skip row 0
    rowIndex <= rowStopIndex;
    rowIndex++
  ) {
    // I'm leveraging this already existing loop, but this is probably
    // better as its own loop for clarity.
    leftStickyItems.push(
      createElement(children, {
        columnIndex: 0,
        data: itemData,
        isScrolling: useIsScrolling ? isScrolling : undefined,
        key: itemKey({ columnIndex: 0, data: itemData, rowIndex }),
        rowIndex,
        style: this._getItemStyle(rowIndex, 0),
      })
    );

    for (
      let columnIndex = Math.max(1, columnStartIndex); // Skip column 0
      columnIndex <= columnStopIndex;
      columnIndex++
    ) {
      items.push(
        createElement(children, {
          columnIndex,
          data: itemData,
          isScrolling: useIsScrolling ? isScrolling : undefined,
          key: itemKey({ columnIndex, data: itemData, rowIndex }),
          rowIndex,
          style: this._getItemStyle(rowIndex, columnIndex),
        })
      );
    }
  }
}

これらのアイテムを生成したら、return呼び出しの前に、スティッキーコンテナをitems配列に追加します。

const topLeftStyle = this._getItemStyle(0, 0);

items.unshift(
  createElement('div', {
    children: leftStickyItems,
    key: 'left-sticky',
    className: 'left-sticky',
    style: {
      height: estimatedTotalHeight,
      width: topLeftStyle.width,
      position: 'sticky',
      left: 0,
      zIndex: 1,
      transform: `translateY(-${topLeftStyle.height}px)`,
    },
  })
);

items.unshift(
  createElement('div', {
    children: topStickyItems,
    key: 'top-sticky',
    className: 'top-sticky',
    style: {
      height: topLeftStyle.height,
      width: estimatedTotalWidth,
      position: 'sticky',
      top: 0,
      zIndex: 1,
    },
  })
);

未解決の部分が1つあります-（0、0）位置。 グリッドの外側（左上の灰色のボックス）にレンダリングすることで、これを回避しました。 これは私のユースケースには問題ありませんが、このためのPRが必要な場合は、より良い解決策に値します。