reactjs 移动的键盘向上移动一个位于底部的html元素-如何保持底部的html元素隐藏在移动键盘下方？

cigdeys3 于 2022-12-12 发布在 React

关注(0)|答案(1)|浏览(134)

下面是css代码：

const NavbarContainer = styled.div`
  overflow-y: hidden;
  width: 100%;
  height: 15%;
  position: fixed;
  z-index: 1;
  bottom: -0.7rem;
  overflow-x: hidden;
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.7) 30%,
    rgba(0, 0, 0, 0.9) 40%,
    rgba(0, 0, 0, 1) 70%
  );
`;

当键盘出现时，我如何保持导航栏隐藏在键盘下面？
理想的情况下，我正在寻找一个使用css的解决方案或一些相对容易做的事情。
任何帮助都将不胜感激！
我曾考虑过添加一个logc，当用户开始输入任何内容时，它会隐藏元素，但这似乎不是一个优雅的解决方案，更像是我试图ducttape一个解决方案-如果我决定走这条路，我可能会使用某种状态变量并将其传递给css。

reactjs

来源：https://stackoverflow.com/questions/74740237/mobile-keyboard-moves-up-an-html-element-that-is-at-the-bottom-how-to-keep-the

1条答案

按热度按时间

z0qdvdin1#

浏览器通常会更改视图高度，以调整工具栏和键盘的高度。这意味着它们会缩小 windows ，以便为键盘给予空间，而不是覆盖键盘。
它们这样做是为了防止在键盘打开时无法访问项目。
您可以通过使粘滞元素以最小视图高度为条件来处理一般用例。
例如，如果view-height小于您选择的数字（例如600px），您可以使用CSS媒介查询隐藏元素。
这样，它将可见，除非：
1.键盘打开，或
1.用户在一个超小的屏幕上（也许是他们的手表？！）

@media (max-height: 600px) {
    .sticky-thing {
        display: none;
    }
}

赞(0）回复(0）举报 2022-12-12

我来回答

reactjs 移动的键盘向上移动一个位于底部的html元素-如何保持底部的html元素隐藏在移动键盘下方？

1条答案

相关问题

热门标签

最新问答