Question

我有一个div设置为position:fixed，单击<img>时会向下滑动。当我的固定div出现时，对于具有全高的移动浏览器，它将以全屏显示。但是，当我滚动时，移动浏览器工具栏将隐藏，这将导致我的固定div不再全屏显示（底部存在与隐藏的工具栏高度相等的间隙）。

工具栏的图像：

即使移动浏览器工具栏隐藏起来，我也希望将此固定div的高度设置为100％。

CSS

#slider{
   display: none;
   position: fixed;
   z-index: 99999;
   top: 0;
   left: 0;
   height: 100%;
   background: #fff;
   overflow: scroll;
}

HTML

<body>
    <div id="tick" class="col-md-12">many things</div>
    <div id="slider" class="col-md-12">my slider</div>
</body>

Answer 1

我通过使用一些CSS来解决此问题，该CSS不再隐藏移动浏览器中的底部工具栏。

当我出现fixed div时

$('body').css({'overflow':'hidden','position':'fixed'});

，然后隐藏（删除）此div，然后再次恢复CSS

$('body').css({'overflow':'','position':''});

因此，当我的fixed div出现时，它锁定了主体，甚至没有滚动。此外，如果用户在fixed div上粗略滚动，则移动浏览器的底部工具栏也不会隐藏。之后，当div隐藏时，身体状态会再次恢复