Как сделать так, чтобы скроллинг внутри окна работал с использованием GSAP и ScrollTrigger?

Question

Жан

javascript

Как сделать так, чтобы скроллинг внутри окна работал с использованием GSAP и ScrollTrigger?

На сайте используется GSAP ScrollTrigger для прокрутки блоков. У меня есть всплывающее окно с прокруткой, которое работает только при перемещении полосы прокрутки. Однако, когда я пытаюсь прокрутить его колесом мыши, вместо того чтобы прокручивать содержимое окна, прокручивается основной сайт, находящийся позади этого окна. Как можно решить эту проблему?

22 марта 2025 г. 10:14

Ответы на вопрос 1

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

Answer 1

Чтобы прокрутка внутри всплывающего окна работала корректно с использованием GSAP и ScrollTrigger, вам нужно предотвратить событие прокрутки на основном сайте, когда вы находитесь внутри всплывающего окна. Это можно сделать с помощью JavaScript, добавляя обработчик событий на колесо мыши и останавливая всплытие события, если мы находимся в пределах окна с прокруткой.

Вот как это можно реализовать:

### Шаги

1. **Добавьте обработчик событий на колесо мыши к вашему всплывающему окну**.

   Вы можете использовать `addEventListener` для отслеживания события `wheel` на вашем окне.

2. **Остановите событие прокрутки**, если курсор находится над всплывающим окном.

3. **Добавьте ScrollTrigger для вашего содержимого** внутри всплывающего окна.

### Пример кода

```html
<div class="modal">
    <div class="modal-content">
        <!-- Ваше содержимое с прокруткой -->
        <div class="scrollable-content">
            <!-- Длинное содержимое для прокрутки -->
        </div>
    </div>
</div>
```

```css
.modal {
    /* Стили вашего модального окна */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden; /* Запрещаем прокрутку основного сайта */
}

.scrollable-content {
    overflow-y: auto; /* Позволяем вертикальную прокрутку */
    height: 80vh; /* Устанавливаем высоту контента */
}
```

```javascript
const modal = document.querySelector('.modal');
const scrollableContent = document.querySelector('.scrollable-content');

// Предотвращение скролла основного сайта, когда фокус на всплывающем окне
scrollableContent.addEventListener('wheel', function(event) {
    if (this.scrollHeight > this.clientHeight) {
        event.preventDefault();

        // Прокрутка содержимого
        this.scrollTop += event.deltaY;
    }
});

// Инициализация ScrollTrigger для содержимого всплывающего окна
gsap.registerPlugin(ScrollTrigger);

ScrollTrigger.create({
    trigger: scrollableContent,
    start: 'top top',
    end: 'bottom top',
    scrub: true
});
```

### Что происходит
1. Мы добавляем обработчик события `wheel` на элемент `.scrollable-content`, который предотвращает стандартное поведение прокрутки на основном сайте с помощью `event.preventDefault()`.

2. Если содержимое может прокручиваться вертикально (т.е. `scrollHeight > clientHeight`), мы прокручиваем его, изменяя `scrollTop`.

3. Мы используем GSAP ScrollTrigger для управления анимацией и скроллингом внутри `scrollable-content`.

Таким образом, колесо мыши будет прокручивать содержимое модального окна, и основное окно не будет реагировать на прокрутку, когда фокус в модальном окне.