时间戳

首页 > 解决方案 > iOS 13 上 Safari WKWebView 中带有固定 div 的不需要的额外滚动空间

javascript - iOS 13 上 Safari WKWebView 中带有固定 div 的不需要的额外滚动空间

问题描述

我有一个简单的 HTML 页面，position:fixed底部有一个工具栏，contenteditable div上方有一个可编辑的文本空间 (a)。在 iOS 13 上的 iOS Safari 中查看时，当您点击屏幕的可编辑部分时，下面的“固定”工具栏变为可滚动的，并且我现在在页面上有两个滚动条。我现在也有胃灼热。

我希望“固定”工具栏保持不动，而不是因为键盘而滚动。

在此处输入图像描述

知道我该怎么做吗？这是示例页面的完整代码：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 端解决这个问题吗？

标签： javascripthtmlcssscrollwkwebview

解决方案

推荐阅读