CSS Snap Scroll не работает при загрузке страниц с Chrome - PullRequest
Новая
       0

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

0 голосов
/ 23 октября 2018

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

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

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

Я применяю класс "snap" к тегу <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, но все равно делает то же самоепотерпеть поражение.Спасибо за вашу помощь!

1 Ответ

0 голосов
/ 04 ноября 2018

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

Обошел проблему, не применяя свойство "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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...