移动滚动时顶部和底部的空白

Question

我正在做一个新的网站，我希望我的肚脐固定顶部时滚动。它可以工作，但在移动上，当我们滚动时，顶部或底部都有空白。问题是我有一个从左边移动过来的导航器。这个导航不喜欢当我滚动，没有顶部肚脐在左肚脐下面，它真的很丑。

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

我试过这样的方法：

overscroll-behavior: none;

但它改变不了什么

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

不做任何事

这是一个经典的引导4导航条，但我不使用固定顶类来修复它，它是一个类似于固定顶的自定义类。

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

}

我想让手机上的空格消失。

在我的手机上拍摄的一些截图(iPhone 6)

我实际上是在向下滚动：

​

当导航器打开时：

​

​

当我打开导航时：

​

Answer 1

我通过删除js函数来解决这个问题。在桌面上，导航条将不固定，在移动上，导航栏现在直接修复，并且工作正常。

Answer 2

我想你是在谈论惯性滚动行为，这是因为在iPhone中过度滚动一个网页。这个问题没有理想的解决办法。

在您的情况下，很少有部分解决方案可能/可能不起作用。

• How to disable inertial scrolling on body for iOS browsers?
• ipad safari: disable scrolling, and bounce effect?

不过，不建议防止这种情况发生。这样做将拦截自然滚动平滑的浏览器。

我建议你把你身体的背景色设置成导航条的bg颜色，这样就不那么明显了