web-dev-qa-db-fra.com

Réagissez à la définition dynamique de la hauteur de la div pour qu'elle corresponde à la hauteur de la fenêtre, défilement compris

Je fais une application de redux de réaction.

Ma vue s'agrandit à mesure que j'ajoute des éléments (ou diminue lorsque je les supprime), mais je ne parviens pas à suivre mon arrière-plan 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 doit clairement être abandonné. Je ne prends pas la bonne approche . Il aborde également un autre problème de mon application: Il sait ajouter de la hauteur à la vue, mais ne pas l'enlever .. Quelqu'un sait pourquoi il l'a ce comportement et comment y remédier?

METTRE À JOUR : 

CLARIFICATION le vrai problème est que cette solution ne dispose pas de mise à jour du var lorsque je clique sur "ajouter un composant" et que la hauteur de défilement augmente. La solution ci-dessus est totalement fausse. : Définir la couleur des parties de page supplémentaires visibles pendant le défilement de l’élastique (oui, 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 (du moins pas Chrome et le dernier Chrome est la cible N ° 1 pour mon application).

reactjsreduxheightreact-redux
4
tatsu

En fin de compte, vous POUVEZ le faire avec des fichiers CSS uniquement et l’astuce est trompeuse:

dans votre composant navbar, ajoutez 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 de fond sur html ou body: 

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

et par conséquent votre couleur de débordement sur le haut de la page et le bas de la page seront différents comme vous le souhaitez.

0
tatsu

J'ai reproduit le scénario et je suis arrivé à ceci. J'espère que ça aide.

Pourquoi est-il toujours en croissance?

Dans mon cas, document.body.scrollHeight renvoie la hauteur du corps avec sa marge (pour une raison quelconque). Ainsi, chaque fois que la hauteur du composant est définie, elle reste plus petite que le scrollHeight du corps et que le corps grandit avec ses enfants, avec le redimensionnement , 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 pouvez soustraire la marge du corps de scrollHeight ou calculer la hauteur à partir de la taille des enfants du composant.

Je viens de changer ceci: 

updateDimensions() {
  const margin = 16; // In my case was marginTop: 8px and marginBottom: 8px
  const heightSet = document.body.scrollHeight - margin;
  this.setState({ heightSet });
}
1
Jalissa

accrocher sur l'événement de défilement et non sur l'événement de redimensionnement

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);
}
0
shahar taite