Как запретить скролл body при окрытом модальном окне?

Question

GaserV @GaserV

Как запретить скролл body при окрытом модальном окне?

Привет всем. Сделал модальное окно, но body скролится вместе с ним. Как запретить скролл бади, если модальное окно открыто? Интересует возможность без jq/js.

.modal
  display: none
  position: fixed
  top: 0
  left: 0
  width: 100%
  height: 100%
  background: rgba(0,0,0,0.6)
  z-index: 2
  overflow: hidden

  &.active
    display: block

  &.green
    .modal-header
      background: $green

    a
      color: $green

  &.pink
    .modal-header
      background: $pink

    a
      color: $pink

  &.blue
    .modal-header
      background: $blue

    a
      color: $blue

  &-wrap
    width: 360px
    margin: 0 auto
    background: #fff
    margin-top: 160px

  &-header
    padding: 15px
    @extend %center
    font-size: 18px
    color: #fff
    position: relative

  &-content
    padding: 20px

    .row
      @extend %flex
      @extend %jc-sb
      @extend %ai-c

    .form-group
      height: 40px

    a,
    p
      font-size: 14px

    a
      text-decoration: none

    p
      @extend %center
      color: $grey
      margin-top: 20px

<div id="sign-up" class="modal pink">
  <div class="modal-wrap">
    <div class="modal-header">Регистрация <i class="fa fa-close close-modal" aria-hidden="true"></i></div>
    <div class="modal-content">
      <form action="#" id="users" class="form">
        <div class="notice">
          Все поля обязательны для заполнения
        </div>
        <div class="form-group">
          <i class="fa fa-user" aria-hidden="true"></i>
          <input type="text" placeholder="Имя пользователя" name="name" class="input-transparent">
        </div>
        <div class="form-group">
          <i class="fa fa-at" aria-hidden="true"></i>
          <input type="text" placeholder="Ваш e-mail" name="email" class="input-transparent">
        </div>
        <div class="form-group">
          <i class="fa fa-lock" aria-hidden="true"></i>
          <input type="password" placeholder="Ваш пароль" name="password" class="input-transparent">
        </div>
        <div class="form-row">
          <input type="checkbox" id="checkNews" name="subscribe" class="checkbox">
          <label for="checkNews">Получать уведомления о новых вакансиях</label>
        </div>
        <div class="send-button pink">
          <label for="submit-form2" class="w100">
            <i class="fa fa-paper-plane" aria-hidden="true"></i>
            Зарегистрироваться
          </label>
          <input type="submit" id="submit-form2" class="hidden" value="Отправить">
        </div>
      </form>
      <p>
        Есть аккаунт? <a href="#" data-modal="sign-in">Войти</a>
      </p>
    </div>
  </div>
</div>