Réagir comment définir de façon dynamique div hauteur d'emboîter le pas de la pleine hauteur de la fenêtre, y compris le défilement

Je suis en train de faire réagir un redux app.

Mon point de vue devient de plus comme je l'ai ajouter des éléments (ou plus petit que je les supprimer), mais je ne peux pas obtenir mon parcours pour suivre correctement.

J'ai essayé d'utiliser scrollHeight pour déterminer la taille qu'il devrait avoir :

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

Voici mon 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>
    )
}

mais Tout cela est clairement d'être abandonné.
Je ne prend pas la bonne approche.
Elle touche aussi une autre question de mon application :
Il sait à ajouter de la hauteur à la vue, mais pas de le supprimer.
Quelqu'un sait pourquoi il a ce comportement et comment y remédier?

Mise à JOUR :

CLARIFICATION, le vrai problème est que cette solution n'a pas une mise à jour sur le var, lorsque je clique sur "ajouter un composant" et mon défiler des augmentations de hauteur.
dans l'ensemble la solution ci-dessus est de proférer des ordures.
J'aime cette idée : Définir la couleur pour plus de parties de pages visibles au cours de caoutchouc de la bande de défilement (ouais c'est un hack, mais c'est bien pour moi)

de Shishir Arora et tksb

mais il semble que cela ne fonctionne pas sur les navigateurs modernes (au moins pas le Chrome et le dernier Chrome est la cible N°1 pour mon application).

stackoverflow.com/questions/30640446/...
bizarre. prometteur, mais n'a finalement pas de travail. le 50% au-dessus et 50% au-dessous de compter comme une partie de la page n'est pas en dehors de la vue, même avec le plus simple des mises en page.
toutes les nouvelles idées ???

InformationsquelleAutor tatsu | 2017-09-29

1

J'ai reproduit le scénario et j'en suis arrivée là. Espérons que cela aide.

Pourquoi est-il toujours en croissance?

Dans mon cas, document.body.scrollHeight est le retour de la hauteur du corps avec de la marge (pour quelque raison), donc à chaque fois la hauteur du composant est défini, il continue à être plus petite que le corps du scrollHeight et étant donné que le corps grandit avec ses enfants, avec le redimensionner, le composant ne cesse de croître.

Par Exemple:
```
 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.
```
Comment y remédier?

Vous pourrait soustraire la marge du corps, de la scrollHeight ou de calculer la hauteur de la hauteur des enfants.

Je viens de changer cela:
```
updateDimensions() {
  const margin = 16; //In my case was marginTop: 8px and marginBottom: 8px
  const heightSet = document.body.scrollHeight - margin;
  this.setState({ heightSet });
}
```
- je l'ai déjà eu et qu'il ne correspond pas à la hauteur de défilement de la page. il correspond à une hauteur fixe qui n'est pas mis à jour tant que le contenu est plus grand.
- avez-vous essayé d'avoir des composants dynamiques dans votre page et voir l'effet sur la variable que vous cliquez sur le bouton "ajouter" et la page de défilement longueur augmente? lorsque la page de défilement longueur augmente, pour moi, la variable n'a pas d'augmenter.
- Non, la variable n'augmente pas parce que ça ne déclenche pas la redimensionner. Vous pouvez mettre à jour l'enveloppe de hauteur avec son hauteur des enfants. Quelque chose comme ceci
- un grand nombre de choses sont cassées dans la démo, y compris : la suppression, de faire défiler une fois que les éléments sont ajoutés, ajouter et aussi plus ou pas du tout lié code peut être appliqué à réagir :/ par exemple "offsetHeigh" n'existe pas à réagir.
InformationsquelleAutor Jalissa

Donc comme il s'avère, vous POUVEZ le faire avec les css et le tour est trompeusement simple:

dans votre barre de navigation composant ajouter ceci :

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

                ...content

            </Navbar>
        );
    }

et en css :

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

de cette façon, vous pouvez laisser la couleur du fond sur html ou body :

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

et, par conséquent, le débordement de la couleur sur le haut de la page et le bas de la page sera différente comme souhaité.

InformationsquelleAutor tatsu

crochet sur le défilement de l'événement et de ne pas l'événement resize

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

Vous devez vous connecter pour publier un commentaire.