Фон не должен двигаться вверх, пока появляется пользовательская загрузка - PullRequest
0 голосов
/ 17 апреля 2019

Этот вопрос является продолжением другого вопроса (ответил)

Содержимое ниже не должно прокручиваться, когда виден фиксированный div

Что ожидается?

Нажмите «НАЖМИТЕ МНЕ» в цифрах (# 39)

Контент не должен перемещаться вверх, но должен оставаться там, где он есть, и не должен прокручиваться.

Я добавил код реакции

class App extends React.Component {

    state = {
      isLoading: false
    }

    changeLoadingState() {
      this.setState({
        isLoading: true
      });
      setTimeout(() => this.setState({
        isLoading: false
      }), 3000)
    }

    render() {
        var array = new Array(420);
        var filledArray = array.fill(0);
        return ( <
          div style = {
            {
              overflow: this.state.isLoading ? 'auto' : '',
              height: this.state.isLoading ? '100vh' : null
            }
          } > {
            this.state.isLoading ? ( <
              div className = "fixed" >
              <
              div className = "loader" > Loading... < /div> <
              /div>
            ) : null
          }

          <
          div className = "content" > {
            filledArray.map((a, index) => < div className = "hook"
              onClick = {
                index == 39 ? this.changeLoadingState.bind(this) : null
              } > {
                index == 39 ? "CLICK ME" : index
              } < /div>)} <
              /div> <
              /div>
            );
          }
        }

        ReactDOM.render( < App / > , document.getElementById("root"));
body,
html {
  margin: 0;
  padding: 0;
}

.fixed {
  display: flex;
  color: white;
  align-items: center;
  justify-content: center;
  position: fixed;
  background: rgba(0, 0, 0, 0.5);
  height: 100vh;
  width: 100vw;
}

.content {
  height: 3300px;
  background: red;
}

.hook {
  color: white;
  font-size: 40px;
}


/* Please ignore the below code, as it has nothing to do with the problem */

.loader {
  color: #ffffff;
  font-size: 90px;
  text-indent: -9999em;
  overflow: hidden;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  margin: 72px auto;
  position: relative;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease;
  animation: load6 1.7s infinite ease, round 1.7s infinite ease;
}

@-webkit-keyframes load6 {
  0% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  5%,
  95% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  10%,
  59% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
  }
  20% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
  }
  38% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
  }
  100% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
}

@keyframes load6 {
  0% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  5%,
  95% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  10%,
  59% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
  }
  20% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
  }
  38% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
  }
  100% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
}

@-webkit-keyframes round {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes round {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

1 Ответ

1 голос
/ 17 апреля 2019

Вам нужно добавить overflow: hidden к телу (или оболочке самого высокого уровня), когда модальное отображение. Иногда это неприятно в зависимости от того, к чему у вас есть доступ в DOM.

Я также видел, как люди притворялись, рисуя document window в объекте canvas и затем используя его в качестве фона модального объекта. Кажется чрезмерным, но это служит для того, чтобы все выглядело статично.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...