js 隐藏地址栏|极客笔记

js 隐藏地址栏

在网页开发中，有时我们希望隐藏浏览器的地址栏，使页面看起来更加整洁和专业。在移动端网页开发中特别常见这种需求，因为移动设备的屏幕空间有限，隐藏地址栏可以让用户更专注于网页内容。

方式一：使用全屏模式

在大多数浏览器中，我们可以通过使用全屏模式来隐藏地址栏。这种方法可以在移动端和桌面端都实现隐藏地址栏的效果。

function hideAddressBar() {
    window.scrollTo(0, 1);
}

上面的代码通过 window.scrollTo(0, 1) 来将页面滚动到 Y 轴为 1 的位置，这样可以触发浏览器的隐藏地址栏的效果。在移动端浏览器中，地址栏会自动隐藏。

方式二：使用浏览器内置 API

在移动端浏览器中，一些浏览器提供了特定的 API 来隐藏地址栏。例如，可以使用 window.scrollTo(0, 1) 来实现隐藏地址栏的效果。

function hideAddressBar() {
    window.scrollTo(0, 1);
}

// 在页面加载完成后触发隐藏地址栏
window.onload = function() {
    hideAddressBar();
}

通过在页面加载完成后调用 hideAddressBar 函数，可以确保页面加载完成后自动隐藏地址栏。

方式三：使用 CSS 样式

在移动端浏览器中，我们也可以通过设置一些 CSS 样式来隐藏地址栏。例如，可以使用以下样式：

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    margin: 0;
    padding: 0;
}

上面的 CSS 样式可以使页面占满整个屏幕，并且隐藏地址栏。但是需要注意的是，这种方法在一些浏览器中可能无法完全隐藏地址栏。

方四：使用 JavaScript 控制滚动事件

另一种常见的方法是通过 JavaScript 控制页面的滚动事件来隐藏地址栏。例如，在页面加载时，可以设置一个定时器来不断检测页面的滚动位置，并在页面滚动停止后隐藏地址栏。

let lastScrollTop = 0;
let ticking = false;

function hideAddressBar() {
    window.scrollTo(0, 1);
}

window.addEventListener('scroll', function() {
    lastScrollTop = window.scrollY;

    if (!ticking) {
        window.requestAnimationFrame(function() {
            if (window.scrollY === lastScrollTop) {
                ticking = false;
                hideAddressBar();
            }
        });

        ticking = true;
    }
});

上面的代码通过监听页面的滚动事件，实现了滚动停止后隐藏地址栏的效果。这种方法需要注意的是性能问题，因为在滚动过程中可能会频繁触发事件回调。