Question

我正在一页网页上工作。我正在尝试制作使用id锚的粘性导航栏。一切正常，直到我引入了平滑滚动。

我将scroll-behaviour：smooth放置在html选择器上，它在Firefox 65.0.1上崩溃了粘滞行为。它可以在Chrome上正常运行。为了说明问题，我创建了这个Codepen。要重新产生问题，请在Firefox中将其打开，然后尝试注释掉scroll-behaviour属性。

html { scroll-behavior: smooth; }

我知道我可以使用JS重做此操作，但是我的目标是开发轻量级页面，因此我想在本地进行。我也知道我可以固定位置重做此操作，但是我想知道我是否使用了错误的方式，或者它是Firefox的错误。

Answer 1

有时我会使用一个有趣的技巧，将body作为flex容器，它有2个容器：nav和wrapper，所以看起来页面在滚动，但实际上wrapper在滚动，这使得nav坚持下去顶部：

（是的，README的支持非常差，所以我不建议您使用它）

postition:sticky;

body
{
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.wrap
{
  scroll-behavior: smooth;
  flex: 1;
  overflow: auto;
}

*
{
margin: 0;
  padding: 0;
}

nav
{
  font-family: sans-serif;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

Firefox-启用滚动行为平滑时，postiton Sticky会关闭

1 个答案: