css - 在手机上滚动时顶部和底部的空白

Question

我正在制作一个新网站，我希望我的导航栏在滚动时固定在顶部。它有效，但在移动设备上滚动时顶部或底部有空白区域。问题是我的导航来自移动设备的左侧。当我滚动时，这个导航栏不会移动，顶部导航栏不会出现在左侧导航栏下方，而且它真的很难看。

如果你不明白，这是我的网站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) 上截取的一些屏幕截图

我实际上是向下滚动:

当导航打开时:

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

Answer 1

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

很少有部分解决方案可能/可能不适合您的情况
- How to disable inertial scrolling on body for iOS browsers?
- ipad safari: disable scrolling, and bounce effect?

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

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