CSS Snap Scroll не работает при загрузке страниц с Chrome

Question

CSS Snap Scroll не работает при загрузке страниц с Chrome

Я пишу веб-сайт (с ajaxify.js и history.js), который включает в себя различные <section> на вертикальной прокрутке с шириной и высотой на 100% экрана (на моей домашней странице и на другой странице).

Чтобы сделать навигацию немного приятнее, я использую новую функцию CSS snap scroll. Отлично работает на Safari (v.12), Firefox (v.62). Но с Chrome (v.69), это действительно ошибки.

Действительно, когда моя домашняя страница загружается в Chrome, эффект привязки не работает. Поэтому я проверяю эффект на другой странице, но он все равно не работает... но если я вернусь, чтобы посетить мою домашнюю страницу (без перезагрузки сайта, потому что он в Ajax), эффект мгновенного срабатывания работает!

Я применяю класс "оснастки" к <body> тег (как контейнер прокрутки) и класс "snap-section" для <section>,

Вот мой CSS для <body:

body {
  width: 100vw;
  overflow-y: scroll;

  -webkit-scroll-snap-type: mandatory;
    -ms-scroll-snap-type: mandatory;
      scroll-snap-type: mandatory;

  -webkit-scroll-snap-points-y: repeat(100vh);
    -ms-scroll-snap-points-y: repeat(100vh);
      scroll-snap-points-y: repeat(100vh);

  -webkit-scroll-snap-type: y mandatory;
    -ms-scroll-snap-type: y mandatory;
      scroll-snap-type: y mandatory;
}

CSS для каждого <section>:

section.snap-section {
  position: relative;
  width: 100vw;
  height: 100vh;

  scroll-snap-align: start !important;
}

Эта ошибка сводит меня с ума... Я пробовал все, как удаление Ajax, но это все равно делает тот же сбой. Спасибо за вашу помощь!

2

css google-chrome scroll snap-framework

Источник

user5479680 23 окт '18 в 12:24

1 ответ

Решение

Другие вопросы по тегам css google-chrome scroll snap-framework

user3809939 04 ноя '18 в 08:48 2018-11-04 08:48 · Accepted Answer · 2018-11-04 08:48

Я сталкиваюсь с той же проблемой.

Нашли обходной путь, не применяя свойство "snap-type" до тех пор, пока страница не загрузится с помощью jquery. Раздражает необходимость делать это таким образом, но работает.

Попробуйте следующее:

$('body').addClass('scroll-snap');

body {
  width: 100vw;
  overflow-y: scroll;
}
.scroll-snap {
  -webkit-scroll-snap-type: mandatory;
    -ms-scroll-snap-type: mandatory;
      scroll-snap-type: mandatory;

  -webkit-scroll-snap-points-y: repeat(100vh);
    -ms-scroll-snap-points-y: repeat(100vh);
      scroll-snap-points-y: repeat(100vh);

  -webkit-scroll-snap-type: y mandatory;
    -ms-scroll-snap-type: y mandatory;
      scroll-snap-type: y mandatory;
}

section.snap-section {
  position: relative;
  width: 100vw;
  height: 100vh;
  
/* you can lose the !important */
  scroll-snap-align: start;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<section class="snap-section" style="background-color:orange">
</section>
<section class="snap-section" style="background-color:yellow">
</section>
<section class="snap-section" style="background-color:red">
</section>
<section class="snap-section" style="background-color:blue">
</section>
</body>