时间戳

首页 > 解决方案 > 在移动设备上滚动时顶部和底部的空白区域

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

问题描述

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

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

我实际上是向下滚动： 我实际上是向下滚动

导航打开时：

导航打开时

当我打开导航滚动时： 当我在导航打开时滚动

标签： cssbootstrap-4

解决方案

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

很少有部分解决方案可能/可能不适用于您的情况
-如何禁用 iOS 浏览器主体上的惯性滚动？
- ipad safari：禁用滚动和反弹效果？

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

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

推荐阅读