Ненужное дополнительное пространство прокрутки с фиксированным div в Safari WKWebView на iOS 13 - PullRequest
Новая
       14

Ненужное дополнительное пространство прокрутки с фиксированным div в Safari WKWebView на iOS 13

0 голосов
/ 08 апреля 2020

У меня есть простая страница HTML, где внизу есть панель инструментов position:fixed, а над ней - редактируемое текстовое пространство (contenteditable div). При просмотре в iOS Safari на iOS 13, когда вы нажимаете на редактируемую часть экрана, «фиксированная» панель инструментов ниже становится прокручиваемой, и у меня теперь есть две полосы прокрутки на странице. У меня тоже сейчас изжога.

Я хочу, чтобы "фиксированная" панель инструментов оставалась на месте, а не прокручивалась из-за клавиатуры.

enter image description here

Есть идеи, как я могу это сделать? Вот полный код примера страницы: https://jsfiddle.net/ermwf1n7/

Или вы можете просмотреть всю страницу на iPhone здесь: http://labrum.co/scroll.html

Вот сам код: 

<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <style type="text/css">
    #scrolly{
      padding-bottom:55px;
      overflow-y:scroll;
      outline:none;
    }
    #fixed{
      position:fixed;
      left:0;
      right:0;
      bottom:0;
      height:55px;
      background:#333;
      text-align: center;
      color:#CCC;
    }
  </style>
</head>

<body>
  <div id="scrolly" contenteditable="true">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, harum accusantium esse voluptatibus aspernatur fugit rem, vero quaerat quos dolores neque cumque temporibus cum! Excepturi omnis molestias sit cumque in.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, harum accusantium esse voluptatibus aspernatur fugit rem, vero quaerat quos dolores neque cumque temporibus cum! Excepturi omnis molestias sit cumque in.</p>
    ...
  </div>
  <div id="fixed">
    Fixed
  </div>
</body>

</html>

Я управляю этим в WKWebView, чтобы я мог ограничить нижнюю часть webView верхней частью клавиатуры, но как только появляется клавиатура, ситуация с прокруткой сходит с ума.

Есть идеи, как мне это исправить - на стороне iOS / Swift или на стороне HTML / CSS / JS?

...