Reagieren, wie dynamische div Höhe an die Folgen der vollen Fensterhöhe einschließlich scroll

Mache ich ein reagieren redux app.

Meiner Ansicht nach größer als ich Elemente hinzufügen (oder kleiner, wie ich Sie entfernen zu lassen), aber ich kann nicht mein hintergrund zu Folgen richtig.

Ich habe versucht, mit scrollHeight, um zu bestimmen, die Größe sollte es haben :

https://i.imgur.com/HGHJgub.gifv

Hier ist mein code :

constructor(props) {
    super(props);
    this.state = {
        heightSet: 0,
    };
    this.updateDimensions = this.updateDimensions.bind(this);
}

componentDidMount() {
    this.updateDimensions();
    window.addEventListener('resize', this.updateDimensions);
}

componentWillUnmount() {
    window.removeEventListener('resize', this.updateDimensions);
}

updateDimensions() {
    this.setState({ heightSet: document.body.scrollHeight });
    console.log(document.body.scrollHeight);
}

render() {
    const divStyle = {
        height: this.state.heightSet + 'px',
    };
    return (
        <div style={divStyle}>
        </div>
    )
}

aber All dies ist klar zu verwerfen.
Ich bin nicht für die richtige Herangehensweise.
Es berührt auch auf ein weiteres Problem meiner app :
Er weiß um die Höhe hinzu, um die Ansicht aber nicht, um es zu entfernen.
Weiß jemand, warum es dieses Verhalten und wie um es zu beheben?

UPDATE :

KLÄRUNG das eigentliche Problem ist, dass diese Lösung nicht über ein update auf den var, wenn ich auf "add component" und meine scroll-Höhe steigt.
alles in allem ist die oben genannte Lösung ist völliger Müll.
Ich mag die Idee : Einstellen der Farbe für extra-Seite Teile sichtbar, während der Gummi-band Blättern (ja, es ist ein hack, aber das ist in Ordnung von mir)

von Shishir Arora und tksb

aber es scheint, dass es nicht funktioniert auf modernen Browsern (zumindest nicht in Chrome und die neueste Chrome ist Ziel N°1 für meine app).

stackoverflow.com/questions/30640446/...
komisch. klingt vielversprechend, aber am Ende nicht funktioniert. die 50% über und 50% unter der Anzahl im Rahmen der Seite nicht außerhalb der Sicht, auch mit den einfachsten layouts.
irgendwelche neuen Ideen ???

InformationsquelleAutor tatsu | 2017-09-29

1

Ich das Szenario reproduziert und ich habe zu dieser. Hoffe, es hilft.

Warum ist es immer wachsen?

In meinem Fall document.body.scrollHeight Rückkehr ist die Höhe des Körpers mit seinem Rand (aus irgendeinem Grund), so dass jedes mal, wenn die Komponente Höhe eingestellt ist, er bleibt kleiner als der Körper ist scrollHeight und da der Körper wächst mit seinen Kindern, mit der Größe der Komponente, die gerade wächst.

Beispiel:
```
 componentDidMount : 
   bodyHeight = 90 + 10 (a margin)
   scrollHeight = 100
   componentHeight = 100

   newBodyHeight = 100 + 10 

 Resize:
   bodyHeight = 100 + 10 
   scrollHeight = 110
   componentHeight = 110

   newBodyHeight = 110 + 10 , and so on.
```
Wie um es zu beheben?

Könnte man abziehen, den Rand des Körpers von den scrollHeight oder berechnen Sie die Höhe von der Komponente s Kinder s Höhe.

Ich habe gerade dieses:
```
updateDimensions() {
  const margin = 16; //In my case was marginTop: 8px and marginBottom: 8px
  const heightSet = document.body.scrollHeight - margin;
  this.setState({ heightSet });
}
```
- ich schon, und es entspricht nicht dem scrollen Sie die Höhe der Seite. es entspricht einer festen Höhe, die nicht aktualisieren, da der Inhalt größer wird.
- haben Sie versucht, mit dynamischen Komponenten in Ihre Seite ein und sehen die Wirkung auf die variable, wie Sie klicken Sie auf die Schaltfläche "hinzufügen" und die Seite scrollen Länge erhöht? wenn Sie die Seite scrollen, die Länge erhöht sich bei mir die variable nicht erhöht.
- Nein, die variable nicht erhöht, denn das löst keine der Größe. Sie können aktualisieren Sie die wrapper-Höhe mit Ihren Kindern die Höhe. So etwas wie dieser
- eine große Zahl von Dingen, die defekt sind in der verlinkten demo-einschließlich : entfernen, scrollen, sobald Elemente Hinzugefügt werden, hinzufügen und auch die meisten oder keiner der verlinkten code angewendet werden können, zu reagieren :/ zum Beispiel "offsetHeigh" existiert nicht im reagieren.
InformationsquelleAutor Jalissa

So wie es sich herausstellt KANN man das auch mit css machen nur und der trick ist verblüffend einfach:

in deiner navbar-Komponente hinzufügen diese :

render() {
        return (
            <Navbar>
                <div className="top-nav-white" />

                ...content

            </Navbar>
        );
    }

und css :

.top-nav-white{
  background-color: white; //(or the color you want to be overflowing)
  height: 100px;
  width: 100%;
  position: absolute;
  top: -100px;
}

diese Weise lassen Sie die Hintergrundfarbe auf html oder body :

html{
}
body{
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: $fond;
}

und daher Ihre überlauf Farbe auf der oberen Seite und der unteren Seite wird anders sein, als gewünscht.

InformationsquelleAutor tatsu

Haken auf das scroll-Ereignis und nicht das resize-Ereignis

componentDidMount() {
    this.updateDimensions();
    window.addEventListener('scroll', this.updateDimensions);
}

componentWillUnmount() {
    window.removeEventListener('scroll', this.updateDimensions);
}

updateDimensions = () => {
    this.setState({heightSet: document.body.scrollHeight});
    console.log(document.body.scrollHeight);
}

InformationsquelleAutor shahar taite

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.