Firefox - 当滚动行为平滑打开时，位置粘性关闭

Question

我正在开发一个单页网站。我正在尝试制作使用 id 锚点的粘性导航栏。在我引入平滑滚动之前，一切都运行良好。

我在 html 选择器上放置了 scroll-behaviour:smooth，它在 Firefox 65.0.1 上崩溃了粘滞行为。它在 Chrome 上正常工作。为了描绘我创建了这个Codepen 的问题。要重新生成问题，请在 Firefox 中打开它并尝试注释掉 scroll-behaviour 属性。

html { scroll-behavior: smooth; }

我知道我可以用 JS 重做这个，但我的目标是轻量级页面，所以我想在本地做。我也知道我可以在固定位置的情况下重做这个，但我想知道我是否以错误的方式使用了某些东西，或者它是一个 Firefox 错误。

Answer 1

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

（是的，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;
}

<nav>
  blahblahblah
  <a href="#title1">sdf</a>
</nav>
<div class="wrap">
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta 
  <h1 id="title1">
    hi
  </h1>
  laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic obcaecati alias facere, illo voluptas incidunt impedit eos tenetur, earum perspiciatis enim soluta laudantium, repellat ad autem commodi provident qui possimus.
</div>