Как вернуть последний слайд в положение bottom: 0 при прокрутке вверх?

Вот мой слайд: <a href="https://codepen.io/Shreer/pen/wBwMZjd" rel="nofollow">тык</a> <br/> <br/> Смысл задумки таков: при прокрутке слайдера каждый слайд занимает 100vh. <br/> <br/> Когда прокрутка идет вниз, все работает корректно. Когда прокрутка осуществляется вверх и курсор находится на секции, тоже все отлично. <br/> <br/> Однако, если начать прокрутку слайда с положением курсора на самом слайде, который еще не полностью занимает 100vh, слайд просто прокручивается, не установив корректную высоту. <br/> <br/> <b>Вопрос:</b> Как обеспечить установку высоты последнего слайда в 100vh при прокрутке вверх, независимо от положения курсора, перед тем как разрешить дальнейшую прокрутку?
  • 6 декабря 2024 г. 12:14
Ответы на вопрос 2
Чтобы обеспечить установку высоты последнего слайда в 100vh при прокрутке вверх, вы можете использовать JavaScript вместе с обработчиками событий для отслеживания прокрутки. Ниже представлен пример, который поможет вам достичь желаемого эффекта.

1. **HTML**: Убедитесь, что ваши слайды корректно настроены и каждый слайд занимает 100vh.

2. **CSS**: Убедитесь, что стиль для слайдов установлен на 100vh.

3. **JavaScript**: Используйте обработчик события `scroll`, чтобы отслеживать направление прокрутки и устанавливать высоту последнего слайда.

Вот пример кода JavaScript для реализации такого поведения:

```javascript
let lastSlide = document.querySelector('.slide:last-child'); // Получаем последний слайд

let isThrottled = false; // Флаг для управления частотой обработки события скролла

window.addEventListener('scroll', () => {
    if (!isThrottled) {
        isThrottled = true;

        // Проверяем текущее положение прокрутки
        if ((window.innerHeight + window.scrollY) < document.body.offsetHeight) {
            // Если прокрутка идет вниз
            lastSlide.style.height = '100vh';
        }

        // Установка высоты последнего слайда при прокрутке вверх
        if (window.scrollY < lastSlide.offsetTop) {
            lastSlide.style.height = '100vh';
        }

        setTimeout(() => {
            isThrottled = false; // Сброс флага после задержки
        }, 100); // Примерная задержка в 100 мс
    }
});
```

### Объяснение:

- **lastSlide**: Мы находим последний слайд, чтобы управлять его стилями.
- **isThrottled**: Используем флаг для контроля частоты срабатывания события скролла, чтобы избежать частого выполнения кода.
- **scroll**: Обработчик события, который проверяет текущее положение прокрутки. Если прокрутка идет вверх и курсор находится над последним слайдом, мы устанавливаем его высоту в 100vh.

### Примечание:
Это базовый пример, и вы можете дополнительно настроить логику в зависимости от ваших требований, таких как анимации или обработки других событий прокрутки. Обязательно протестируйте его на разных устройствах и браузерах для обеспечения корректности работы.
elem.addEventListener('mousemove', function (event) {
  // добавляем обработчик события "mousemove"
  const x = event.clientX; // получаем координату X мыши
  const y = event.clientY; // получаем координату Y мыши

  console.log(`Координаты мыши: x=${x}, y=${y}`); // выводим координаты мыши в консоль
});


Дальше через if >= или <= отслеживаешь и через динамическую загрузку css меняешь стили.
Похожие вопросы