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

cigdeys3  于 2022-12-12  发布在  React
关注(0)|答案(1)|浏览(135)

下面是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。

z0qdvdin

z0qdvdin1#

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

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

相关问题