Вертикальная реализация с прокруткой не работает - PullRequest
Новая
       50

Вертикальная реализация с прокруткой не работает

0 голосов
/ 25 июня 2019

У меня есть приложение реагирования с некоторыми стилями семантического интерфейса. Я пытаюсь реализовать моментальную прокрутку с разделами моего сайта. Я попытался добавить scroll-snap-type: y обязательно; и scroll-snap-align: начало; в теле и разделах вот так: 

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", 
"Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica 
Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-snap-type: y mandatory;
}

section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
   height: 100vh;
  scroll-snap-align: start;
}

и я также добавил их в контейнер и секции: 

 .container {
  width: 100%;
  height: 100%;
  color: white;
  scroll-snap-type: y mandatory;
} 

 section {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      width: 100%;
       height: 100vh;
      scroll-snap-align: start;
    }

Я также пытался реализовать это так, как это делает Брэд Траверс в одном из своих видео. я добавил переполнение: скрыто; в теле и контейнере выглядело примерно так 

.container {
  width: 100%;
  height: 100%;
  color: white;
overflow-y: scroll;
scroll-behavior: smooth;
scroll-snap-type: y mandatory;
} 

section {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          text-align: center;
          width: 100%;
           height: 100vh;
          scroll-snap-align: center;
    }

тоже не сработало.

Я также использую контейнер, импортированный из semantic-ui, в приложение реагирования, поэтому я не уверен, имеет ли это какое-либо отношение к нему, но когда я пытаюсь реализовать этот способ, полоса прокрутки тоже исчезает.

...