【问题标题】：Is there a way to hide the browser on-scroll if the body isn't what's scrolling?如果正文不是滚动的，有没有办法在滚动时隐藏浏览器？
【发布时间】：2015-01-19 04:51:26
【问题描述】：

我有一个页面，它有一个中心 div，它是所有内容的保持者（我需要这个才能使页面居中并有一个持久的顶部和底部导航），但是，我现在无法做到的是，当我在移动浏览器中向下滚动时（就像页面本身正在滚动一样），将地址栏滑开。因为滚动的是div的内容，所以浏览器地址栏一直存在。

我很好奇，当这个 div 从其顶部坐标向下滚动时，是否可以发出手动命令来执行浏览器元素的上述隐藏/显示。

我只关心如何在 webkit、safari、firefox 和 chrome 等现代移动浏览器中进行这项工作。

【问题讨论】：

我们可以用你的页面代码来搞定吗？
实际上有相当多的代码（居中的 div 和持久的顶部和底部导航）。我希望有人能指出我正确的方向，让浏览器在滚动普通页面时执行它所做的事情（它隐藏了地址栏）。我会知道从那里做什么，我只是不知道在哪里可以找到这个功能，而且我看过的明显地方似乎没有它。

标签： javascript css html

【解决方案1】：

如果您的意图是在桌面浏览器上使地址栏固定位置（不滚动），但在移动浏览器上静态（滚动），您可以使用媒体查询。

示例

html

<div id="address-bar">
    <!-- content -->
</div>

css

#address-bar{
    position: fixed;
    top: 0;
}

// on lesser width (mobile screen) it will override above rule
@media (max-width: 480px) {
    #address-bar{
        position: relative;
    }
}

【讨论】：

不，你误会了我（对不起）。我指的是浏览器本身的地址栏。在移动设备上，一旦您开始在页面上滚动，浏览器的地址栏就会消失，以便为更多内容腾出空间。如果您向上滚动到顶部，它会返回。但是我的“页面”没有滚动，页面上的 div 正在滚动，这不会促使浏览器删除其地址栏元素。所以，我正在寻找一种在 div 滚动时手动删除该元素的方法。