html - Firefox - 位置粘性在滚动行为平滑开启时关闭

Question

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

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

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>