Firefox - липкий поститон отключается, когда включено гладкое поведение прокрутки

Я работаю над одностраничным сайтом. Я пытаюсь сделать липкую панель навигации, которая использует привязки идентификаторов. Все работало нормально, пока я не ввел плавную прокрутку.

Я поместил scroll-behaviour:smooth в селектор html, и это привело к сбою липкого поведения в Firefox 65.0.1. Он работает правильно в Chrome. Чтобы представить проблему, я создал этот Codepen. Чтобы снова создать проблему, откройте ее в Firefox и попробуйте закомментировать свойство scroll-behaviour.

html { scroll-behavior: smooth; }

Я знаю, что мог бы повторить это с помощью JS, но я стремлюсь к облегченной странице, поэтому я хотел бы сделать это изначально. Я также знаю, что могу повторить это с фиксированной позицией, но мне интересно, использовал ли я что-то не так, или это ошибка Firefox.


html css firefox smooth-scrolling sticky
person Bartłomiej Kudyba    schedule 24.02.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Иногда я использую интересный трюк, я делаю тело в виде гибкого контейнера, и у него есть 2 контейнера: навигация и обертка, так что кажется, что страница прокручивается, но на самом деле прокручивается обертка, что создает эффект, что навигация прилипает к верху:

(и да, у 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>

person ishidex2    schedule 25.02.2019