在移动设备上滚动时顶部和底部的空白区域答案

【问题标题】：White space on top and bottom when scrolling on mobile在移动设备上滚动时顶部和底部的空白区域
【发布时间】：2019-08-22 15:30:05
【问题描述】：

我正在创建一个新网站，我希望我的导航栏在滚动时固定在顶部。它可以工作，但在移动设备上，当我们滚动时，顶部或底部会有空白区域。问题是我有一个导航来自移动设备的左侧。当我滚动时，此导航不会移动，顶部导航栏不会位于左侧导航栏下方，而且非常难看。

如果你不明白，这里是我的网站https://www.hytalefrance.net

我尝试过这样的事情：

overscroll-behavior: none;

但它没有任何改变

body {
  height: 100%;
  overflow: auto;
}

什么都不做

这是一个经典的bootstrap 4 navbar，但我不使用fixed-top类来固定它，它是一个类似于fixed-top的自定义类

.sticky.is-sticky {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1000;

}

我希望移动设备上的空白消失。

在我的手机 (iPhone 6) 上截取的一些屏幕截图

我实际上是在向下滚动：

当导航打开时：

当我在导航打开的情况下滚动时：

【问题讨论】：

【解决方案1】：

我猜您正在考虑由于在 iPhone 中过度滚动网页而导致的惯性滚动行为。这个问题没有理想的解决方法。

虽然，不建议阻止它。这样做会拦截浏览器中的自然滚动平滑度。

我建议您将身体的背景颜色设置为导航栏的确切背景颜色，以使其不那么明显

【讨论】：

【解决方案2】：

我通过删除我的 js 函数解决了这个问题。桌面导航栏不会固定，移动导航栏现在直接固定，并且可以正常工作

【讨论】：