CSS-скролл-привязки переполняет тело при достижении вершины - PullRequest
Новая
       41

CSS-скролл-привязки переполняет тело при достижении вершины

0 голосов
/ 28 июня 2019

У меня довольно странная проблема.Возможно, ошибка в поведении scroll-snaps?

Когда я достигаю верхней части страницы и продолжаю прокручивать вверх, тело переполняется и остается там, если я больше не прокручиваю вниз.Даже когда я перезагружаю страницу.

Происходит только в Chrome для Mac (версия 75.0.3770.100 (официальная сборка) (64-разрядная версия)). Я протестировал его в Safari и Firefox, и оба они работают нормально.

Воспроизведение онлайн

Jsfiddle here , но вы не можете воспроизвести его там.Вероятно, потому что это внутри iframe?

Видео выпуска:

enter image description here

Ответы [ 3 ]

1 голос
/ 01 июля 2019

Ну, я искал похожие проблемы и решения, после исправления вашего использования мгновенной прокрутки, мог бы добавить это: 

html{
    height: 100%;
    overflow: hidden;
}
body{
    height: 100%;
    overflow: auto;
}

В некоторых случаях этого недостаточно, поэтому вы также можете добавить: 

body{
    overscroll-behavior: none;
}
0 голосов
/ 02 июля 2019

Еще две строки CSS, которые вы должны добавить, чтобы решить вашу проблему.Установите высоту от 100% до 100vh и задайте box-sizing:border-box;, чтобы исправить ваши свойства заполнения 100% ширина и высота; коробчатого проклейки: пограничный коробка; .Почему я использую vh Процент от полной высоты области просмотра.10vh разрешит до 10% от текущей высоты окна просмотра, и это даст вам больше responsive вещей.Но если вы хотите использовать 100%, это также будет нормально работать с box-sizing:border-box;

 html,body,#container, .section, .slide{
        height: 100vh;
        box-sizing:border-box;
 }

Вот код вашего решения 

html,body,#container, .section, .slide{
            height: 100%;
            box-sizing:border-box;
     }
0 голосов
/ 02 июля 2019

Возможно, вам стоит попробовать заменить: 

body{
  -ms-scroll-snap-type: y mandatory;
  scroll-snap-type: y mandatory;
}

К этому: 

#container {
  -ms-scroll-snap-type: y mandatory;
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
}

Я оставил вам еще один пример: 

body {
  height: 100vh;
  margin: 0;  
}

.container {
  -ms-scroll-snap-type: y mandatory;
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100%;
}

.container div {
  scroll-snap-align: start;

  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 4rem;
}

.container div:nth-child(1) {
  background: yellow;
  color: black;
}

.container div:nth-child(2) {
  background: red;
  color: white;
}

.container div:nth-child(3) {
  background: blue;
  color: white;
}

.container div:nth-child(4) {
  background: green;
  color: white;
}
<div class="container">
  <div>Section 1</div>
  <div>Section 2</div>
  <div>Section 3</div>
  <div>Section 4</div>
</div>
...