Предотвратить упругую прокрутку на iPad Safari - PullRequest
Новая
       5

Предотвратить упругую прокрутку на iPad Safari

0 голосов
/ 28 октября 2018

Я реализовал следующий код, чтобы экран не позволял пользователю видеть эластичное переполнение сайта при использовании ipad. 

.main-layout::ng-deep {
  width: 100%;
  height: 100%;
  position: fixed;
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  //overflow: hidden;
}

Код работает нормально, но теперьнижний колонтитул внизу страницы обрезается, это кажется проблемой только для IOS-сафари.Я хочу, чтобы нижний колонтитул оставался внизу страницы без его обрезания.Я видел решения для этого с помощью JavaScript, но в идеале я хочу использовать только CSS.

Так что у меня есть исправление, в котором я предотвращаю упругую прокрутку.Но нижний колонтитул обрезается, и пользователь не может прокрутить вниз, чтобы увидеть его.

Вот CSS для нижнего колонтитула 

.footer {
    @media (max-width: $screen-sm-max) {
      font-size: 12px;
    }
    @media (max-width: $screen-sm-min) {
      font-size: 10px;
    }
    @extend .center;
    height: $header-height;
    text-align: center;
    width: 100%;
    background-color: $gray-ltr;
    font-size: 14px;
    overflow: auto;
    border-top: 2px solid $gray-lt;
  }

1 Ответ

0 голосов
/ 28 октября 2018

У меня была похожая проблема при попытке сделать веб-приложение для iOS на iPhone.Не уверен, что он поможет вам на iPad, но стоит попробовать.

Я не смог найти ни одной остановки CSS или JS, чтобы это исправить.Это расстраивает, когда вы не хотите вытягивать лишний белый цвет из верхней части браузера Safari для iOS.

Работа, которую я использовал, которая могла бы вам помочь, заключается в том, чтобы сделать это с помощью CSS ... 

HTML,
BODY {
  min-height: 100%;
  height: 100%;
  overflow: hidden;
  @include position(fixed, 0 0 0 0);
}

.webapp-container {
  @include position(absolute, 0 0 0 0);
  overflow: scroll;
}

Позиция использует бурбон , вы можете просто написать позицию, если вы не используете бурбон.

Добавить дополнительный div с HTML ... 

<body>
  <div class="webapp-container">
    New body content with no elastic scrolling
  </div>
</body>

У вашего нижнего колонтитула нет фиксированного позиционирования, поэтому у вас не должно быть проблем с исходным кодом внутри этого метода.

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

Нет похожих вопросов

...