カスタムスクロールバー効果を実現するJavaScript

React をインポートします。{ コンポーネント } から 'react' をインポートします。
'prop-types' から PropTypes をインポートします。
'../css/scrollbar.css' をインポートします。

定数propTypes = {
  イベントバス: PropTypes.object.isRequired、
};

クラスScrollBarはComponentを拡張します{

  コンストラクタ(props) {
    スーパー(小道具);
    この状態 = {
      ドラッグ中: false、
      // X: 下部スクロールバーの左オフセット、範囲 [0, innerWidth - 100]。ドラッグすると、x は変化します
      x: ヌル、
      // clickX は、スクロール バーをドラッグするときのスクロール バーの左側からマウスのクリック位置までの距離を示します。範囲は [0, 100] です。ドラッグすると、clickX は変化しません。
      クリックX: 0,
    };
  }

  コンポーネントマウント() {
    this.unsubscribeScrollToColumn = this.props.eventBus.subscribe('set-scrollbar-left', this.setScrollBarLeft);
    document.addEventListener('mouseup', this.onMouseUp);
  }

  コンポーネントのマウントを解除します（）{
    this.unsubscribeScrollToColumn();
    document.removeEventListener('mouseup', this.onMouseUp);
  }

  /**
   * この関数はリンクを処理します (インターフェイスがスクロールすると、スクロールバーがスクロールします)。ここで 100 はスクロールバーの幅です */
  setScrollBarLeft = (左比率) => {
    // 下のスクロールバーがドラッグされている場合、スクロールバーを左に設定できません
    if (this.state.isDraging) が return;
    this.setState({
      x: (window.innerWidth - 100) * 左比率、
    });
  }

  /**
   * マウスが押されるとドラッグを開始し、現在の位置を最初のドラッグ位置に設定します*/
  ハンドルマウスダウン = (e) => {
    this.setState({
      ドラッグ中: true、
      クリックX: e.nativeEvent.offsetX、
    });
  }

  /**
   * マウスを離したらドラッグを止めて現在のクリック位置を 0 に設定します (これは必要ですか?)
   */
  マウスを離すと () => {
    if (this.state.isDraging) {
      タイムアウトを設定する(() => {
        this.setState({ isDraging: false, clickX: 0 });
      }, 100);
    }
  }

  /**
   * ドラッグ時（マウスが押されて動き始める）に、現在の変位を取得し、新しいオフセットを計算します * 注: 右にスクロールすることも、左にスクロールすることもできます * ドラッグ時には、現在の比率を計算し、グリッドを水平方向にスクロールする必要があります * 現在の問題は、ドラッグ中にマウスがスクロールバーの外側に移動すると、ドラッグをトリガーできないことです * */ 
  onMouseMove = (e) => {
    e.persist();
    if (this.state.isDraging) {
      // 新しい距離 = 元の距離 + (現在のスクロール距離 - 初期スクロール距離)
      newX = this.state.x + e.nativeEvent.offsetX - this.state.clickX とします。
      newX = Math.min(newX, window.innerWidth - 100); // 最大ドラッグは右の境界を超えることはできません this.setState({ x: newX });
      定数 leftRatio = newX / (window.innerWidth - 100);
    }
  }

  レンダリングボトムツールバー = () => {
    戻る （
      <div
        className="antiscroll-scrollbar antiscroll-scrollbar-horizo​​ntal antiscroll-scrollbar-shown"
        スタイル={{transform: `translateX(${this.state.x}px)`}}
        ドラッグ可能="true"
        onMouseDown={this.handleMouseDown}
        onMouseMove = {this.onMouseMove}
        onMouseUp={this.onMouseUp}
      </div>
    );
  }

  // todo: rightToolbar イベント ハンドル
  レンダリング右ツールバー = () => {
    戻る （
      <div
        className="アンチスクロールバー アンチスクロールバー垂直 アンチスクロールバー表示"
      </div>
    );
  }

  与える（） {
    戻る （
      <div id="scrollOverlay" className="antiscroll-wrap">
        {this.renderBottomToolbar()}
        {this.renderRightToolbar()}
      </div>
    );
  }
}

スクロールバー.propTypes = propTypes;

デフォルトのScrollBarをエクスポートします。

#スクロールオーバーレイ{
  表示: インラインブロック;
  オーバーフロー: 非表示;
  位置: 固定;
  左: 0;
  右: 0;
  上: 156px;
  下部: 0;
  zインデックス: 4;
  ポインタイベント: なし;
  不透明度: .7;
}

#スクロールオーバーレイ .antiscroll-scrollbar {
  ポインタイベント: 自動;
  zインデックス: 2;
  背景色: hsla(0,0%,0%,0.28);
  ボックスシャドウ: インセット 0 0 0 1px hsl(0,0%,100%);
  境界線の半径: 5px;
}

#スクロールオーバーレイ .antiscroll-スクロールバー-水平 {
  高さ: 12px;
  幅: 100ピクセル;
  位置: 絶対;
  下: 32px;
}

#スクロールオーバーレイ .antiscroll-スクロールバー-垂直 {
  幅: 12px;
  高さ: 100px;
  位置: 絶対;
  右: 0;
}

/* 元のスクロールオブジェクトのスクロールバーを非表示にする */
.react-demo::-webkit-スクロールバー{
  幅: 0;
}

'../components/scrollbar' から ScrollBar をインポートします。

// グリッドネイティブスクロール、コールバック関数をトリガー onScroll = () => {
  // todo: clientWidth が innerWidth より小さい場合は、下部のスクロールバーを表示しない
  scrollLeftRatio を this._scrollLeft / (clientWidth - window.innerWidth) とします。
  // ネイティブ DOM が左または右にスクロールすると、現在のスクロール比率 (オフセット/合計幅) を取得し、スクロールするスクロール バーを設定します。this.setScrollLeftRatio(scrollLeftRatio);
}

setScrollLeftRatio = (スクロール左比率) => {
  this.props.eventBus.dispatch('set-scrollbar-left', scrollLeftRatio);
}

// 元のスクロール要素では、イベント値の処理を容易にするために eventBus を渡します // <ScrollBar eventBus={this.props.eventBus}/>