滚动 vh 问题时的 web 移动浏览器

在 web 移动浏览器中，使用 vh（视窗高度的百分比）来设置元素高度时，经常会遇到滚动问题。这个问题主要是因为在移动浏览器中，地址栏会随着滚动而消失或者出现，从而改变视窗的高度，导致元素的高度也发生了变化。

问题示例

首先，让我们来看一个示例，代码如下所示。

<div class="container">
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut quam dignissim, volutpat arcu sed, interdum elit. Nunc id elit id lacus bibendum aliquam. Nulla non ultrices ante.</p>
  </div>
</div>

<style>
.container {
  height: 100vh;
  background-color: #f5f5f5;
  overflow: auto;
}

.content {
  height: 100%;
  padding: 16px;
  background-color: #fff;
}
</style>

该示例中，我们设置了一个高度为 100vh 的容器，再在容器中设置一个高度为 100% 的内容元素并开启了滚动条。当我们在浏览器中打开该示例并滚动时，你会发现在滚到一定程度时，地址栏会自动消失，此时，容器的高度变化了，导致内容元素的高度发生变化，从而导致滚动条突然消失。

解决方案

针对上述问题，我们可以使用一些技巧来避免出现滚动问题。

方案一：使用 JavaScript 动态调整元素高度

我们可以使用 JavaScript 监听浏览器窗口高度的变化，然后动态的调整元素高度，代码如下所示。

<div class="container">
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut quam dignissim, volutpat arcu sed, interdum elit. Nunc id elit id lacus bibendum aliquam. Nulla non ultrices ante.</p>
  </div>
</div>

<script>
function resizeContent() {
    const container = document.querySelector('.container');
    const content = document.querySelector('.content');
    content.style.height = container.offsetHeight + 'px';
}

window.addEventListener('resize', resizeContent);
resizeContent();
</script>

<style>
.container {
  height: 100vh;
  background-color: #f5f5f5;
  overflow: auto;
}

.content {
  padding: 16px;
  background-color: #fff;
}
</style>

方案二：使用 CSS 变量

我们还可以使用 CSS 变量来解决该问题。首先，我们需要定义一个变量来保存视窗的高度，然后再使用该变量来设置元素的高度，代码如下所示。

<div class="container">
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut quam dignissim, volutpat arcu sed, interdum elit. Nunc id elit id lacus bibendum aliquam. Nulla non ultrices ante.</p>
  </div>
</div>

<style>
:root {
  --vh: 1vh;
}

@media (min-width: 320px) {
  :root {
    --vh: 5.2px;
  }
}

@media (min-width: 375px) {
  :root {
    --vh: 4.16px;
  }
}

@media (min-width: 425px) {
  :root {
    --vh: 3.74px;
  }
}

@media (min-width: 768px) {
  :root {
    --vh: 7.68px;
  }
}

@media (min-width: 1024px) {
  :root {
    --vh: 10.24px;
  }
}

.container {
  height: calc(100 * var(--vh));
  background-color: #f5f5f5;
  overflow: auto;
}

.content {
  height: 100%;
  padding: 16px;
  background-color: #fff;
}
</style>

在上述代码中，我们使用了 :root 伪元素定义了一个变量 --vh，保存了视窗高度的比例。然后，我们使用媒体查询为不同的屏幕宽度设置不同的值。最后，我们设置元素的高度为 calc(100 * var(--vh))，即视窗高度的百分之一倍。由于使用了 CSS 变量，不需要 Javascript 的这种解决方式,这样的处理比较优雅。

总结

在使用 vh 设置元素的高度时，滚动问题是一个常见的问题。我们可以使用 JavaScript 或者 CSS 变量来解决它。总而言之，如何避免在移动浏览器中出现滚动问题，取决于具体情况和需求，需要我们合理选择解决方案。