Как заставить привязку прокрутки и основанные на прокрутке анимации работать вместе? - PullRequest
Новая
       5

Как заставить привязку прокрутки и основанные на прокрутке анимации работать вместе?

0 голосов
/ 14 апреля 2019

Я пытаюсь создать сайт на основе прокрутки с анимацией, которая появляется в каждом разделе (постепенное появление, постепенное исчезновение и т. Д.).

Для анимации я использую AOS Libary (https://michalsnik.github.io/aos/)

Привязка прокрутки достигается с помощью таких свойств css:
Parent- 

.scroll-container{
scroll-snap-type:y mandatory;
overflow-y: scroll;
height: 100vh;
scroll-padding: 8vh;
}

Child- 

scroll-item{
scroll-snap-align: start;
}

Если я реализую так: 

 <body>
<div class="scroll-conatiner">
    <section class="scroll-item"> 
    </section>
    <section class="scroll-item">       
    </section>
</div>
<body>

Тогда привязка прокрутки работает отлично, однако я понимаю, что это сводит на нет прокрутку окна, котораяанимации, которые слушает js, поскольку прокрутка является внутренней частью для div, а не для страницы.
Однако, если я реализую текст на теле следующим образом: 

<body class="scroll-conatiner">  
  <section class="scroll-item">
  </section>
  <section class="scroll-item">    
  </section>
</body>

Тогда анимация работает, но щелчок прокрутки не выполняется.'t.
Я проверил множество сообщений и не смог найти мою проблему.
Scroll Snap Css говорит, что она не поддерживается широко, но сейчас она используется в большинстве основных браузеров.
Другие используют js, которого я пытаюсь избежать, когда в свойстве css есть буллит - Прокрутка привязки к разделу страницы
Мне наконец удалось заставить его работать в теле, посмотрев на это CSS-прокрутка щелкающей-vertical-not-working post, но анимация все еще не работает.

Другие ссылки - css-tricks1 css-tricks2 css-tricks3

...