Scrollsnap CSS отключает ссылки панели навигации - PullRequest
Новая
       26

Scrollsnap CSS отключает ссылки панели навигации

0 голосов
/ 23 апреля 2020

Я пытаюсь воссоздать навигационное меню Snapchat в веб-приложении. Под этим я подразумеваю навигацию по пользовательскому интерфейсу с помощью горизонтального перелистывания, а также панель навигации внизу.

Свойство scroll-snap-type CSS отлично справляется со смахиванием. Тем не менее, кажется, отключить ссылки в моей панели навигации при тестировании на мобильных устройствах.

Я попытался изменить z-index элементов, а также присвоил scroll-snap-type родителю обертки раздела вместо элемента body, но пока безуспешно. 

html {
  scroll-behavior: smooth;
}

body {
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
}

.section-wrapper {
  display: flex;
  width: 300vw;
}

section {
  height: 80vh;
  width: 100vw;
  position: relative;
  scroll-snap-align: start;
}

#left {
  background-color: brown;
}

#mid {
  background-color: orange;
}

#right {
  background-color: chocolate;
}

nav {
  position: absolute;
  overflow: hidden;
  width: 100vw;
  box-sizing: border-box;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding: 16px;
  z-index: 999;
}
<div class="section-wrapper">
  <section id="left">left</section>
  <section id="mid">mid</section>
  <section id="right">right</section>
</div>
<nav>
  <a href="#left">
            Left
        </a>
  <a href="#mid">
            Mid
        </a>
  <a href="#right">
            Right
        </a>
</nav>
...