Блог

На моей странице есть несколько разделов с высотой 100 вч и меньшим нижним колонтитулом :

 lt;!DOCTYPE htmlgt; lt;htmlgt;  lt;headgt;  lt;titlegt;Scroll Snap Ylt;/titlegt;  lt;stylegt;  body {  margin: 0;  font-family: sans-serif;  font-size: 40px;  }  main {  scroll-snap-type: y mandatory;  position: fixed;  top: 0;  right: 0;  bottom: 0;  left: 0;  overflow: scroll;   /* For old browsers */  -webkit-scroll-snap-type: y mandatory;  -ms-scroll-snap-type: y mandatory;  scroll-snap-type-y: mandatory;  scroll-snap-points-y: repeat(100%);  }  section,  footer {  display: grid;  align-items: center;  justify-content: center;  scroll-snap-align: start;  }  section {  height: 100vh;  }  section:nth-child(1) {  background-color: #f00;  }  section:nth-child(2) {  background-color: #0f0;  }  footer {  background-color: #0ff;  height: 25vh;  }  lt;/stylegt;  lt;/headgt;  lt;bodygt;  lt;maingt;  lt;sectiongt;1lt;/sectiongt;  lt;sectiongt;2lt;/sectiongt;  lt;footergt;  lt;a href="https://stackoverflow.com/" target="_blank"gt;Stack Overflowlt;/agt;  lt;/footergt;  lt;/maingt;  lt;/bodygt; lt;/htmlgt;  

Это идеально подходит в Chrome и Safari, я прокручиваю нижний колонтитул и нажимаю на ссылку, как и ожидалось :

Захват видеоэкрана в Chrome

Но в Firefox, когда я нажимаю в любом месте нижнего колонтитула, страница прокручивается до предыдущего раздела (зеленый раздел на картинке), поэтому я не могу нажать на ссылку в нижнем колонтитуле, это невозможно, потому что страница систематически прокручивается до предыдущего раздела :

Захват видеоэкрана в Chrome

Если нижний колонтитул имеет высоту 100 вч, поведение страницы в Firefox хорошее, но я хочу небольшой нижний колонтитул, я не хочу нижний колонтитул высотой 100 вч.

У вас есть какие-нибудь идеи, чтобы я мог перейти по ссылкам в нижнем колонтитуле?

Я исправил эту ошибку Firefox, установив scroll-snap-align: end; нижний колонтитул.