@KrisTeylor

Почему не работает scroll-snap?

Пытаюсь реализовать scroll-snap для всей страницы, на странице три блока по высоте и ширине экрана. Полоса прокрутки должна быть скрыта. Перечитал, пересмотрел разные тутаториалы, ничего не помогает.
Также для плавной прокрутки при внутристраничной навигации использую scroll-behavior, но тоже не работает.
Браузер Edge 96
html в виде pug
body
  div.wrap 
    header
    section
    footer

scss
::-webkit-scrollbar { width: 0;} // чтобы скрыть полосу прокрутки
.wrap {
    width: 100%;
    height: 100vh;
    overflow-y: scroll; // или auto - всё равно не помогает
    scroll-snap-type: mandatory; // как я понимаю для старых браузеров, но если убрать лучше не становится
    scroll-snap-points-y: repeat(100vh); // как я понимаю для старых браузеров, но если убрать лучше не становится
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth // для плавной прокрутки при внутристраничной навигации, но тоже не работает
}
header {
    height: 100vh;
    scroll-snap-align: start;
    position: relative;
    width: 100%;
    background-color: rgb(0, 0, 20);
}
section {
    height: 100vh;
    scroll-snap-align: start;
    position: relative;
    width: 100%;
    background-color: blue;
}
footer {
    height: 100vh;
    scroll-snap-align: start;
    position: relative;
    width: 100%;
    background-color: black;
}
  • Вопрос задан
  • 507 просмотров
Решения вопроса 1
@KrisTeylor Автор вопроса
Проблема была в том, что мой Edge не поддерживает scroll-snap и scroll-behavior. Точнее поддерживает их только в экспериментальном режиме.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы