CSS Snap scroll не работает при загрузке страницы в Chrome
Я кодирую веб-сайт (с 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
Я столкнулся с той же проблемой.
Нашел обходной путь, не применяя свойство "тип привязки" до тех пор, пока страница не загрузится с помощью 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>Я не могу сравнивать яблоки с яблоками, так как я использую chrome v 70.0.3538.77 - НО я могу сказать вам, что он работает с полностью очищенным кешем. Проверено на Chrome на ПК и Mac. Где вы запускаете сценарий? Убедитесь, что он запущен после загрузки страницы.
Я так понимаю, я не тестировал на ПК только на Mac. Веб-сайт, который я разрабатываю, - это Wordpress, поэтому я запускаю сценарий в нижнем колонтитуле (с файлом JS). У меня было время ожидания 2 секунды перед применением класса, и, похоже, он работает. Спасибо!
Спасибо за Ваш ответ. Я попробовал ваше решение: если я сначала загружаю страницу в Chrome (ничего не в кеше), она не работает, но когда я обновляю страницу, она работает.