JavaScript zum Erzielen eines benutzerdefinierten Bildlaufleisteneffekts

importiere React, {Komponente} von „react“;
PropTypes aus „Prop-Types“ importieren;
importiere '../css/scrollbar.css';

const propTypes = {
  eventBus: PropTypes.object.isterforderlich,
};

Klasse ScrollBar erweitert Komponente {

  Konstruktor(Requisiten) {
    super(Requisiten);
    dieser.Zustand = {
      isDraging: false,
      // X: unterer Scrollbar-Offset nach links, Bereich [0, innere Breite - 100]. Beim Ziehen ändert sich x
      x: null,
      // clickX gibt den Abstand von der linken Seite der Bildlaufleiste zur Mausklickposition beim Ziehen der Bildlaufleiste an, Bereich [0, 100], beim Ziehen ändert sich clickX nicht
      KlickX: 0,
    };
  }

  componentDidMount() {
    this.unsubscribeScrollToColumn = this.props.eventBus.subscribe('set-scrollbar-left', this.setScrollBarLeft);
    document.addEventListener('mouseup', this.onMouseUp);
  }

  componentWillUnmount() {
    this.unsubscribeScrollToColumn();
    Dokument.removeEventListener('mouseup', this.onMouseUp);
  }

  /**
   * Diese Funktion behandelt die Verknüpfung (wenn die Schnittstelle scrollt, löst sie das Scrollen der Bildlaufleiste aus). Hier ist 100 die Breite der Bildlaufleiste*/
  setScrollBarLeft = (leftRatio) => {
    // Wenn die untere Bildlaufleiste gezogen wird, kann die Bildlaufleiste nicht nach links gesetzt werden
    wenn (dieser.Zustand.istDraging) return;
    dies.setState({
      x: (Fenster.innereBreite - 100) * linkesVerhältnis,
    });
  }

  /**
   * Wenn die Maus gedrückt ist, beginnen Sie mit dem Ziehen und setzen Sie die aktuelle Position auf die anfängliche Ziehposition*/
  handleMouseDown = (e) => {
    dies.setState({
      isDraging: wahr,
      clickX: e.nativeEvent.offsetX,
    });
  }

  /**
   * Wenn die Maus angehoben wird, beenden Sie das Ziehen und setzen Sie die aktuelle Klickposition auf 0 (ist das notwendig?)
   */
  beiMausHoch = () => {
    wenn (dieser.Zustand.istZiehen) {
      setzeTimeout(() => {
        this.setState({ isDraging: false, clickX: 0 });
      }, 100);
    }
  }

  /**
   * Beim Ziehen (Maus wird gedrückt und beginnt sich zu bewegen) wird die aktuelle Verschiebung abgerufen und der neue Versatz berechnet. * Hinweis: Sie können nach rechts und nach links scrollen. * Beim Ziehen sollte das aktuelle Verhältnis berechnet werden, und dann scrollt das Raster horizontal. * Das aktuelle Problem besteht darin, dass das Ziehen nicht ausgelöst werden kann, wenn sich die Maus beim Ziehen außerhalb der Bildlaufleiste bewegt. * */ 
  beiMausbewegung = (e) => {
    e.persistent();
    wenn (dieser.Zustand.istZiehen) {
      // Neue Distanz = ursprüngliche Distanz + (aktuelle Scrolldistanz - anfängliche Scrolldistanz)
      lass newX = dieser.Zustand.x + e.nativeEvent.offsetX - dieser.Zustand.klickX;
      newX = Math.min(newX, window.innerWidth - 100); // Der maximale Widerstand darf die rechte Grenze nicht überschreiten this.setState({ x: newX });
      const leftRatio = newX / (Fenster.innereWidth - 100);
    }
  }

  renderBottomToolbar = () => {
    zurückkehren (
      <div
        Klassenname = "Antiscroll-Bildlaufleiste, Antiscroll-Bildlaufleiste-horizontal, Antiscroll-Bildlaufleiste-angezeigt"
        Stil = {{transform: `translateX(${this.state.x}px)`}}
        ziehbar="true"
        beiMouseDown={this.handleMouseDown}
        beiMouseMove={this.onMouseMove}
        beiMouseUp={diese.beiMouseUp}
      ></div>
    );
  }

  // todo: rightToolbar-Ereignis-Handle
  renderRightToolbar = () => {
    zurückkehren (
      <div
        Klassenname = "Antiscroll-Bildlaufleiste, Antiscroll-Bildlaufleiste vertikal, Antiscroll-Bildlaufleiste angezeigt"
      ></div>
    );
  }

  rendern() {
    zurückkehren (
      <div id="scrollOverlay" className="antiscroll-wrap">
        {this.renderBottomToolbar()}
        {this.renderRightToolbar()}
      </div>
    );
  }
}

ScrollBar.propTypes = propTypes;

Standard-ScrollBar exportieren;

#scrollOverlay {
  Anzeige: Inline-Block;
  Überlauf: versteckt;
  Position: fest;
  links: 0;
  rechts: 0;
  oben: 156px;
  unten: 0;
  Z-Index: 4;
  Zeigerereignisse: keine;
  Deckkraft: .7;
}

#scrollOverlay .antiscroll-scrollbar {
  Zeigerereignisse: auto;
  Z-Index: 2;
  Hintergrundfarbe: hsla (0,0 %, 0 %, 0,28);
  Box-Shadow: Einschub 0 0 0 1px hsl(0,0%,100%);
  Rahmenradius: 5px;
}

#scrollOverlay .antiscroll-scrollbar-horizontal {
  Höhe: 12px;
  Breite: 100px;
  Position: absolut;
  unten: 32px;
}

#scrollOverlay .antiscroll-scrollbar-vertical {
  Breite: 12px;
  Höhe: 100px;
  Position: absolut;
  rechts: 0;
}

/* Blende die Bildlaufleiste des ursprünglichen Bildlaufobjekts aus */
.react-demo::-webkit-scrollbar {
  Breite: 0;
}

Importiere ScrollBar aus „../components/scrollbar“.

// Rasternatives Scrollen, Auslösen der Callback-Funktion onScroll = () => {
  // zu erledigen: Wenn die Clientbreite kleiner als die Innenbreite ist, untere Scrollleiste nicht anzeigen
  let scrollLeftRatio = this._scrollLeft / (Clientbreite - Fensterbreite);
  // Wenn das native DOM nach links oder rechts scrollt, holen Sie sich das aktuelle Scroll-Verhältnis (Offset/Gesamtbreite) und stellen Sie die Bildlaufleiste auf Scrollen ein. this.setScrollLeftRatio(scrollLeftRatio);
}

setScrollLeftRatio = (scrollLeftRatio) => {
  this.props.eventBus.dispatch('set-scrollbar-left', scrollLeftRatio);
}

// Übergeben Sie im ursprünglichen Bildlaufelement eventBus, um die Verarbeitung von Ereigniswerten zu erleichtern // <ScrollBar eventBus={this.props.eventBus}/>