移动端页面滑动隐藏浏览器工具栏

2021-11-23 708 阅读1分钟

背景

开发移动端页面的时候，会发现，浏览器的底部工具栏会遮挡部分页面，这个时候，我们就希望能隐藏浏览器的工具栏，我的页面解构如下图

// html部分
<div class="nav">菜单内容</div>
<div class="content">页面内容</div>

// css部分
.nav {
    height: 64px;
    position: fixed;
    top: 0;
    width: 100%;
    ...
}
.content {
    margin-top: 64px;
    max-height: calc(100vh - 64px);
    overflow: auto;
    ...
}

解决方案

网上搜了很多中方式，如设置meta、设置页面滚动等，试过都不太理想

无意中滑页面的时候发现，有时浏览器工具栏会隐藏，经过多次试验发现，当向下滑动页面固定在顶部的菜单栏，浏览器的工具栏会隐藏，滑动滚动的内容时不会隐藏

最后把页面样式更改，改为整个页面滑动，问题解决了，代码如下

// 滚动区域不再限制在内容部分，而是整个页面滚动
.content {
    margin-top: 64px;
    // max-height: calc(100vh - 64px);
    // overflow: auto;
    ...
}

总结

将滚动改成整个页面滚动，在手机端向下滚动页面时，浏览器的工具栏会隐藏（有人称这是全屏状态），向上滚动时，工具栏显示。

遇到类似问题的小伙伴可以试试哦。

发现问题，解决问题，才是进步的阶梯。