滚动时导航滞后

Sticky navigation lag on scroll

本文关键字：滞后 导航 滚动      更新时间：2024-04-22

这是我正在工作的网站：单击此处-主页滚动问题。

我使用的是Foundation5，一个粘性滚动条和猫头鹰旋转木马（我尝试过使用Slickcarousel，结果是一样的）。

我遇到的问题是，每当我向上/向下滚动，顶部条越过旋转木马时，整个页面都会断断续续，滚动会比预期轨迹更短地颠簸和停止。

我尝试了很多解决方案，包括将z-index和-webkit-transform: translateZ(0)规则应用于转盘，但都没有成功。

这个问题在Firefox或Edge中似乎并不存在，或者至少没有那么明显。

有什么想法吗？

**更新，Ajay Varghese的回答似乎有助于向下滚动，但向上滚动时问题仍然存在。当复制下一个内容行以增加页面长度时，如果您试图向上滚动以显示旋转木马，它会跳跃并产生滚动停顿。这个问题很烦人，我似乎仍然找不到原因。

尝试在固定类中添加overflow: hidden;

.fixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99;
    overflow: hidden;
    left: 0;
}

我不清楚问题是如何发生的。但我尝试了一些方法，解决了这个问题。在我删除了您为.main-content提供的"页边空白顶部"之后，就不会发生跳转。这将使旋转木马保持在.main内容框上，而我们不希望这样做。我通过给出一些额外的高度来解决这个问题，并通过给出"位置：相对"answers"顶部：15px"来向下推动旋转木马。你能试试这个让我知道吗？

此问题仅存在于Chrome中。问题似乎是WebKit有时不能很好地处理分层。

以下是对我非常有效的解决方案：body { -webkit-transform: translate3d(0, 0, 0);}

希望这能帮助到别人，节省他们宝贵的时间。

**更新，我没有意识到这打破了粘性的顶条。因此，这种解决方案是不可行的。

相关文章：